Bagaimana seseorang men-debug kode Bereaksi mereka dengan Bereaksi Asli saat aplikasi berjalan di simulator aplikasi?
266
Bagaimana seseorang men-debug kode Bereaksi mereka dengan Bereaksi Asli saat aplikasi berjalan di simulator aplikasi?
Jawaban:
Cmd+Ddari dalam Simulator. Ini akan memunculkan Chrome dan dari sana Anda dapat menggunakan Alat Pengembang.
Edit:
Ini sekarang ditautkan dalam dokumen bantuan .
sumber
Cmd+M
di OS X dan AndroidDebugging Bereaksi Aplikasi Asli
Untuk men-debug kode javascript aplikasi reaksi Anda lakukan hal berikut:
Command + D
dan halaman web harus terbuka di http: // localhost: 8081 / debugger-ui . (Hanya Chrome untuk saat ini) atau gunakanShake Gesture
Command + Option + I
untuk membuka alat Pengembang Chrome, atau membukanya melaluiView
->Developer
->Developer Tools
.Pilihan
Instal ekstensi Alat Pengembang Bereaksi untuk Google Chrome. Ini akan memungkinkan Anda untuk menavigasi hierarki tampilan jika Anda memilih
React
tab saat alat pengembang terbuka.Live Reload
Untuk mengaktifkan Live Reload lakukan hal berikut:
Control + Command + Z
.Enable/Disable Live Reload
,Reload
danEnable/Disable Debugging
.sumber
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.CMD + m
mengklik debug di chromesumber
debug in chrome
diganti denganstart debug remotely
.cmd + m
atauctrl + m
, dan memilihstart debug remotely
dari jendela sembulan di simulator AndaSelain jawaban lainnya. Anda dapat men-debug asli reaksi menggunakan pernyataan debugger
contoh:
Alat dev chrome Anda harus terbuka agar ini berfungsi
sumber
jika Anda ingin men-debug menggunakan perangkat android di Windows cukup buka command prompt lalu ketik (pastikan adb Anda berfungsi dengan benar)
itu akan meminta layar seperti gambar
lalu pilih
itu akan secara otomatis membuka jendela baru. Kemudian terbuka periksa elemen atau tekan F12 untuk konsol.
sumber
Coba program ini: https://github.com/jhen0409/react-native-debugger
Bekerja pada:
windows
,osx
danlinux
.Ini mendukung:
react native
danredux
Anda juga dapat memeriksa pohon komponen virtual dan memodifikasi gaya yang tercermin dalam aplikasi.
sumber
console.log(url)
, tetapi saya tidak dapat menemukan di mana output.cmd β+ DAnehnya tidak bekerja untuk saya. Menekan ctrl+ cmd β+ Zdi simulator iOS memang memulai jendela browser debugging untuk saya.
Ini adalah layar yang muncul:
Lebih detail di sini.
sumber
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
sumber
Saya tidak punya cukup reputasi untuk mengomentari jawaban sebelumnya yang bagus. :) Berikut adalah beberapa cara bagaimana saya melakukan debug ketika mengembangkan aplikasi asli-reaksi.
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.
console.log('yeah, seriously.')
Saya menemukan diri saya lebih suka membiarkan program berjalan dan mencatat beberapa informasi daripada menambahkan
debugger
break 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.)Enable Chrome Debugging
dengandebugger;
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.
sumber
Alih-alih Cmd+M, untuk Android Emulator Tekan F10di Windows. Emulator mulai menunjukkan semua opsi debug yang bereaksi asli.
sumber
jalankan terminal ini untuk android log.
sumber
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:
Jangan lupa untuk mengaktifkan Debug JS Remotely di emulator jika Anda menggunakannya.
sumber
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.
sumber
Bagi saya cara terbaik untuk men-debug di React-Native adalah dengan menggunakan "Reactotron" .
Instal Reactotron kemudian tambahkan ini ke package.json Anda:
sekarang, itu hanya masalah login kode Anda. misalnya:
console.tron.log('debug')
sumber
Buka sumber di menu atas dan temukan file kelas js Anda di explorer file sebelah kanan
Anda dapat meletakkan breakpoints ke tampilan dan debug kode di sana seperti yang Anda lihat pada gambar.
sumber
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.
sumber
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
sumber
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 .
sumber
Jika Anda ingin mengaktifkan debugging secara default:
Untuk mengaktifkan ini di Android:
Referensi: Luncurkan aplikasi React Native dengan "Debug JS Remotely" diaktifkan secara default
sumber
Sangat sederhana hanya dua perintah
sumber
Dengan asumsi Anda ingin menampilkan menu ini di emulator Android
Kemudian, cobalah
β+m
untuk 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
.Dan coba lagi
β+m
.Jika tidak menunjukkan diam maka pergi ke pengaturan emulator yang sedang berjalan dan pada
Send keyboard shortcuts to
combobox / dropdown kemudian pilihEmulator controls (default)
opsi.Dan coba lagi
β+m
.Saya harap ini membantu, itu berhasil untuk saya.
sumber
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.
sumber
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
sumber
Jika Anda menggunakan emulator gunakan Ctrl+ M& simulator Cmd+D
Klik pada - Debug js jarak jauh
Google Chrome pergi ke konsol
sumber
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. ;)
sumber
Dalam React-Native debugging jauh lebih mudah.
sumber
Langkah 1: Tempatkan di
debugger
mana pun Anda ingin menghentikan skrip, seperti:Ini akan menjeda debugger ketika kontrol datang ke blok kode ini.
Langkah 2: Tekan
Cmd+D
pada emulator ios danCmd+M
pada simulator Android . Jika Anda memiliki perangkat asli, guncangkan perangkat untuk membuka menu dev, jika Anda tidak ingin goyang perangkat ikuti blog iniLangkah 3: Pilih
Enable Remote JS Debugging
, ini akan membuka ChromeLangkah 4: Pilih
Developer Tools.
Langkah 5: debugger Anda dijeda di
Sources
tab di mana pun Anda telah menulisdebugger
dalam kode Anda. Pergi ke konsol dan ketik parameter apa pun yang ingin Anda debug (yang ada di blok kode) seperti: 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 !!
sumber
Anda dapat menggunakan Safari untuk men-debug versi iOS aplikasi Anda tanpa harus mengaktifkan "Debug JS Remotely", cukup ikuti langkah-langkah berikut:
sumber
Pertama di simulator ios Anda, jika Anda menekan tombol [command + D] maka Anda dapat melihat layar ini.
Kemudian klik tombol Debug JS dari jarak jauh.
Setelah Anda mungkin melihat Bereaksi halaman Asli Debugger seperti ini.
Dan kemudian buka inspektur Anda [f12], dan buka debug konsol tab itu! :)
sumber
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.
Plugin Layout termasuk mode aksesibilitas dan mode target.
Anda juga dapat melihat permintaan / respons jaringan mentah di Aplikasi Anda.
sumber