In questo articolo, spiegheremo come eseguire il debug di JavaScript usando DevTools in Chrome passo per passo. Se vuoi eseguire il debug del tuo codice JavaScript in Chrome, devi seguire questi passaggi come indicato di seguito.

Panoramica del progetto

Dimostrerò un esempio di come eseguire il debug del codice JavaScript all'interno di Chrome. In questo passaggio, ho intenzione di dare una descrizione di base del codice. Questo progetto riguarda il funzionamento del modulo di calcolo tra due numeri. Questo esempio ti consente di passare rispettivamente il valore del dividendo e del divisore. Successivamente, facendo clic sul pulsante di calcolo, ci vorrà un minuto per calcolare la mod tra due numeri e ti darà l'output. La sintassi dell'operazione modulo è la seguente:

x mod y = r

Dove x = dividendo, y = divisor e r = resto

Ci sono due file in questo progetto, .html e .file js. Il file JavaScript contiene 5 funzioni per calcolare la mod di due numeri:

1. Click Handler: Fornisce un messaggio di avviso se uno o entrambi i campi di input sono vuoti
2. Gli ingressi sono vuoti (): Questa funzione viene utilizzata per verificare se i campi di input sono vuoti o meno
3. updateLabel (): Questa funzione viene utilizzata per calcolare la mod di due numeri
4. getNumber1 (): Usato per ottenere il valore del primo numero
5. getNumber2 (): Usato per ottenere il valore del secondo numero

Il codice JavaScript è illustrato di seguito:

funzione onClick ()
if (inputSareempty ())
etichetta.TextContent = 'Avviso: devi inserire i numeri in entrambi i campi.';
ritorno;

updateLabel ();

Funzione InputSareEmpty ()
if (getNum1 () === "|| getNum2 () ===")
restituire vero;
altro
restituire false;


funzione updateLabel ()
var value1 = getNum1 ();
var value2 = getNum2 ();
var mod = "value1" % "value2"
etichetta.textContent = value1 + ' %' + value2 + '=' + mod;

funzione getnum1 ()
restituire input [0].valore;

funzione getnum2 ()
Ingni di ritorno [1].valore;

Il codice file HTML è illustrato di seguito:

Calcola la mod tra due numeri

Immettere il valore del dividendo

Immettere il valore del divisore

Calcola mod (%)

Output del progetto:

Rilevamento di bug

La parte triste è ogni volta che eseguiremo questo codice, ti mostrerebbe alcuni bug per. Come puoi osservare chiaramente nell'esempio seguente, quando inseriamo i valori, l'uscita non è definita anziché un risultato effettivo. Quindi, ora dobbiamo rilevare la causa originale del bug che viene spiegata brevemente nello stesso articolo in seguito.

Esempio

In questo esempio, passeremo i valori che forniscono l'output non definito come mostrato nell'immagine seguente.

Quindi, ora dobbiamo correggere questo bug rapidamente. In questo passaggio, il nostro obiettivo principale è rilevare la fonte di bug. Per un rapido rilevamento del bug, è necessario eseguire il debug del codice JavaScript in Chrome.

Per questo, è necessario eseguire l'applicazione su Chrome, quindi è necessario aprire DevTool premendo i tasti brevi Ctrl+shift+i. Dopo aver aperto il DevTool, potrai vedere lo schermo mostrato di seguito. Oltre a molte attività eseguite da DevTool, può anche monitorare le richieste, cambiare CSS.

Panoramica degli strumenti degli sviluppatori

Puoi eseguire il debug del codice JavaScript nella scheda Pannello di origine. Ha 3 parti come mostrato di seguito:

1. File Navigator Pagina: Le richieste di ogni file possono essere elencate in questa scheda.
2. Editor di codice: Visualizza i contenuti del file
3. Riquadro di debug JavaScript: Usato per ispezionare JavaScript

Debug del codice

Il modo più semplice per eseguire il debug di un bug nel tuo codice è che devi inserire il console.tronco d'albero() funzione all'interno del codice per ispezionare i valori contemporaneamente.

funzione updateLabel ()
var value1 = getNum1 ();
console.log ('valore1:', valore1);
var value2 = getNum2 ();
console.log ('valore2:', valore2);
var mod = parseint (value1) % parseint (valore2);
console.log ('risultato:', mod);
etichetta.textContent = value1 + ' %' + value2 + '=' + mod;

sebbene il console.tronco d'albero() La funzione può essere una buona opzione per rilevare i bug ma i punti di interruzione potrebbero essere un'opzione più efficace in quanto consente di mettere in pausa il codice durante la sua esecuzione e analizzare il valore corrispondente. Inoltre, un punto di interruzione è meglio della console.log () perché lavorare con la console.log () è necessario osservare molti passaggi che devono essere eseguiti manualmente per visualizzare i valori nella finestra della console mentre i punti di interruzione rendono più semplice lavorando direttamente.

Inserimento di punti di interruzione nel codice

Nel caso in cui torni e dai un'occhiata alla funzionalità dell'applicazione, saprai che il risultato dell'operazione modulo sembra essere errato dopo aver fatto clic sul "pulsante di calcolo". Pertanto, dovrai mettere un punto di interruzione prima dell'evento click.

I punti di interruzione dell'ascoltatore di eventi ti aiutano a trovare l'evento specifico che si desidera cessare ampliando il gruppo corrispondente come mostrato di seguito. Poiché l'immagine mostra chiaramente che controllando il clickbox interromperà l'esecuzione ovunque sia presente l'evento di ascolto clic.

Entra nel tuo codice

L'immagine sotto illustra che se si desidera interrompere l'esecuzione di una riga specifica E.G. Diciamo la riga 21, quindi faremo clic su di essa e osserveremo un marcatore blu su quella riga specifica che assicura che l'esecuzione si fermerà automaticamente quando raggiunge la riga 21.

Rilevare la causa di un bug

Mentre mettiamo un punto di interruzione sulla riga 21, il che significa che il codice fa sempre una pausa ogni volta che l'esecuzione del codice raggiunge quella riga. Quando il codice viene messo in pausa su una determinata riga, il pannello di portata specifica le variabili locali e globali.

Come vedi nell'immagine qui sotto, entrambi i valori non sono numeri interi. Sono chiusi tra virgolette come vedi nell'immagine qui sotto e il valore mod sembra anche sospetto. Infine, viene rilevata la fonte del bug.

Fissaggio di bug

Ora puoi modificare il codice e testarlo di nuovo. Fare clic sull'icona di ripresa come mostrato a destra della schermata della finestra. Ora sostituisci la riga 20 con la riga menzionata di seguito e salva le modifiche.

var mod = parseint (value1) % parseint (valore2);

Quindi disattivare i punti di interruzione e testare il codice con valori diversi per verificare i risultati corretti.

L'output del 24%9 è la seguente:

L'output del 5%3 è la seguente:

Conclusione

JavaScript è la lingua più popolare e il suo bisogno è di giorno in aumento. Quasi ovunque viene utilizzato JavaScript. In questo articolo, abbiamo spiegato il debug del codice JavaScript in Chrome. Successivamente, abbiamo discusso di ogni passaggio in profondità. Le immagini di esempio sono fornite anche per ogni passaggio per aiutarti a capire.