Mi chiedo se qualcuno potrebbe suggerire un tutorial per principianti passo dopo passo su come eseguire il debug dell'app React.js? Sono abbastanza nuovo per React, in questo momento la cosa più fastidiosa è che ci sono molti errori mostrati nella console ma non ho idea di come rintracciarli.Qualsiasi buon tutorial di debug per React.js
E 'difficile descrivere una strategia generale per il debug "un errore di molto mostrato up" così vi guiderà attraverso il processo per il debug di errori a livello di componente:
Installare l'estensione Reagire strumenti di sviluppo per il browser di scelta:
Trova la componente
vi consiglio uno di questi percorsi:
2.a. Apri React tab dagli strumenti di sviluppo del browser e digita nella barra di ricerca in basso per cercare i componenti in base al nome.
2.b. Aprire Elements tab, selezionare un elemento e tornare a React. La gerarchia dei componenti verrà espansa fino a quando il componente React non corrisponde al nodo DOM selezionato in Elements.
Controllare lo stato e gli oggetti di scena del componente che si comporta in modo errato.
Se per qualche motivo non ti piace l'installazione di estensioni del browser, è possibile lanciare uno o più debugger; dichiarazioni di impostare i punti di interruzione che "pausa" l'esecuzione della vostra applicazione e ti permettono di ispezionare lo stack di chiamate, la portata e errori in questi punti.
React ha il proprio strumento di debug installato negli strumenti di chrome dev. Al momento è lo strumento più appropriato per eseguire il debug delle app. Ti consente di aggiungere punti di rottura, modificare i tuoi oggetti di scena negli strumenti di sviluppo e vedere risultati immediati. Un buon tutorial è questo https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, che è il tutorial ufficiale per il debug di React. Puoi anche scaricare l'estensione "React Developer Tools" che installerà le dipendenze di reazione sugli strumenti di sviluppo in chrome.
È anche possibile utilizzare il debugger standard di Chrome senza la dipendenza React, che funziona anche bene. Un buon tutorial per il debug in Chrome è questo: https://developers.google.com/web/tools/javascript/index?hl=en
Il problema principale è imparare come aggiungere un punto di interruzione nel codice tramite gli strumenti di sviluppo e imparare come identificare i problemi tramite le risposte ottenute. L'ultimo tutorial ti mostra davvero bene come farlo.
Spero che questo aiuti un po 'e buon codice!
Grazie, installerò questo strumento. – Kuan
Grazie proverò ad installare questo strumento – Kuan
Per ispezionare lo stato e gli oggetti di scena, dobbiamo avere il componente selezionato; non possiamo essere in 2.b. –
Un problema con questa soluzione è quello di "vedere" il componente nella scheda React, deve RENDER. Prendi in considerazione il rendering di qualcosa di estremamente semplice, come un tag DIV, e ispeziona lo stato e gli oggetti di scena successivamente. – Vlad