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

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

Edit:

Ini sekarang ditautkan dalam dokumen bantuan .

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.

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

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

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

lalu pilih

debug JS Remotely

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

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.

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.

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

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.

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

adb logcat *:S ReactNative:V ReactNativeJS:V

jalankan terminal ini untuk android log.

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.

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.

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')

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

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

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

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

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.

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

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 .

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

Sangat sederhana hanya dua perintah

For IOS $ react-native log-ios
For Android $ react-native log-android

Dengan asumsi Anda ingin menampilkan menu ini di emulator Android

• 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.

• 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.

• Dan coba lagi ⌘+m.

• Saya harap ini membantu, itu berhasil untuk saya.

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.

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

1. Jika Anda menggunakan emulator gunakan Ctrl+ M& simulator Cmd+D

2. Klik pada - Debug js jarak jauh

3. Google Chrome pergi ke konsol

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. ;)

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)

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

Langkah 4: PilihDeveloper Tools.

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: 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 !!

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

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! :)

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.