Bagaimana cara login di React Native?

Bagaimana saya bisa mencatat variabel di React Native, seperti menggunakan console.logketika mengembangkan untuk web?

console.log bekerja.

Secara default di iOS, ini masuk ke panel debug di dalam Xcode.

Dari simulator iOS, tekan ( ⌘+ D) dan tekan Remote JS Debugging . Ini akan membuka sumber daya, http: // localhost: 8081 / debugger-ui di localhost. Dari sana gunakan alat Pengembang javascript konsol javascript untuk melihatconsole.log

Gunakan console.log, console.warndll.

Pada React Native 0.29 Anda cukup menjalankan yang berikut ini untuk melihat log di konsol:

$ react-native log-ios
$ react-native log-android

Pra Bereaksi Asli 0,29, jalankan ini di konsol:

adb logcat *:S ReactNative:V ReactNativeJS:V

Posting Bereaksi Asli 0,29, jalankan:

react-native log-ios

atau

react-native log-android

Seperti kata Martin dalam jawaban lain.

Ini menunjukkan semua console.log (), kesalahan, catatan, dll. Dan menyebabkan nol melambat.

Menggunakan console.debug("text");

Anda akan melihat log di dalam terminal.

Langkah:

• Jalankan aplikasi:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Jalankan logger:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code memiliki konsol debug yang layak yang dapat menampilkan console.log Anda.

VS Code, lebih sering daripada tidak, React Native friendly.

Di sinilah Alat Pengembang Chrome adalah teman Anda.

Langkah-langkah berikut akan membawa Anda ke Alat Pengembang Chrome, tempat Anda dapat melihat console.loglaporan Anda .

Langkah

1. Instal Google Chrome , jika Anda belum melakukannya
2. Jalankan aplikasi menggunakan react-native run-androidataureact-native run-ios
3. Buka menu pengembang
   • Mac: ⌘+D untuk iOS atau ⌘Muntuk Android iOS
   • Windows / Linux: Goyangkan ponsel Android
4. Pilih Debug JS Remotely
5. Ini akan meluncurkan debugger di Chrome
6. Di Chrome: Tools -> More Tools -> Developer Optionsdan pastikan Anda berada di consoletab

Sekarang setiap kali sebuah console.logpernyataan dieksekusi, itu akan muncul di Alat Dev Chrome. Dokumentasi resmi ada di sini .

Ada 3 metode yang saya gunakan untuk debug ketika mengembangkan aplikasi Bereaksi Asli:

1. console.log(): menunjukkan di konsol
2. console.warn(): menunjukkan di bagian bawah kotak kuning aplikasi
3. alert(): ditampilkan sebagai prompt seperti di web

Saya lebih suka merekomendasikan kalian menggunakan React Native Debugger. Anda dapat mengunduh dan menginstalnya dengan menggunakan perintah ini.

brew update && brew cask install react-native-debugger

atau

Periksa tautan di bawah.

https://github.com/jhen0409/react-native-debugger

Selamat Hacking!

Saya memiliki masalah yang sama: pesan konsol tidak muncul di area debug XCode. Dalam aplikasi saya, saya melakukan cmd-d untuk membuka menu debug, dan ingat saya telah mengaktifkan "Debug di Safari".

Saya mematikan ini, dan beberapa pesan dicetak ke pesan keluaran, tetapi bukan pesan konsol saya. Namun, salah satu pesan log mengatakan:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Ini karena saya sebelumnya telah membundel proyek saya untuk pengujian pada perangkat nyata dengan perintah:

react-native bundle --minify

Ini dibundel tanpa "mode-dev" aktif. Untuk mengizinkan pesan dev, sertakan tanda --dev:

react-native bundle --dev

Dan pesan console.log kembali! Jika Anda tidak bundling untuk perangkat nyata, jangan lupa untuk re-titik jsCodeLocationdi AppDelegate.mke localhost (saya lakukan!).

Tekan [command + control + Z] di Xcode Simulator, pilih Debug JS Remotely, lalu tekan [command + option + J] untuk membuka alat pengembang Chrome.

Xcode Simulator Img

lihat ：Debugging Bereaksi Aplikasi Asli

Sangat sederhana untuk mendapatkan log di React-Native

Gunakan console.log dan console.warn

console.log('character', parameter)

console.warn('character', parameter)

Log ini dapat Anda lihat di konsol browser. Jika Anda ingin memeriksa log perangkat atau mengatakan log produksi APK yang dapat Anda gunakan

adb logcat

adb -d logcat

modul react-native-xlog yang dapat membantu Anda, adalah WeChat's Xlog untuk react-native. Yang dapat menghasilkan konsol Xcode dan file log, file log Produk dapat membantu Anda men-debug.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Pencatatan Waktu Pengembangan

Untuk pembuatan log waktu pengembangan, Anda dapat menggunakan console.log () . Satu hal penting, jika Anda ingin menonaktifkan logging dalam mode produksi, maka dalam file aplikasi Root Js, cukup tetapkan fungsi kosong seperti ini - console.log = {} Ini akan menonaktifkan seluruh penerbitan log di seluruh aplikasi secara bersamaan, yang sebenarnya diperlukan dalam produksi mode sebagai console.log menghabiskan waktu.

Jalankan Pencatatan Waktu

Dalam mode produksi, juga diperlukan untuk melihat log ketika pengguna nyata menggunakan aplikasi Anda secara real time. Ini membantu dalam memahami bug, penggunaan dan kasus yang tidak diinginkan. Ada banyak alat berbayar pihak ke-3 yang tersedia di pasar untuk ini. Salah satunya yang saya gunakan adalah dengan Logentries

Hal yang baik adalah bahwa Logentries juga mendapat React Native Module . Jadi, akan sangat sedikit waktu bagi Anda untuk mengaktifkan Jalankan pencatatan waktu dengan aplikasi seluler Anda.

Sesuatu yang baru saja keluar sekitar sebulan yang lalu adalah "Buat React Native App," sebuah pelat ketel yang mengagumkan yang memungkinkan Anda (dengan sedikit usaha) untuk menunjukkan seperti apa aplikasi Anda secara langsung di perangkat seluler Anda (APAPUN dengan kamera) menggunakan aplikasi Expo . Ini tidak hanya memiliki pembaruan langsung, tetapi juga memungkinkan Anda untuk melihat log konsol di terminal Anda seperti saat mengembangkan untuk web , daripada harus menggunakan browser seperti yang kami lakukan dengan React Native sebelumnya.

Anda tentu saja harus membuat proyek baru dengan boilerplate itu ... tetapi jika Anda perlu memindahkan file Anda, itu seharusnya tidak menjadi masalah. Cobalah.

Sunting: Sebenarnya bahkan tidak memerlukan kamera. Saya mengatakan itu untuk memindai kode QR, tetapi Anda juga bisa mengetikkan sesuatu untuk menyinkronkannya dengan server Anda, bukan hanya kode QR.

Ada dua opsi untuk men-debug atau mendapatkan output dari aplikasi asli reaksi Anda saat menggunakan

Emulator atau Perangkat Nyata

Untuk Pertama Menggunakan Emulator: gunakan

react-native log-android atau react-native log-ios

untuk mendapatkan output log

pada perangkat nyata. goyang perangkat Anda

jadi menu akan datang dari mana Anda memilih debug jarak jauh dan itu akan membuka layar ini di browser Anda. sehingga Anda dapat melihat output log Anda di tab konsol.

Gunakan debugger asli reaksi untuk masuk dan redux store https://github.com/jhen0409/react-native-debugg

Cukup unduh dan jalankan sebagai perangkat lunak lalu aktifkan mode Debug dari simulator.

Ini mendukung fitur debugging lainnya seperti elemen dalam alat pengembang chrome, yang membantu untuk melihat gaya yang disediakan untuk komponen apa pun.

Dukungan lengkap terakhir untuk alat redux dev

1. Masukkan console.log("My log text")kode Anda
2. buka alat Baris perintah Anda
3. memposisikan diri dalam folder pengembangannya

Di Android:

• tulis perintah ini: React-native log-android

Di IOS:

• tulis perintah ini: React-native log-ios

Anda dapat menggunakan opsi js debugly jarak jauh dari perangkat Anda atau Anda dapat menggunakan log-ios -asli log-android dan log-ios-asli untuk ios.

console.log () adalah cara mudah untuk men-debug kode Anda tetapi harus digunakan dengan fungsi panah atau bind () saat menampilkan keadaan apa pun. Anda mungkin menemukan tautannya bermanfaat.

Anda dapat melakukan ini dalam 2 metode

1> dengan menggunakan warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Dengan menggunakan Lansiran Ini tidak baik setiap kali jika mencapai peringatan maka setiap kali pop akan dibuka jadi jika melakukan perulangan berarti tidak disukai untuk menggunakan ini

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Pengguna dengan Windows dan Android Studio:

Anda akan menemukannya di bawah Logcat di Android Studio. Ada banyak pesan logging yang muncul di sini, jadi mungkin lebih mudah bagi Anda untuk membuat filter untuk "ReactNativeJS" yang hanya akan menampilkan pesan console.log Anda yang dibuat di dalam aplikasi asli reaksi Anda.

Setiap pengembang menghadapi masalah debugging dengan reaksi asli, bahkan saya juga menghadapi dan saya merujuk ini dan solusi sudah cukup bagi saya di tingkat awal, itu mencakup beberapa cara yang membantu kami untuk mencoba dan menggunakan apa yang pernah nyaman dengan kami

1. Debugging dengan console.log
2. Kode debug (logika) dengan Nuclide
3. Kode debug (logika) dengan Chrome
4. Gunakan Xcode untuk men-debug GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Anda dapat menggunakan Reactotron juga, itu akan memberi Anda lebih banyak fungsionalitas daripada sekadar logging. https://github.com/infinitered/reactotron

Ada beberapa cara untuk mencapai ini, saya daftar mereka dan termasuk kontra dalam menggunakannya juga. Kamu bisa menggunakan:

1. console.logdan lihat pernyataan logging aktif, tanpa memilih opsi debugging jarak jauh dari dev tools, Android Studio dan Xcode. atau Anda dapat memilih keluar dari opsi debugging jarak jauh dan melihat logging pada alat dev chrome atau vscode atau editor lain yang mendukung debugging, Anda harus berhati-hati karena ini akan memperlambat proses secara keseluruhan.
2. Kamu bisa menggunakan console.warn tetapi layar ponsel Anda akan dibanjiri dengan kotak-kotak kuning aneh yang mungkin atau mungkin tidak layak sesuai dengan situasi Anda.
3. Metode paling efektif yang saya temui adalah menggunakan alat pihak ketiga, Reactotron . Alat sederhana dan mudah dikonfigurasikan yang memungkinkan Anda melihat setiap pernyataan logging dari berbagai tingkatan (kesalahan, debug, peringatan, dll.). Ini memberi Anda alat GUI yang menunjukkan semua pencatatan aplikasi Anda tanpa memperlambat kinerja.

Anda menggunakan hal yang sama yang digunakan untuk web biasa. The consoleperintah juga bekerja dalam kasus ini. Sebagai contoh, Anda dapat menggunakan console.log(), console.warn(), console.clear() dll

Anda dapat menggunakan Pengembang Chrome untuk menggunakan consoleperintah saat Anda masuk saat menjalankan aplikasi React Native Anda.

console.log() adalah cara terbaik dan sederhana untuk melihat logon konsol Anda ketika Anda menggunakan debugger js jarak jauh dari menu pengembang Anda

Chrome Devtool adalah cara terbaik dan termudah untuk login dan debugging.

Jika Anda menggunakan osx dan menggunakan emulator, Anda dapat melihat console.log langsung di web safari inspektur.

Safari => Pengembangan => Simulator - [versi simulator Anda di sini] => JSContext

Biasanya ada dua skenario di mana kita perlu melakukan debug.

1. Ketika kami menghadapi masalah yang terkait dengan data dan kami ingin memeriksa data kami dan debugging yang terkait dengan data dalam kasus itu console.log('data::',data)

   dan men-debug js dari jarak jauh adalah pilihan terbaik.

2. Kasus lainnya adalah masalah terkait gaya dan UI di mana kita perlu memeriksa gaya komponen dalam hal alat reaksi-dev adalah pilihan terbaik.

   kedua metode tersebut disebutkan di sini.

console.log dapat digunakan untuk proyek JS apa pun. Jika Anda menjalankan aplikasi di localhost maka jelas itu mirip dengan proyek javascript apa pun. Tetapi saat menggunakan simulator atau perangkat apa pun, sambungkan simulator itu ke host lokal kami dan kami dapat melihatnya di konsol.