Bagaimana Anda men-debug Bereaksi Asli?

266

Bagaimana seseorang men-debug kode Bereaksi mereka dengan Bereaksi Asli saat aplikasi berjalan di simulator aplikasi?

Mr
sumber
Terlepas dari jawaban ini, jika Anda bekerja pada Kode VS dan ingin men-debug di dalamnya daripada Chrome, maka periksa jawaban saya ini
gprathour
Silakan ikuti blog ini. medium.com/javascript-in-plain-english/…
Tunvir Rahman Tusher

Jawaban:

159

Cmd+Ddari dalam Simulator. Ini akan memunculkan Chrome dan dari sana Anda dapat menggunakan Alat Pengembang.

Edit:

Ini sekarang ditautkan dalam dokumen bantuan .

xanadont
sumber
8
Menggunakan simulator v8.2, Cmd + D tampaknya tidak melakukan apa-apa. Chrome terbaru. Apakah diperlukan plugin khusus di chrome atau proxy?
McG
5
Mendapatkan "Websocket debugger tidak tersedia. Apakah Anda lupa menyertakan RCTWebSocketExecutor?". : /
Tyler McGinnis
1
Saya memiliki kesalahan berikut ini: / Pengguna / Sistem / proyek / server / Proyek saya / mode_modules/react-native/packager/launchChromeDevTools.applescript:668:671: kesalahan skrip: Nama kelas yang diharapkan tetapi ditemukan properti. (-2741). Saya mengetahui bahwa jika saya menonaktifkan berbagi aplikasi Windows dengan Mac di Parallels, itu mulai berfungsi. Lihat stackoverflow.com/questions/29310936/… .
Serge van den Oever
5
Itu akan ada Cmd+Mdi OS X dan Android
bersisik
2
Perhatikan bahwa Cmd + D tidak akan melakukan apa pun jika Konfigurasi Konfigurasi Anda diatur ke "Lepaskan" - pastikan itu disetel ke "Debug".
jwinn
79

Debugging Bereaksi Aplikasi Asli

Untuk men-debug kode javascript aplikasi reaksi Anda lakukan hal berikut:

  1. Jalankan aplikasi Anda di simulator iOS.
  2. Tekan Command + Ddan halaman web harus terbuka di http: // localhost: 8081 / debugger-ui . (Hanya Chrome untuk saat ini) atau gunakanShake Gesture
  3. Aktifkan Jeda Saat Tertangkap Pengecualian untuk pengalaman debugging yang lebih baik.
  4. Tekan Command + Option + Iuntuk membuka alat Pengembang Chrome, atau membukanya melalui View-> Developer-> Developer Tools.
  5. Anda sekarang seharusnya dapat melakukan debug seperti biasa.

Pilihan

Instal ekstensi Alat Pengembang Bereaksi untuk Google Chrome. Ini akan memungkinkan Anda untuk menavigasi hierarki tampilan jika Anda memilih Reacttab saat alat pengembang terbuka.

Live Reload

Untuk mengaktifkan Live Reload lakukan hal berikut:

  1. Jalankan aplikasi Anda di simulator iOS.
  2. Tekan Control + Command + Z.
  3. Anda sekarang akan melihat opsi Enable/Disable Live Reload, Reloaddan Enable/Disable Debugging.
Jiuhong Deng
sumber
Jawaban ini pada dasarnya menyalin dokumen, yang merupakan awal, tetapi tidak terlalu mencerahkan. Apa arti "men-debug seperti biasa" dalam konteks ini?
GreenAsJade
6
Catatan penting: Bereaksi Alat Pengembang belum bekerja dengan Bereaksi Asli selama berbulan-bulan, dan masih harus diperbaiki. Info lebih lanjut di sini: github.com/facebook/react-devtools/issues/229
Lane Rettig
Siapa bilang ini di mac?
shinzou
@ Shinzou itu tersirat dengan menyebutkan simulator (itu simulator untuk devs iOS, emulator untuk devs Android). Ya saya tahu ini sudah lama, tapi tetap saja, hanya FWIW
Konrad Morawski
58

Untuk Aplikasi Android, jika Anda menggunakan Genymotion, Anda dapat beralih menu dengan menekan CMD + m, tetapi Anda mungkin harus mengaktifkannya di menu dengan melakukan ini.

  • Hapus centang widget
  • Aktifkan dengan CMD + mmengklik debug di chrome
John Lim
sumber
5
Akhirnya menemukan solusi Android, terima kasih! Dan dalam versi terbaru, debug in chromediganti dengan start debug remotely.
MewX
@MewX Bisakah Anda memberi tahu kami bagaimana cara melakukannya? πŸ€”
Mo.
@Muhammed Hai, Anda bisa mengikuti cmd + matau ctrl + m, dan memilih start debug remotelydari jendela sembulan di simulator Anda
MewX
31

Selain jawaban lainnya. Anda dapat men-debug asli reaksi menggunakan pernyataan debugger

contoh:

debugger; //breaks execution

Alat dev chrome Anda harus terbuka agar ini berfungsi

drikoda
sumber
F ya! Itu yang saya butuhkan! Terima kasih teman!
I_am_learning_now
27

jika Anda ingin men-debug menggunakan perangkat android di Windows cukup buka command prompt lalu ketik (pastikan adb Anda berfungsi dengan benar)

adb shell input keyevent 82

itu akan meminta layar seperti gambar masukkan deskripsi gambar di sini

lalu pilih

debug JS Remotely

itu akan secara otomatis membuka jendela baru. Kemudian terbuka periksa elemen atau tekan F12 untuk konsol.

bpsourav21
sumber
adakah iOS yang setara dengan perintah ini? Saya baru saja mulai dengan RN dan ini akan banyak membantu di masa depan
Juan Carlos Alpizar Chinchilla
26

masukkan deskripsi gambar di sini

Coba program ini: https://github.com/jhen0409/react-native-debugger

Bekerja pada: windows, osxdan linux.

Ini mendukung: react nativedanredux

Anda juga dapat memeriksa pohon komponen virtual dan memodifikasi gaya yang tercermin dalam aplikasi.

rampok
sumber
Bisakah saya melihat nilai variabel tertentu melalui debugger ini? Saya sudah mencoba console.log(url), tetapi saya tidak dapat menemukan di mana output.
TAMU
24

cmd ⌘+ DAnehnya tidak bekerja untuk saya. Menekan ctrl+ cmd ⌘+ Zdi simulator iOS memang memulai jendela browser debugging untuk saya.

Ini adalah layar yang muncul:

Bereaksi opsi debug asli

Lebih detail di sini.

bigtex777
sumber
Saya tidak melihat opsi ini ... :(
Nuh
16

Debugging react-native 0.40.0 pada Debian 8 (Jessie) dapat dilakukan dengan menavigasi ke http: // localhost: 8081 / debugger-ui di Chromium atau Firebug saat aplikasi Anda berjalan di simulator android. Untuk mengakses menu pengembang dalam aplikasi, jalankan perintah berikut di jendela terminal lain, seperti yang ditunjukkan di sini :

adb shell input keyevent 82

BdN3504
sumber
14

Saya tidak punya cukup reputasi untuk mengomentari jawaban sebelumnya yang bagus. :) Berikut adalah beberapa cara bagaimana saya melakukan debug ketika mengembangkan aplikasi asli-reaksi.

  1. Memuat ulang langsung

    react-native membuatnya sangat mudah untuk melihat perubahan Anda dengan tombol ⌘ + R atau bahkan hanya mengaktifkan memuat ulang secara langsung dan penjaga akan "menyegarkan" simulator dengan perubahan terbaru. Jika Anda mendapatkan kesalahan, Anda bisa mendapatkan petunjuk dari nomor baris dari layar merah itu. Beberapa undo akan membuat Anda kembali ke kondisi kerja dan mulai lagi.

  2. console.log('yeah, seriously.')

    Saya menemukan diri saya lebih suka membiarkan program berjalan dan mencatat beberapa informasi daripada menambahkan debuggerbreak point. (debugger tangguh berguna ketika mencoba untuk bekerja dengan paket / perpustakaan eksternal dan dilengkapi dengan pelengkapan otomatis, sehingga Anda tahu metode lain apa yang dapat Anda manfaatkan.)

  3. Enable Chrome Debuggingdengan debugger;break point di program Anda.

Yah itu tergantung pada jenis kesalahan yang Anda temui dan preferensi Anda tentang cara debug. Untuk sebagian besar undefined is not an object (evaluating 'something.something'), metode 1 dan 2 akan cukup baik untuk saya.

Sedangkan berurusan dengan pustaka atau paket eksternal yang ditulis oleh pengembang lain akan membutuhkan lebih banyak upaya untuk debug karena itu alat yang bagus seperti Chrome Debugging

Kadang-kadang itu berasal dari platform reaksi asli itu sendiri sehingga googling untuk masalah reaksi asli akan sangat membantu.

Semoga ini bisa membantu seseorang di luar sana.

chinloong
sumber
12

Alih-alih Cmd+M, untuk Android Emulator Tekan F10di Windows. Emulator mulai menunjukkan semua opsi debug yang bereaksi asli.

gambar

Priyanga
sumber
10
adb logcat *:S ReactNative:V ReactNativeJS:V

jalankan terminal ini untuk android log.

nagasundaram I
sumber
osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch
9

Jika Anda menggunakan Microsoft Visual Code, maka instal ekstensi React Native Tools. Kemudian Anda dapat menambahkan break point hanya dengan mengklik nomor baris yang diinginkan. Ikuti langkah-langkah ini untuk menyiapkan dan men-debug aplikasi: MEMPERSIAPKAN LARI

Jangan lupa untuk mengaktifkan Debug JS Remotely di emulator jika Anda menggunakannya.

Temui Patel
sumber
9

Untuk Android: Ctrl + M (emulator) atau Goyangkan ponsel (Dalam Perangkat) untuk membuka menu.

Untuk iOS: Cmd + D atau Goyangkan Ponsel untuk membuka menu

Pastikan Anda memiliki chrome.

Pada menu yang terungkap, pilih Debug JS Remotely Option.

Chrome akan dibuka secara otomatis di localhost: 8081 / debugger-ui. Anda juga dapat secara manual membuka debugger dengan tautan ini.

Di sana buka konsol dan Anda dapat melihat log dicatat.

Naveen Vignesh
sumber
8

Bagi saya cara terbaik untuk men-debug di React-Native adalah dengan menggunakan "Reactotron" .

Instal Reactotron kemudian tambahkan ini ke package.json Anda:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

sekarang, itu hanya masalah login kode Anda. misalnya:console.tron.log('debug')

Vinay
sumber
8
  1. Jalankan aplikasi Anda di simulator - bereaksi run-ios asli
  2. Tekan ctrl + d dan klik pada Debug JS Remotely

masukkan deskripsi gambar di sini

  1. halaman web harus terbuka di http: // localhost: 8081 / debugger-ui , jika tidak ketik URL dan buka tautan ini di Chrome
  2. Klik kanan pada halaman dan klik Periksa dan itu akan membuka alat pengembang untuk chrome

masukkan deskripsi gambar di sini

  1. Buka sumber di menu atas dan temukan file kelas js Anda di explorer file sebelah kanan

  2. Anda dapat meletakkan breakpoints ke tampilan dan debug kode di sana seperti yang Anda lihat pada gambar.

Sameera Chathuranga
sumber
6

Secara default, simulator ios saya tidak mengambil penekanan tombol itulah sebabnya cmd-D tidak berfungsi. Saya harus mengaktifkan pengaturan untuk keyboard menggunakan menu simulator:

Perangkat Keras> Keyboard> Sambungkan Keyboard

Sekarang cmd-D meluncurkan debugging krom.

Mr
sumber
6

Untuk aplikasi Android .Tekan Ctrl + M pilih debug js dari jarak jauh itu akan membuka jendela baru di chrome dengan url http: // localhost: 8081 / debugger-ui . Sekarang Anda dapat men-debug aplikasi di browser chrome

Sujeesh Balan
sumber
5

Memiliki ruang dalam path file mencegah para Cmd+ Ddari bekerja. Saya memindahkan proyek saya ke lokasi tanpa spasi dan akhirnya saya berhasil menjalankan debugger Chrome. Sepertinya ada bug .

micksabox
sumber
5

Jika Anda ingin mengaktifkan debugging secara default:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Untuk mengaktifkan ini di Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Referensi: Luncurkan aplikasi React Native dengan "Debug JS Remotely" diaktifkan secara default

Olcay Ertaş
sumber
Di tempat tertentu saya harus meletakkan 4 baris itu? Di App.js atau index.js?
Julien Lamarche
@JulienLamarche Dimasukkan ke dalam App.js
Olcay Ertaş
yang harus diterima sebagai jawaban .... mengapa juga percaya pada perintah .....
Tushar Pandey
4

Sangat sederhana hanya dua perintah

For IOS $ react-native log-ios
For Android $ react-native log-android
Chakra Abhijit
sumber
inilah cara saya melakukannya!
Zach Cook
Ini adalah cara yang sangat hebat untuk melihat apa yang terjadi dengan toko Anda
Daan
4

Dengan asumsi Anda ingin menampilkan menu ini di emulator Android masukkan deskripsi gambar di sini

  • Kemudian, cobalah ⌘+muntuk memunculkan dialog pengaturan dev ini pada emulator Android di Mac.

  • Jika tidak muncul maka buka AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box. masukkan deskripsi gambar di sini

  • Dan coba lagi ⌘+m.

  • Jika tidak menunjukkan diam maka pergi ke pengaturan emulator yang sedang berjalan dan pada Send keyboard shortcuts tocombobox / dropdown kemudian pilih Emulator controls (default)opsi.

masukkan deskripsi gambar di sini

  • Dan coba lagi ⌘+m.

  • Saya harap ini membantu, itu berhasil untuk saya.

Nkokhelox
sumber
4

Jika Anda menggunakan Redux, saya sangat merekomendasikan Bereaksi Native Debugger. Ini termasuk devtools Chrome, tetapi juga memiliki Redux devtools dan Bereaksi devtools.

Redux Devtools : Ini memungkinkan Anda untuk melihat tindakan Anda, dan melangkah maju dan mundur melaluinya. Ini juga memungkinkan Anda untuk melihat toko redux Anda dan memiliki fitur untuk secara otomatis membedakan keadaan sebelumnya dengan keadaan yang diperbarui untuk setiap tindakan, sehingga Anda dapat melihat bahwa ketika Anda melangkah bolak-balik melalui serangkaian tindakan.

Bereaksi Devtools : Ini memungkinkan Anda untuk memeriksa komponen tertentu, yaitu semua alat peraga itu dan juga status komponennya. Jika Anda memiliki bagian dari status komponen yang merupakan boolean, ini memungkinkan Anda mengkliknya untuk mengaktifkannya dan melihat bagaimana reaksi aplikasi Anda ketika itu berubah. Fitur hebat.

Chrome Devtools Memungkinkan Anda untuk melihat semua output konsol Anda, gunakan breakpoints, jeda pada debugger; dll. Fitur debugging standar. Jika Anda mengklik kanan area di mana tindakan Anda tercantum dalam Redux Devtools dan pilih 'Izinkan Pemeriksaan Jaringan', Anda kemudian dapat memeriksa panggilan API Anda di tab jaringan Chrome Devtools yang manis.

Kesimpulannya memiliki semua ini di satu tempat adalah fantastis! Jika Anda tidak membutuhkannya, Anda dapat mengaktifkan / menonaktifkannya. Dapatkan Bereaksi Debugger Asli dan nikmati hidup.

Nunchucks
sumber
4

Ini adalah cara alternatif untuk menggunakan aplikasi debugger asli yang bereaksi.

Anda dapat mengunduh aplikasi menggunakan tautan di bawah ini aplikasi yang sangat bagus untuk mengelola toko redux bersama dengan kode sumber.

react-native-debugger

juga sekarang hari Anda dapat langsung menggunakan tautan di bawah ini untuk membantu Anda.

chrome-developer-tools

Hardik Virani
sumber
3
  1. Jika Anda menggunakan emulator gunakan Ctrl+ M& simulator Cmd+D

  2. Klik pada - Debug js jarak jauh

  3. Google Chrome pergi ke konsol

Krishnendu Bhattacharyya
sumber
3

Ada juga nama debuger yang sangat bagus, Reactotron. https://github.com/infinitered/reactotron

Anda tidak harus dalam mode debug untuk melihat beberapa nilai data dan ada banyak opsi.

pergi melihat-lihat yang benar-benar bermanfaat. ;)

Youcef EL KAMEL
sumber
Terima kasih! Kami menggunakan RN 0,59 yang tampaknya tidak kompatibel dengan Flipper.
chichilatte
3

Dalam React-Native debugging jauh lebih mudah.

  • Untuk debug menggunakan iOS

cmd + d

ctrl + cmd + z (Untuk simulator)

  • Untuk debug di android

Guncangkan perangkat dengan sentuhan (Pastikan opsi pengembang Anda diaktifkan)

jatin.7744
sumber
1
Penjelasan yang bagus.
Narendra Solanki
3

Langkah 1: Tempatkan di debuggermana pun Anda ingin menghentikan skrip, seperti:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

Ini akan menjeda debugger ketika kontrol datang ke blok kode ini.

Langkah 2: Tekan Cmd+Dpada emulator ios dan Cmd+Mpada simulator Android . Jika Anda memiliki perangkat asli, guncangkan perangkat untuk membuka menu dev, jika Anda tidak ingin goyang perangkat ikuti blog ini

Langkah 3: Pilih Enable Remote JS Debugging, ini akan membuka Chrome

masukkan deskripsi gambar di sini

Langkah 4: PilihDeveloper Tools.

masukkan deskripsi gambar di sini

Langkah 5: debugger Anda dijeda di Sourcestab di mana pun Anda telah menulis debuggerdalam kode Anda. Pergi ke konsol dan ketik parameter apa pun yang ingin Anda debug (yang ada di blok kode) seperti: masukkan deskripsi gambar di sini Untuk pindah ke titik debugger berikutnya lagi pindah ke Sumber -> klik tombol Lanjutkan eksekusi script (tombol biru sudut kanan)

Tempatkan debugger, di mana pun Anda ingin menjeda skrip.

Nikmati debugging !!

Aishwarya
sumber
3

Anda dapat menggunakan Safari untuk men-debug versi iOS aplikasi Anda tanpa harus mengaktifkan "Debug JS Remotely", cukup ikuti langkah-langkah berikut:

1. Enable Develop menu in Safari: Preferences β†’ Advanced β†’ Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop β†’ {Your Simulator} β†’ Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
Hussam Kurd
sumber
3

Pertama di simulator ios Anda, jika Anda menekan tombol [command + D] maka Anda dapat melihat layar ini.

masukkan deskripsi gambar di sini

Kemudian klik tombol Debug JS dari jarak jauh.

Setelah Anda mungkin melihat Bereaksi halaman Asli Debugger seperti ini.

masukkan deskripsi gambar di sini

Dan kemudian buka inspektur Anda [f12], dan buka debug konsol tab itu! :)

Jinsung Sunwoo
sumber
2

Bereaksi Asli 0,62 Dirilis - Resmi Solusi adalah Flipper πŸš€

Flipper adalah alat debugging Android & iOS Mobile tanpa menggunakan mode debug di bereaksi asli.

Sejak RN 0,62 (Lihat tautan ini ), Flipper diinisialisasi dengan proyek default.

Flipper memiliki beberapa plugin untuk debugging. Pengaya termasuk Layout,Network ,Shared preferences

Manfaat terbesar Flipper juga tidak banyak plugin tetapi Anda dapat melihat debugging konsol perangkat Android / iOS dengan mudah juga.

Sirip memperingatkan Anda tentang kerusakan atau penolakan jaringan juga.

masukkan deskripsi gambar di sini

Plugin Layout termasuk mode aksesibilitas dan mode target.

masukkan deskripsi gambar di sini

Anda juga dapat melihat permintaan / respons jaringan mentah di Aplikasi Anda.

MJ Studio
sumber
Apakah kita harus menginstal Flipper secara manual? Atau entah bagaimana ia dikirim dengan React Native? Jika demikian, bagaimana kita membukanya?
Charanor
@ Charanor saya instal menggunakan panduan upgrade asli reaksi ketika meningkatkan ke 0,62
MJ Studio