Debug di file javascript aggiunti dinamicamente

Question

Ho un'applicazione web che aggiunge dinamicamente file javascript in base a ciò che l'utente sceglie come opzioni usando ajax in tempo reale per evitare di aggiornare lo schermo.

Ora sto provando a eseguire il debug di questi file javascript aggiunti in modo dinamico e ho provato sia gli strumenti di sviluppo di Google Chrome e il pluggin di Firebug per Firefox, e ho notato che i "file" javascript aggiunti dinamicamente non appaiono, quindi non posso selezionare per aggiungere punti di interruzione ecc.

Quindi, esiste una soluzione per questo, ovvero il debug di file javascript aggiunti dinamicamente?

Answer 1

È possibile aggiungere l'istruzione debugger; negli script dinamici in cui si desidera impostare il punto di interruzione. Ciò farà sì che chrome si fermi su di esso come un punto di interruzione regolare se il thread di esecuzione raggiunge la dichiarazione mentre l'interfaccia utente degli strumenti di sviluppo viene aperta.

Puoi anche iniziare il tuo script con quello, così il tuo script apparirà nel debugger, e dopo potrai impostare manualmente un breakpoint dove vuoi.

Answer 2

Verificare sourceURL che è un modo per indicare al DevTools che deve trattare le stringhe evalive come file reali. Fa esattamente quello che stai cercando.

Alla fine della stringa da EVALED, lasciare un commento di questa forma:

//# sourceURL=app/js/myapp.js 

Da lì, Chrome DevTools (e Firebug) trattano l'evento come un "file vero e proprio".

Much more explanation here e HTML5 Rocks ha an article e uno sourceURL demo.