Debug del codice JavaScript
Debug è questo processo di ricerca di errori e di fissarli quando si esamina il codice o il programma. Mentre si dice che JavaScript sia difficile da eseguire il debug, renderemo le tue vite facili. Oggi in questo articolo parleremo di come eseguire il debug del codice JavaScript.
JavaScript Debugger
Tutti i browser moderni hanno debugger Javascript integrati. Questi debugger ci aiutano mostrando quegli errori. Questi debugger possono anche essere attivati o disattivati a seconda delle nostre esigenze.
La cosa interessante di questi debugger è che con questo possiamo anche impostare i punti di interruzione. I punti di interruzione sono inseriti nel nostro codice in cui interrompiamo l'esecuzione del codice. Quando il codice viene interrotto, possiamo verificare gli errori ed esaminare le variabili.
Dato che Google Chrome è un browser molto famoso, useremo Chrome per la maggior parte di questo articolo. Tuttavia, alla fine, ti mostreremo come abilitare il debug JavaScript anche in altri browser.
Per iniziare il debug in Google Chrome Premere il F12 chiave. Possiamo anche premere Ctrl+shift+i Per aprire il debugger. Tuttavia, anche se questi due non funzionano, prova a fare clic con il pulsante destro del mouse dal mouse ovunque all'interno della finestra della scheda browser. Clicca su ispezionare E dopo di che vai alla console.
Utilizzo della console.Metodo log ()
Google Chrome supporta il debug, quindi possiamo usare console.tronco d'albero() Nel nostro codice JavaScript per visualizzarlo all'interno della nostra finestra console.
Esempio
const str = "Let's Debug in Console";// Visingiamolo nella finestra della console
console.log (str);
Ora, quando facciamo clic su F12 e andiamo alla nostra console vedremo:
Come impostare i punti di interruzione
Possiamo anche impostare i punti di interruzione nella finestra del debugger. Come menzionato in precedenza, con ogni punto di interruzione che abbiamo impostato, l'esecuzione del codice si fermerà. Esamineremo quindi il nostro codice e troveremo l'errore. Se non abbiamo trovato l'errore in quel punto di interruzione, aggiungeremo un altro punto di interruzione. È molto facile in quanto possiamo continuare il codice di esecuzione con solo un pulsante di clic (normalmente pulsante di riproduzione).
Supponiamo di avere un pulsante. Ogni volta che facciamo clic sul pulsante aggiunge un valore al valore precedente. Il valore predefinito sarà 0. Ora, se vogliamo eseguire il debug questo usando Breakpoint, dobbiamo impostare un Breakpoint. Se il valore del contatore non aumenta con il clic, sappiamo che il problema è sull'ascoltatore di eventi clicca.
Per mettere un punto di interruzione sull'ascoltatore di eventi, fai clic su F12. Questo ti indirizzerà alla finestra della console. Sul lato della console, fai clic sulla scheda Fonti e quindi procedi al Breakpoint per gli ascoltatori di eventi. In questo clic sugli eventi del mouse, quindi spunta l'opzione clicca.
Congratulazioni hai impostato il tuo primo punto di interruzione. Ogni volta che esegui il programma, si fermerà all'ascoltatore evento del mouse fare clic sull'evento. Possiamo riprenderlo facendo clic sul pulsante Riprendi nella parte superiore della scheda Source.
Html:
JavaScript:
const btn = documento.getElementById ("Vanish-Btn");Lascia valore = 1;
btn.addEventListener ("click", function ()
btn.InnerHtml = value ++;
)
Utilizzo della parola chiave debugger
È lo stesso di Breakpoint ha spiegato in precedenza, tranne per il fatto che viene fatto tramite il codice JavaScript e non manualmente. Utilizziamo la parola chiave debugger ogni volta che desideriamo debug di un codice. Le parole chiave del debugger fermano sostanzialmente il flusso di esecuzione del codice proprio come un punto di interruzione. Dopo aver interrotto l'esecuzione, chiama la funzione di debug integrato. Questa funzione di debugger funziona allo stesso modo di un punto di interruzione.
Supponiamo di voler aggiungere due variabili. Tuttavia, prima di mostrarli come un avviso, voglio debugrli. Il seguente codice fornirà la soluzione per questo:
Lascia NUM1 = 5;Lascia NUM2 = 10;
debugger;
Avviso (NUM1+NUM2);
La parola chiave debugger forza un punto di interruzione o interrompe l'esecuzione del codice e invoca la funzione di debug. Se è richiesto un debug, viene chiamata la funzione di debugger; Altrimenti, nulla è fatto.
Debug in diversi browser
La pratica comune per iniziare il debug in JavaScript è fare clic su ispezionare o premendo il tasto F12 nel browser. Tuttavia, se non funziona, segui i comandi seguenti per aprire il menu Debugger.
Google Chrome
- Fai clic sul pulsante menu nell'angolo in alto a destra di Google Chrome
- Fai clic su più strumenti
- Fai clic su Strumenti per sviluppatori
- Seleziona console o fonti in base alla tua necessità
Mozilla Firefox
- Quando apri il browser, fare clic sul menu
- Dopodiché fai clic su Web Developer
- Fai clic sulla console Web
Microsoft Edge
- Quando si apri il browser, selezionare gli strumenti per sviluppatori dal menu
- Quindi selezionare Console
musica lirica
- Browser aperto
- Seleziona menu e quindi seleziona lo sviluppatore
- Ora seleziona strumenti per sviluppatori
- Quindi fare clic sulla console
Safari
- Vai al menu principale e fai clic sulle preferenze Safari
- Fai clic sull'opzione avanzata
- Nella barra dei menu, selezionare Abilita Show Sviluppa il menu.
- Quando lo sviluppo viene visualizzato nel menu Fare clic su Mostra Console di errore.
Conclusione
Ci sono molti metodi di debug disponibili in JavaScript. Abbiamo spiegato i metodi più usati/comuni e facili per eseguire il debug del nostro codice JavaScript. Con lo sviluppo in JavaScript dovrai debug ancora e ancora. Ti suggerisco di salvare questo articolo come segnalibro nel tuo browser in modo da non dover cercare ancora e ancora.