Come si fa a eseguire il debug del proprio codice React con React Native mentre l'app è in esecuzione nel simulatore di app?

Cmd+Ddall'interno del simulatore. Verrà pop-up Chrome e da lì puoi utilizzare gli Strumenti per sviluppatori.

Modificare:

Questo è ora collegato nei documenti di aiuto .

Debug di app native React

Per eseguire il debug del codice javascript dell'app di reazione, procedi come segue:

1. Esegui la tua applicazione nel simulatore iOS.
2. Stampa Command + De una pagina web dovrebbe aprirsi a http: // localhost: 8081 / debugger-ui . (Chrome solo per ora) o usa ilShake Gesture
3. Abilita Pausa sulle eccezioni rilevate per una migliore esperienza di debug.
4. Premere Command + Option + Iper aprire gli strumenti di sviluppo di Chrome o aprirlo tramite View-> Developer-> Developer Tools.
5. Ora dovresti essere in grado di eseguire il debug come faresti normalmente.

Opzionale

Installa l' estensione React Developer Tools per Google Chrome. Questo ti permetterà di navigare nella gerarchia della vista se selezioni la Reactscheda quando gli strumenti di sviluppo sono aperti.

Ricarica dal vivo

Per attivare Live Reload, procedi come segue:

1. Esegui la tua applicazione nel simulatore iOS.
2. Press Control + Command + Z.
3. Vedrete ora i Enable/Disable Live Reload, Reloade le Enable/Disable Debuggingopzioni.

Per un'app Android, se stai usando Genymotion puoi attivare o disattivare il menu premendo CMD + m, ma potresti doverlo abilitare nel menu in questo modo.

• Deseleziona il widget
• Abilitalo facendo CMD + mclic su debug in Chrome

Oltre alle altre risposte. È possibile eseguire il debug di reattivo nativo utilizzando l'istruzione debugger

esempio:

debugger; //breaks execution

Gli strumenti Chrome Dev devono essere aperti affinché questo funzioni

se desideri eseguire il debug utilizzando il dispositivo Android su Windows, apri un prompt dei comandi e digita (assicurati che l'adb funzioni correttamente)

adb shell input keyevent 82

richiederà una schermata come l'immagine

quindi selezionare

debug JS Remotely

si aprirà automaticamente una nuova finestra, quindi apri l'elemento inspect o premi F12 per la console.

Prova questo programma: https://github.com/jhen0409/react-native-debugger

Funziona su: windows, osxe linux.

Supporta: react nativeeredux

Puoi anche controllare l'albero dei componenti virtuali e modificare gli stili che si riflettono nell'app.

cmd ⌘+ Dstranamente non ha funzionato per me. Premendo ctrl+ cmd ⌘+ Znel simulatore iOS ho dato il via alla finestra del browser di debug per me.

Questa è la schermata che si apre:

Maggiori dettagli qui.

Il debug di 0,40,0 reattivo nativo su Debian 8 (Jessie) può essere eseguito navigando su http: // localhost: 8081 / debugger-ui in Chromium o Firebug mentre la tua app è in esecuzione nel simulatore Android. Per accedere al menu sviluppatore in-app, eseguire il comando seguente in un'altra finestra del terminale, come indicato qui :

adb shell input keyevent 82

Non ho abbastanza reputazione per commentare le risposte precedenti che sono fantastiche. :) Ecco alcuni dei modi in cui sto eseguendo il debug durante lo sviluppo di un'app Reazione-nativa.

1. Ricarica dal vivo

   Reattivo-nativo rende super facile vedere le tue modifiche con i tasti ⌘ + R o anche solo abilitare la ricarica dal vivo e watchman "aggiorna" il simulatore con le ultime modifiche. Se ricevi un errore, puoi ottenere un indizio dal numero di riga da quella schermata rossa. Un paio di annullamenti ti riporteranno allo stato di lavoro e ricominceranno.

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

   Mi trovo a preferire lasciar correre il programma e registrare alcune informazioni piuttosto che aggiungere un debuggerpunto di interruzione. (il debugger avanzato è utile quando si tenta di lavorare con pacchetti / librerie esterne e viene fornito con il completamento automatico, quindi si conoscono quali altri metodi è possibile utilizzare.)

3. Enable Chrome Debuggingcon debugger;punto di interruzione nel programma.

Bene dipende dal tipo di errori che hai riscontrato e dalle tue preferenze su come eseguire il debug. Per la maggior parte del undefined is not an object (evaluating 'something.something')metodo 1 e 2 sarà abbastanza buono per me.

Considerando che gestire librerie esterne o pacchetti scritti da altri sviluppatori richiederà un maggiore sforzo per il debug, quindi un buon strumento come Chrome Debugging

A volte proviene dalla stessa piattaforma di reazione nativa, quindi cercare su google problemi nativi di reazione sarà sicuramente d'aiuto.

spero che questo aiuti qualcuno là fuori.

Invece di Cmd+M, per Android Emulator Press F10in Windows. L'emulatore inizia a mostrare tutte le opzioni di debug reattivo.

adb logcat *:S ReactNative:V ReactNativeJS:V

esegui questo nel terminale per il registro Android.

Se si utilizza Microsoft Visual Code, installare l'estensione React Native Tools. Quindi è possibile aggiungere punti di interruzione semplicemente facendo clic sul numero di riga desiderato. Seguire questi passaggi per configurare ed eseguire il debug dell'app:

Non dimenticare di abilitare Debug JS in remoto nell'emulatore se lo stai utilizzando.

Per Android: Ctrl + M (emulatore) o Scuoti il ​​telefono (Nel dispositivo) per visualizzare il menu.

Per iOS: Cmd + D o Scuoti il ​​telefono per visualizzare il menu

Assicurati di avere Chrome.

Nel menu rivelato selezionare l'opzione Debug JS in remoto.

Chrome verrà aperto automaticamente su localhost: 8081 / debugger-ui. Puoi anche andare manualmente al debugger con questo link.

Ci rivela console e puoi vedere i registri annotati.

Per me il modo migliore per eseguire il debug su React-Native è utilizzare "Reactotron" .

Installa Reactotron quindi aggiungili al tuo package.json:

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

ora, è solo questione di accedere al tuo codice. per esempio:console.tron.log('debug')

1. Esegui la tua app nel simulatore - reatt-native run-ios
2. Premi ctrl + d e fai clic su Debug JS da remoto

1. la pagina web dovrebbe aprirsi a http: // localhost: 8081 / debugger-ui , se non digitare l'URL e andare a questo link in Chrome
2. Fai clic destro sulla pagina e fai clic su Controlla e dovrebbe aprire gli strumenti di sviluppo per Chrome

3. Vai alle fonti nel menu in alto e trova il tuo file di classe js nel file explorer sul lato destro

4. È possibile inserire punti di interruzione nella vista ed eseguire il debug del codice all'interno, come è possibile vedere nell'immagine.

Per impostazione predefinita, il mio simulatore iOS non stava rilevando le sequenze di tasti, motivo per cui cmd-D non ha funzionato. Ho dovuto attivare le impostazioni per la tastiera usando il menu del simulatore:

Hardware> Tastiera> Connetti tastiera

Ora cmd-D avvia il debug di Chrome.

Per l'app Android .Premere Ctrl + M selezionare il debug js da remoto aprirà una nuova finestra in Chrome con url http: // localhost: 8081 / debugger-ui . Ora puoi eseguire il debug dell'app nel browser Chrome

Avere uno spazio nel percorso del file impedisce al Cmd+ Ddi funzionare. Ho spostato il mio progetto in una posizione senza spazio e finalmente ho fatto funzionare il debugger di Chrome. Sembra un bug .

Se si desidera abilitare il debug per impostazione predefinita:

import { NativeModules } from 'react-native';

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

Per farlo funzionare su Android:

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

Riferimento: avviare un'app React Native con "Debug JS Remotoy" abilitato per impostazione predefinita

Molto semplici solo due comandi

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

Supponendo di voler mostrare questo menu sull'emulatore Android

• Quindi, prova a ⌘+mfar apparire questa finestra di dialogo delle impostazioni di sviluppo sull'emulatore Android su un Mac.

• Se non viene visualizzato, vai a AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• E quindi riprovare ⌘+m.

• Se non viene ancora visualizzato, vai alle impostazioni dell'emulatore in esecuzione e nella Send keyboard shortcuts tocasella combinata / menu a discesa quindi seleziona l' Emulator controls (default)opzione.

• E quindi riprovare ⌘+m.

• Spero che questo aiuti, ha funzionato per me.

Se stai usando Redux, consiglio vivamente il debugger nativo di React. Include devtools di Chrome, ma ha anche devtools di Redux e devtools di React.

Redux Devtools : questo ti permette di visualizzare le tue azioni e di avanzare avanti e indietro. Ti consente anche di visualizzare il tuo negozio redux e ha una funzione per diffondere automaticamente lo stato precedente con lo stato aggiornato per ogni azione, in modo da poterlo vedere mentre fai avanti e indietro attraverso una serie di azioni.

React Devtools : questo ti permette di ispezionare un determinato componente, vale a dire tutti i suoi oggetti di scena e il suo stato componente. Se hai un pezzo dello stato del componente che è un valore booleano, ti consente di fare clic per attivarlo e vedere come reagisce l'app quando cambia. Grande caratteristica.

Chrome Devtools Ti consente di vedere tutti gli output della tua console, utilizzare i punti di interruzione, mettere in pausa il debugger; ecc. Funzionalità di debug standard. Se fai clic con il pulsante destro del mouse sull'area in cui sono elencate le tue azioni in Redux Devtools e seleziona "Consenti ispezione rete", puoi quindi ispezionare le chiamate API nella scheda di rete di Chrome Devtools, che è semplice.

In conclusione, avere questi tutti in un unico posto è fantastico! Se non ne hai bisogno, puoi attivarlo / disattivarlo. Ottieni React Native Debugger e goditi la vita.

Questo è il modo alternativo di utilizzare l'applicazione di debugger nativa reattiva.

puoi scaricare l'applicazione usando il link seguente è un'ottima applicazione per gestire il redux store insieme al codice sorgente.

reagiscono-native-debugger

anche ora un giorno puoi usare direttamente il link qui sotto per aiutarti.

chrome-developer-tools

1. Se stai usando l'emulatore usa Ctrl+ M& simulatore Cmd+D

2. Fare clic su - Debug js in remoto

3. Google Chrome vai alla console

Esiste anche un ottimo nome di debug Reactotron. https://github.com/infinitered/reactotron

Non è necessario essere in modalità debug per visualizzare alcuni valori di dati e sono disponibili molte opzioni.

vai a dare un'occhiata davvero utile. ;)

In React-Native il debug è molto più semplice.

• Per eseguire il debug in IOS utilizzare

cmd + d

ctrl + cmd + z (per simulatore)

• Per eseguire il debug in Android

Scuoti il ​​dispositivo con il tocco (assicurati che l'opzione sviluppatore sia abilitata)

Passaggio 1: posiziona debuggerdove mai vuoi interrompere lo script, come:

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

Questo metterà in pausa il debugger quando mai il controllo arriva a questo blocco di codice.

Punto 2: Premete Cmd+Dsu ios emulatore e Cmd+Mil simulatore di Android . Se hai un dispositivo reale, agita il dispositivo per aprire il menu dev, se non vuoi scuotere il dispositivo segui questo blog

Passaggio 3: selezionare Enable Remote JS Debuggingper aprire Chrome

Passaggio 4: selezionareDeveloper Tools.

Passaggio 5: il debugger è in pausa nella Sourcesscheda ovunque tu abbia scritto debuggernel tuo codice. Vai alla console e digita tutti i parametri che desideri eseguire il debug (che sono presenti nel blocco di codice) come: Per passare al punto di debug successivo, passa nuovamente a Sorgenti -> fai clic sul pulsante Riprendi esecuzione script (pulsante blu nell'angolo destro)

Posiziona il debugger, ovunque tu voglia mettere in pausa lo script.

Goditi il ​​debug !!

Puoi utilizzare Safari per eseguire il debug della versione iOS dell'app senza dover abilitare "Debug JS in remoto", procedi nel seguente modo:

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

Innanzitutto nel simulatore iOS, se si preme il tasto [comando + D], è possibile visualizzare questa schermata.

Quindi fare clic sul pulsante Debug JS da remoto.

Dopo potresti vedere la pagina React Native Debugger come questa.

E quindi apri Inspector [f12] e vai alla scheda console esegui il debug! :)

Rilasciato React Native 0.62 - La soluzione ufficiale è Flipper 🚀

Flipper è uno strumento di debug per dispositivi mobili Android e iOS senza utilizzare la modalità debug in reattivo nativo.

Da RN 0.62 (Vedi questo link ), Flipper è inizializzato con il progetto predefinito.

Flipper ha alcuni plugin per il debug. I plugin sono Layout, Network,Shared preferences

Il vantaggio principale di Flipper non sono anche molti plugin, ma puoi vedere facilmente anche il debug della console del dispositivo Android / iOS.

Flipper avvisa anche di crash o rifiuto della rete.

Il plug-in di layout include la modalità di accessibilità e la modalità target.

È inoltre possibile visualizzare la richiesta / risposta di rete non elaborata nella propria applicazione.