Come risolvere un JavaScript che non risponde

July 5

La scrittura di codice JavaScript per le pagine Web può essere un'esperienza frustrante per i programmatori perché l'ambiente di runtime, il browser Web, non viene normalmente utilizzato per le attività di debug come impostazione punti di interruzione e l'esecuzione riga per riga. I programmatori spesso ricorrere all'utilizzo di finestre di dialogo di avviso goffi di tracciare l'esecuzione dei loro script. Tuttavia, Internet Explorer 9 include un set completo di funzionalità che facilita tecniche di debug efficienti nell'ambiente browser stesso.

istruzione

1 Caricare una pagina Web in Internet Explorer e premere "F12" per rivelare gli strumenti di debug. Gli strumenti appaiono in un pannello lungo la parte inferiore della finestra. Fare clic sulla scheda "Script" per rivelare le funzionalità di debug JavaScript. Il tuo codice viene visualizzato sul lato sinistro e vari strumenti di debug sono disponibili sulla destra.

2 Traccia l'esecuzione del vostro script con l'aggiunta di istruzioni per il codice per scrivere al console JavaScript utilizzando la seguente sintassi:

window.console.log ( "script è eseguito a questo punto");

Questo è un buon sostituto per le finestre di dialogo di avviso, perché lo script non ha bisogno di aspettare per voi per confermare tutte le finestre prima di continuare. È possibile aggiungere ulteriori informazioni a queste affermazioni mediante concatenazione della stringa, così come con le finestre di dialogo di avviso. Per esempio:

window.console.log ( "Per ciclo ha raggiunto iterazione" + i + "\ nCurrent valore della somma è" + sum);

Quando lo script viene eseguito sulla pagina, fare clic sulla scheda "Console" sul lato destro del pannello di debug per visualizzare i messaggi di debug generati in questo modo.

3 Impostare un punto di interruzione nello script per fermare la sua esecuzione su una determinata linea, fare clic sul numero di riga nella visualizzazione del codice sul lato sinistro del pannello strumenti di debug. Un puntino rosso appare per indicare il punto di interruzione. Fare clic di nuovo per rimuoverlo. È possibile impostare i punti di interruzione come molte linee che vuoi. Fare clic sulla scheda "Punti di interruzione" sul lato destro degli strumenti di debug per visualizzare tutti i punti di interruzione insieme e disabilitare o cancellarli.

4 Fare clic sul pulsante "Start Debugging" per ricaricare la pagina e attivare il punto di interruzione (s). Il pannello di debug si separa in una finestra separata in modo da poter visualizzare il codice migliore. Quando si raggiunge un punto di interruzione, lo script si ferma, la finestra di debug viene portata in primo piano e una freccia gialla appare all'interno del punto rosso per indicare il punto di interruzione.

5 Riprendere l'esecuzione da un punto di interruzione facendo clic sul pulsante verde "Continua" o premendo il tasto "F5". Passo attraverso il codice riga per riga premendo "F11". Scavalcare un blocco di codice premendo il tasto "F10" e uscire da un blocco di codice premendo il tasto "Shift + F11." È necessario riprendere l'esecuzione (o fare clic su "Termina debug") prima di interagire con la pagina per eseguire ulteriori script.

6 Monitorare i valori delle variabili utilizzando il "Watch" e le schede "locali" sul lato destro degli strumenti di debug. Fai clic su "Watch", fare clic su una riga vuota nell'elenco e digitare il nome della variabile. Come si esegue lo script, il valore di questa variabile viene aggiornata nella lista. Utilizzare i punti di interruzione e / o esecuzione linea per linea per vedere il cambiamento variabile durante l'esecuzione. Rivela ulteriori informazioni sulla variabile cliccando il simbolo "+". Fare clic sulla scheda "locali" per mostrare i nomi ei valori correnti di tutte le variabili rilevanti alla funzione in corso di esecuzione.

7 Fare clic sulla scheda "Call Stack" per mostrare la gerarchia di funzioni e metodi che sono stati invocati per raggiungere il punto in corso di esecuzione. Questo può aiutare a identificare non solo dove si è in esecuzione dello script, ma come ci siete arrivati. Fare doppio clic su una delle voci in questo elenco per mostrare la riga di codice che ha chiamato quella funzione o il metodo.