Eseguire Il Debug Di Javascript Chrome

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo 04.11.2021

Anche per i professionisti, la codifica non è facile. Questo è probabilmente il motivo per cui gli sviluppatori passano gran parte del loro tempo a cercare bug nel loro codice. A volte un bug è ovvio, causando l’interruzione dell’intero programma in una volta. Altre volte un bug è molto sottile, producendo un output dall’aspetto corretto che tuttavia contiene dei difetti.

Per quanto possa sembrare controintuitivo, i bug evidenti sono migliori perché sono più facili da trovare. Un bug subdolo può annidarsi per anni nel software utilizzato tutti i giorni.

Pensalo in questo modo: se ti trovassi in un edificio che si stava lentamente riempiendo di gas velenoso, vorresti che il gas essere inodore, insapore e incolore, o viola brillante e odorare di polvere da sparo?

Perché il debug è un passaggio cruciale in il processo di sviluppo, esistono molti strumenti per farlo. Oggi parleremo del debug di Javascript in Chrome. Javascript è di gran lunga uno dei linguaggi complessivi più popolari e probabilmente il linguaggio più popolare per lo sviluppo web. Allo stesso modo, Chrome è uno dei browser Web più utilizzati.

Come qualcuno che sarà presto un in-demand sviluppatore web, è una buona idea avere familiarità con il debug di Javascript con Chrome. Ti incoraggio a seguire questa elegante pagina web di esempio creato appositamente per esercitarsi con il debug.

Utilizzo del pannello Sorgente

< /figure>

Chrome è dotato di una serie di potenti strumenti che consentono agli sviluppatori di ispezionare il codice sorgente di un sito Web, inclusi HTML, CSS e Javascript.

Questo è un fantastico modo per leggere il codice dei siti web che ti piacciono e per imparare a eseguirne il debug.

Guardarsi intorno

A partire da 2019 e la versione più recente di Chrome, accedere agli strumenti per sviluppatori è semplice come andare su Visualizza -> Sviluppatore -> Strumenti per sviluppatori nel menu del browser nella parte superiore dello schermo. Questo apre il pannello per sviluppatori di Chrome con le sue numerose schede utili.

La scheda ‚ÄòElementi‚Äô ti consente di esaminare l’HTML e Javascript che compongono la pagina Web. La scheda ‚ÄòConsole‚Äô ti offre uno spazio per armeggiare con Javascript. Apri la console per la pagina di esempio collegata nella sezione precedente e digita console.log(‚Äòciao‚Äô). Questo comando Javascript dovrebbe essere eseguito nel browser.

La scheda ‘Sorgenti’ ti mostra il contenuto effettivo dei file di origine della pagina e ti offre un modo per impostare punti di interruzione e ispezionare lo stack di chiamate.

Punti di interruzione e debugger;

Insieme alle istruzioni di stampa, i punti di interruzione sono una delle tecniche di base utilizzate dagli sviluppatori per il debug.

L’impostazione di un punto di interruzione nella console di Chrome è semplice: basta fare clic sul numero di riga che ti interessa Un punto di interruzione è un luogo w qui il codice si interrompe automaticamente nella sua esecuzione. Ciò ti consente di ispezionare tutto ciò che è successo fino a questo punto, incluse cose come il valore corrente di ogni variabile e tutte le trasformazioni che hanno avuto luogo.

I breakpoint sono un ottimo modo per controllare lo stato di avanzamento del codice per vedere se qualcosa è andato storto.

Possiamo ottenere manualmente lo stesso effetto posizionando il debugger; nel nostro codice ovunque vogliamo iniziare il processo di debug.

Impostando più punti di interruzione possiamo ottenere una vista ravvicinata di tutto ciò che sta facendo il nostro codice, il che rende molto più facile individuare errori.

Anche se questo non è certamente tutto ciò di cui hai bisogno per padroneggiare l’arte del debug, è un bel vantaggio. La maggior parte della corretta correzione del codice si riduce a pensare molto pazientemente e molto chiaramente a ciò che volevi fare con il tuo codice e confrontarlo con ciò che effettivamente hai detto al tuo codice di fare. ;

Con le informazioni di cui sopra, sei sulla buona strada per eseguire il debug di Javascript con Chrome.