Come posso eseguire il debug del mio codice JavaScript? [chiuso]
Risposte:
Firebug è uno degli strumenti più popolari per questo scopo.
Tutti i browser moderni sono dotati di una qualche forma di un'applicazione di debug JavaScript incorporata. I dettagli di questi saranno trattati nelle pagine web delle tecnologie pertinenti. La mia preferenza personale per il debug di JavaScript è Firebug in Firefox. Non sto dicendo che Firebug è migliore di qualsiasi altro; dipende dalle tue preferenze personali e dovresti comunque testare il tuo sito in tutti i browser (la mia prima scelta personale è sempre Firebug).
Tratterò alcune delle soluzioni di alto livello di seguito, utilizzando Firebug come esempio :
Firefox
Firefox viene fornito con il proprio strumento di debug JavaScript integrato, ma ti consiglio di installare il componente aggiuntivo Firebug . Ciò fornisce diverse funzionalità aggiuntive basate sulla versione di base che sono utili. Parlerò solo di Firebug qui.
Una volta installato Firebug, puoi accedervi come di seguito:
Innanzitutto se fai clic con il pulsante destro del mouse su qualsiasi elemento, puoi ispezionare l'elemento con Firebug :
Facendo clic su questo si aprirà il riquadro Firebug nella parte inferiore del browser:
Firebug fornisce diverse funzionalità, ma quella che ci interessa è la scheda script. Facendo clic sulla scheda dello script si apre questa finestra:
Ovviamente, per eseguire il debug è necessario fare clic su ricarica :
È ora possibile aggiungere punti di interruzione facendo clic sulla riga a sinistra della parte di codice JavaScript a cui si desidera aggiungere il punto di interruzione:
Quando il punto di interruzione viene raggiunto, apparirà come di seguito:
Puoi anche aggiungere variabili di controllo e in generale fare tutto ciò che ti aspetteresti da un moderno strumento di debug.
Per ulteriori informazioni sulle varie opzioni offerte in Firebug, consulta le FAQ di Firebug .
Cromo
Chrome ha anche una propria opzione di debug JavaScript integrata, che funziona in modo molto simile, clic con il tasto destro, ispeziona elemento, ecc . Dai un'occhiata agli Strumenti per sviluppatori di Chrome . In genere trovo che le tracce dello stack in Chrome siano migliori di Firebug.
Internet Explorer
Se si sta sviluppando in .NET e si utilizza Visual Studio utilizzando l'ambiente di sviluppo Web, è possibile eseguire il debug del codice JavaScript direttamente inserendo punti di interruzione, ecc. Il codice JavaScript ha lo stesso aspetto del debug del codice C # o VB.NET .
Se non lo hai, Internet Explorer fornisce anche tutti gli strumenti mostrati sopra. Fastidiosamente, invece di avere il tasto destro del mouse per ispezionare le funzionalità degli elementi di Chrome o Firefox, accedi agli strumenti per sviluppatori premendo F12 . Questa domanda copre la maggior parte dei punti.
- Internet Explorer 8 (Strumenti per sviluppatori - F12). Qualsiasi altra cosa è di seconda classe in Internet Explorer
- Firefox e Firebug . Premi F12per visualizzare.
- Safari (Mostra barra dei menu, Preferenze -> Avanzate -> Mostra barra dei menu Sviluppo )
- Console JavaScript di Google Chrome ( F12o ( Ctrl+ Shift+ J)). Per lo più lo stesso browser di Safari, ma Safari è migliore IMHO.
- Opera ( Strumenti -> Avanzate -> Strumenti per sviluppatori )
Esiste una parola chiave del debugger in JavaScript per eseguire il debug del codice JavaScript. Metti debugger; snippet nel codice JavaScript. A quel punto inizierà automaticamente il debug del codice JavaScript.
Per esempio:
Supponiamo che questo sia il tuo file test.js
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- Quando il browser esegue la pagina web nell'opzione sviluppatore con il debugger abilitato, avvia automaticamente il debug dal debugger; punto.
- Dovrebbe essere aperta la finestra dello sviluppatore del browser.
Uso il vecchio buon printfapproccio (un'antica tecnica che funzionerà bene in qualsiasi momento).
Guarda alla magia %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oscarica il contenuto cliccabile, sfogliabile e abbastanza stampato dell'oggetto JS. %sè stato mostrato solo per un record.
E questo:
console.log("%s", new Error().stack);fornisce una traccia dello stack simile a Java fino al punto di new Error()invocazione (incluso il percorso del file e il numero di riga !!).
Entrambi %oe new Error().stackdisponibili in Chrome e Firefox.
Con strumenti così potenti si presume cosa sta andando storto nel proprio JS, si inserisce l'output di debug (non dimenticare l' ifistruzione wrap in per ridurre la quantità di dati) e si verifica la propria ipotesi. Risolvi il problema o fai nuove ipotesi o metti più output di debug nel problema dei bit.
Anche per le tracce dello stack utilizzare:
console.trace();come dire Console
Buon hacking!
Inizia con Firebug e IE Debugger.
Attenzione però ai debugger in JavaScript. Di tanto in tanto influenzeranno l'ambiente quanto basta per causare alcuni degli errori di cui stai tentando di eseguire il debug.
Esempi:
Per Internet Explorer, è generalmente un rallentamento graduale ed è una sorta di affare di tipo di perdita di memoria. Dopo circa mezz'ora devo riavviare. Sembra essere abbastanza regolare.
Per Firebug, probabilmente è passato più di un anno, quindi potrebbe essere stata una versione precedente. Di conseguenza, non ricordo le specifiche, ma fondamentalmente il codice non funzionava correttamente e dopo aver provato a eseguire il debug per un po 'ho disabilitato Firebug e il codice ha funzionato bene.
Sebbene alert(msg);funzioni in quegli scenari "Voglio solo scoprire cosa sta succedendo" ... ogni sviluppatore ha riscontrato quel caso in cui si finisce in un ciclo (molto grande o infinito) da cui non si può uscire.
Consiglierei che durante lo sviluppo se desideri un'opzione di debug molto in-faccia, usa un'opzione di debug che ti consenta di scoppiare. (PS Opera, Safari? E Chrome? Hanno tutti questo disponibile nelle loro finestre di dialogo native)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}Con quanto sopra puoi ottenere te stesso in un ampio ciclo di debug popup, in cui premere Enter/ Okti consente di saltare attraverso ogni messaggio, ma premere Escape/ Cancelti consente di scoppiare bene.
Il mio primo passo è sempre convalidare l'HTML e controllare la sintassi con JSLint . Se hai un markup pulito e un codice JavaScript valido, è il momento di Firebug o un altro debugger.
Visual Studio 2008 ha alcuni ottimi strumenti di debug JavaScript. È possibile rilasciare un punto di interruzione nel codice JavaScript lato client ed eseguirlo utilizzando gli stessi identici strumenti del codice lato server. Non è necessario collegarsi a un processo o eseguire operazioni complicate per abilitarlo.
Uso alcuni strumenti: Fiddler , Firebug e Visual Studio. Ho sentito che Internet Explorer 8 ha un buon debugger integrato.
Ho usato Firebug , fino a quando non è uscito Internet Explorer 8. Non sono un grande fan di Internet Explorer, ma dopo aver trascorso un po 'di tempo con gli strumenti di sviluppo integrati, che includono un debugger davvero carino, sembra inutile usare qualcos'altro. Devo dare la mancia a Microsoft che hanno fatto un lavoro fantastico su questo strumento.
Potresti anche controllare YUI Logger . Tutto quello che devi fare per usarlo è includere un paio di tag nel tuo HTML. È un'utile aggiunta a Firebug, che è più o meno un must.
Oltre a utilizzare il debugger JavaScript di Visual Studio, ho scritto il mio semplice pannello che includo in una pagina. È semplicemente come la finestra immediata di Visual Studio. Posso modificare i valori delle mie variabili, chiamare le mie funzioni e vedere i valori delle variabili. Valuta semplicemente il codice scritto nel campo di testo.
Oltre a Firebug e alle estensioni per sviluppatori native del browser, JetBrains WebStorm IDE viene fornito con il supporto per il debug remoto per Firefox e Chrome (estensione richiesta) integrato.
Supporta anche:
- coffescript: come eseguire il debug di coffeescript in node.js con le mappe sorgente di webstorm 6
- node.js
Le opzioni per testarlo gratuitamente sono la prova 30 o l'utilizzo di una versione ad accesso anticipato .
Se stai usando Visual Studio , metti debugger;sopra il codice di cui vuoi eseguire il debug. Durante l'esecuzione, il controllo si fermerà in quel punto e da lì in poi potrai eseguire il debug passo dopo passo.
Come con la maggior parte delle risposte, dipende davvero: cosa stai cercando di ottenere con il tuo debug? Sviluppo di base, risoluzione dei problemi di prestazioni? Per lo sviluppo di base, tutte le risposte precedenti sono più che adeguate.
Per i test delle prestazioni in particolare, consiglio Firebug. Essere in grado di definire quali metodi sono i più costosi in termini di tempo è stato prezioso per una serie di progetti su cui ho lavorato. Man mano che le librerie lato client diventano sempre più robuste e più responsabilità viene assegnata al lato client in generale, questo tipo di debug e profilazione diventerà solo più utile.
API Firebug Console: http://getfirebug.com/console.html
PremendoF12 gli sviluppatori web è possibile eseguire rapidamente il debug del codice JavaScript senza lasciare il browser. È integrato in ogni installazione di Windows.
In Internet Explorer 11 , gli strumenti F12 forniscono strumenti di debug come punti di interruzione, controllo e visualizzazione di variabili locali e una console per i messaggi e l'esecuzione immediata del codice.