Cosa stai cercando?
Creando un’applicazione Web complessa, probabilmente hai riscontrato il fatto che qualcosa non ha funzionato come previsto. Hai passato ore e ore alla ricerca di un bug nel tuo codice e poi su Internet alla ricerca di aiuto per risolvere il problema. Per rendere più facile per te, in questo articolo spieghiamo alcune tecniche efficaci di debug di un’applicazione Web che riducono significativamente il dolore del debug e accorciano i tempi di rilevamento dei problemi.
Console.log
In primo luogo, una console metodo javascript comunemente usato.log. Puoi inserire un metodo nel tuo codice con la variabile data. Durante l’esecuzione del codice, l’applicazione restituirà il valore delle variabili specificate all’interno del metodo nella console. Questo è il modo più semplice per verificare se il programma restituisce il valore atteso.
Sfortunatamente, questo non è un metodo di debug molto efficace. Tale approccio t non ci permette di vedere il progresso dell’esecuzione del codice (a meno che non inseriamo console.log ogni poche righe, ma poi la quantità di dati gettati nella console sarà illeggibile e faremo solo un pasticcio nel codice.) Inoltre, restituisce solo la variabile passata, a condizione che l’applicazione non getti un errore durante l’esecuzione del codice.
Suggerimento no. 1
Se si dispone di molti console.i log inseriscono il nome in una stringa e la variabile successiva, ad esempio console.log(‘variabile’, variabile).
Chrome DevTools (Scheda Sorgente)
Un metodo più efficiente per il debug di un’applicazione Web consiste nell’utilizzare Chrome DevTools e la scheda Sorgente. Prima di iniziare il debug nella scheda origine, dobbiamo aggiungere node_modules alla boxe nera. Aggiungiamo questa regola in modo che quando si passa attraverso i punti di interruzione non ci mostri i file da pacchetti esterni, il che rende difficile il debug. Dobbiamo aprire le impostazioni in Chrome → Blackboxing → Aggiungi modelli e poi scrivere lì /node_modules.
Quando aggiungi node_modules a black boxing possiamo andare alla scheda Origine. Supponiamo che tu voglia seguire in tempo reale il processo della tua funzione e controllare le uscite. Premere Ctrl + O nella scheda origine e immettere un nome file sorgente. Quindi metti i punti di interruzione sulle righe di codice che ti interessano, e puoi iniziare a eseguire il processo nel tuo browser. Quando le righe selezionate iniziano l’elaborazione, il browser interromperà l’esecuzione del codice. Vedi lo screenshot qui sotto.
Come puoi vedere, la riga di codice corrente in cui il browser si è fermato ha uno sfondo blu. Sul lato destro, c’è un bar dove si trova il nostro centro di comando. Ecco la nostra breve introduzione.
Controlli
Nella parte superiore della barra, si ha la sezione controlli. Concentriamoci sugli elementi cruciali. Il primo controllo di ripresa ci porta al successivo punto di interruzione contrassegnato nell’ambito del codice in esecuzione. Il secondo passaggio di controllo sulla chiamata di funzione successiva ci porta alla riga successiva del codice in esecuzione. Il controllo Ultimi punti di interruzione disattivati disattiva i punti di interruzione selezionati. È un controllo utile quando abbiamo molti punti di interruzione selezionati e vogliamo tornare a fare clic sull’applicazione per un po ‘ senza fermarsi ad ogni punto di interruzione.
Ambiti
Abbiamo una sezione ambiti di seguito. Abbiamo diversi tipi di ambiti: locale (la funzione attualmente eseguita) e chiusure a seconda dell’ambito in cui ci troviamo (ad esempio, il genitore della funzione attualmente eseguita o di un componente). In ciascuno di questi ambiti, il browser ci mostra tutte le variabili che si verificano in essi.
Breakpoints
L’ultima sezione discussa è breakpoints. Mostra quali punti di interruzione e in quali file sono contrassegnati. Usando le caselle di controllo, possiamo facilmente disattivarle e riattivarle.
Suggerimenti no. 2-5
- Se usi immutabile.js nel tuo progetto, installa l’Immutabile.js Oggetto Formatter plugin e attivarlo nelle impostazioni del browser. Ciò semplificherà significativamente il debug di oggetti immutabili.
- Se non si utilizza immutabile.js nel progetto e si utilizza il codice di Visual Studio come IDE, Si consiglia vivamente di installare e configurare Debugger per Chrome (VSC non ha un immutabile.js formattazione plugin). Semplifica ulteriormente il debug e consente modifiche al codice più rapide.
- Se la scheda origine non mostra i file locali, controlla la mappa di origine nel tuo progetto.
- Quando il browser si ferma su un punto di interruzione si ha accesso alle variabili anche nella console.
React Developer Tools
React Developer Tools sono anche soluzioni utili. Tali strumenti consentono di visualizzare facilmente la struttura ad albero React nel progetto, gli stati e gli oggetti di scena nel componente. La funzione Seleziona un elemento nella pagina per ispezionarlo è potente, specialmente quando non si conosce l’intero progetto. Ti aiuta a trovare il componente che devi aggiornare.
Suggerimento n. 6
Se si utilizza Vue.js, puoi usare Vue.js devtools. L’estensione ha funzioni simili e accesso a Vuex (l’equivalente redux in react).
Redux DevTools
Se usi Redux nel tuo progetto, Redux DevTools è un must. Tale soluzione consente di monitorare l’intero flusso di azioni, modifiche di stato, payload e visualizzare l’archivio corrente dopo ogni azione eseguita. Se qualcosa non funziona come supponiamo, e tutto sembra a posto nel codice, vale la pena considerare quali azioni stanno spedendo, con quale carico utile. A volte ci sono semplici errori come copiare la costante dall’azione sopra, rinominare senza modificare il valore e quindi chiamare qualcosa di completamente diverso. Di seguito è riportata una gif che mostra le più importanti funzioni Redux DevTools.
Suggerimento n. 7
Se l’applicazione esegue un numero elevato di azioni, l’estensione potrebbe non funzionare correttamente a causa della memoria insufficiente per elaborare molte azioni. Puoi provare a configurarlo nelle opzioni di estensione (in questo caso, l’opzione maxAge.)
Fiddler
L’ultimo strumento che vorremmo introdurre è Fiddler. Lo strumento è stato creato per gestire il traffico di rete. È estremamente utile quando abbiamo alcuni bug di produzione e non possiamo copiare i dati di produzione in un ambiente inferiore per eseguire il debug localmente. In tale situazione, per avere accesso ai dati di produzione nell’ambiente locale, impostiamo il traffico nella scheda AutoResponder. Quando si apre la pagina, invece di scaricare il file js dal server, Fidler collega il nostro file di produzione costruito localmente. Ulteriore debug viene eseguito nella scheda sorgente di Chrome dev tools. Di seguito è riportato uno screenshot con l’impostazione per reindirizzare il traffico al file locale. Il programma permette anche per gli endpoint finto.
Suggerimento n. 8
Se si desidera creare mock di endpoint in modo facile e veloce, è possibile utilizzare un programma mock moon.
Riepilogo di un debug agile di un’applicazione Web
Per molti di noi, il processo di debug di un’applicazione Web è associato a mal di testa e lunghe ore trascorse davanti al computer. Tuttavia, questo processo può essere abbreviato e reso più piacevole se si hanno gli strumenti giusti e il know-how per usarli. Spesso sono a portata di mano e gratuitamente. Abbiamo condiviso con voi gli strumenti più importanti e utili che usiamo ogni giorno.