È possibile eseguire il debug del caricamento dinamico di JavaScript da alcuni debugger come WebKit, FireBug o IE8 Developer Tool?


90

Dalla mia recente domanda , ho già creato alcune funzioni JavaScript per la visualizzazione parziale del caricamento dinamico. Quindi, non posso eseguire il debug di alcun JavaScript di caricamento dinamico. Perché tutto il JavaScript caricato verrà valutato dalla funzione "eval".

Tuttavia, ho trovato un modo per creare un nuovo JavaScript utilizzando il seguente script per creare dinamicamente lo script nell'intestazione del documento corrente. Tutti gli script caricati verranno visualizzati in HTML DOM (che puoi utilizzare qualsiasi debugger per trovarlo).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

A proposito, la maggior parte dei debugger (IE8 Developer Toolbar, Firebug e Google Chrome) non può impostare il punto di interruzione in nessuno script dinamico. Perché lo script debuggabile deve essere caricato la prima volta dopo il caricamento della pagina.

Hai un'idea per il debug nel contenuto o nel file di script dinamici?

Aggiornamento 1: aggiungi codice sorgente per il test

È possibile utilizzare il seguente file xhtml per provare a eseguire il debug di un valore variabile.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Dalla risposta, lo provo solo in FireBug. Il risultato dovrebbe essere visualizzato come sotto le immagini.

testo alternativo http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvahtweb

Guarda lo script "dynamicLoadingScript" aggiunto dopo il caricamento della pagina.

testo alternativo http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqugyugh41/

Ma non si trova nella scheda script di FireBug

Aggiornamento 2: creazione di un punto di interruzione di debug nello script di caricamento dinamico

testo alternativo http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAwiPo4Qugger

testo alternativo http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl- Chebrome

Entrambe le immagini sopra mostrano l'inserimento di "debugger"; l'istruzione in una riga di script può generare un punto di interruzione nello script di caricamento dinamico. Tuttavia, entrambi i debugger non mostrano alcun codice al punto di interruzione. Pertanto, è inutile per farlo.

Grazie,


Ti è capitato di trovare una soluzione per questo? Sono qui con lo stesso problema.
adamJLev

Prova a caricare dinamicamente un file separato, ad esempio vedi qui per un'implementazione queryj.com/2011/03/11/a-lightweight-script-loader - Trovo che i debugger gestiscano questo molto più facilmente.
James Westgate

@infinity, controlla la mia soluzione
Molecular Man

3
2014 e le tue immagini sono ancora morte. Puoi riprodurle?
TheGeekZn

Ho una domanda simile ma non posso dirlo perché le immagini sono rotte. Puoi aggiornarli?
Eric

Risposte:


117

Sarebbe anche possibile utilizzare chrome per lo stesso. Chrome ha una funzione in cui puoi specificare un attributo del parser e far apparire il pezzo di JS dinamico come un file che può quindi essere sfogliato e impostare punti di interruzione.

l'attributo che deve essere impostato è

//# sourceURL=dynamicScript.js

dove dynamicScript.js è il nome del file che dovrebbe essere visualizzato nel browser dei file di script.

Maggiori informazioni qui

Paul Irish ne parla anche brevemente nel suo eccellente intervento su Tooling & The Webapp Development Stack


5
Nel caso in cui qualcuno abbia problemi con MVC3 / Razor, ricorda di evitare il simbolo @, quindi qualcosa come // @@ sourceURL = dynamicscript.js E solo per caso, quanto sopra funziona anche in Firebug.
parsh

1
È possibile utilizzare questa funzionalità anche per javascript in linea dinamici. Ma, se hai qualche eccezione in quello script, non la vedrai nell'elenco delle fonti.
Roman Snitko

4
Nota che la nuova sintassi è "// # sourceURL = dynamicScript.js" cambia da @ a #
Cekk

3
il collegamento aggiornato alla sezione degli strumenti per sviluppatori di Chrome sulle mappe di origine è - developer.chrome.com/devtools/docs/…
chrismarx

3
Per me, il file js veniva visualizzato nell'elenco delle fonti all'interno di un gruppo chiamato "(nessun dominio)". Potrebbe valere la pena menzionarlo perché all'inizio l'ho perso!
JMac

21

Prova ad aggiungere un "debugger;" dichiarazione nel javascript che stai aggiungendo dinamicamente. Ciò dovrebbe causare l'arresto su quella riga indipendentemente dalle impostazioni del punto di interruzione.


Tutto quello che riesco a trovare è questo: code.google.com/p/fbug/issues/detail?id=1259 . A proposito, utilizzo il tag di script che si aggiunge alla testina per caricare dinamicamente gli script (ma utilizzando un attributo src) e il codice aggiunto in questo modo è debuggabile per me su tutti i browser, anche se non viene caricato insieme alla pagina iniziale.
Joeri Sebrechts

Qual è il codice esatto che stai utilizzando per aggiungere il tag script? Sto riscontrando lo stesso problema dell'OP, che rende impossibile eseguire il debug dei file JS caricati dinamicamente in Chrome. Grazie!
adamJLev

var loaderNode = document.createElement ("script"); loaderNode.setAttribute ("type", "text / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("head") [0] .appendChild (loaderNode);
Joeri Sebrechts

18

Sì, è (ora) possibile eseguire il debug di JavaScript caricato dinamicamente utilizzando Google Chrome!

Non è necessario aggiungere altro debugger;o qualsiasi altro attributo per il file JS caricato dinamicamente. Segui i passaggi seguenti per eseguire il debug:

Metodo 1:

Il mio responsabile tecnico ha appena mostrato un modo semplicissimo per eseguire il debug dei metodi Javascript caricati dinamicamente.

  1. Apri Console di Chrome e scrivi il nome del metodo e premi invio.
    Nel mio caso, è GetAdvancedSearchConditonRowNew
    Se il metodo JS è stato caricato, mostrerà la definizione del metodo.

inserisci qui la descrizione dell'immagine


  1. Fare clic sulla definizione del metodo e l'intero file JS verrà aperto per il debug :)

inserisci qui la descrizione dell'immagine


Metodo 2:

Ad esempio, sto caricando il file JS quando faccio clic su un pulsante utilizzando ajaxcall.

  1. Apri la networkscheda negli strumenti di sviluppo di Google Chrome
  2. Fare clic su un controllo (es. Pulsante) che carica un file javascript e chiama alcune funzioni javascript.
  3. osserva la scheda di rete e cerca quella funzione JS (nel mio caso lo è RetrieveAllTags?_=1451974716935)
  4. Passa il mouse sopra di esso initiatere troverai il tuo file JS caricato dinamicamente (con prefisso VM*).

eseguire il debug del caricamento dinamico JavaScript in chrome -1


  1. Fare clic su quel VM*file per aprirlo.
  2. Metti il ​​debugger dove vuoi in quel file: D

eseguire il debug del caricamento dinamico JavaScript in chrome -1



Peccato per Google per averlo reso così ottuso. 1 / Vergogna = Complimenti (l'inverso della vergogna) a te per averlo tirato fuori :)
Toddmo

16

Sto usando Google Chrome per questo scopo.

Nella scheda degli script di Chrome puoi abilitare la "pausa su tutte le eccezioni"

inserisci qui la descrizione dell'immagine

E poi inserisci da qualche parte nella tua riga di codice try{throw ''} catch(e){}. Chrome interromperà l'esecuzione quando raggiunge questa riga.

EDIT: immagine modificata in modo che sia più chiaro di cosa sto parlando.


Per lo sviluppo in Google Chrome, è necessario inserire del testo che indichi il nome dello script dinamico corrente quando jQuery o qualsiasi altro script di caricamento aggiunge script a DOM come ho segnalato al team di jQuery. Ma non ho tempo per lavorarci. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master, ma usando il mio metodo non è necessario inserire testo. Si inserisce nella riga dello script dinamico, try{throw ''} catch(e){}quindi si abilita la modalità "Pausa su tutte le eccezioni" e Chrome interromperà l'esecuzione quando viene generata l'eccezione. L'ho controllato molte volte. Ho caricato un'altra immagine. È più chiaro di cosa sto parlando.
Molecular Man

In Chrome, puoi utilizzare l'istruzione "debugger;" per interrompere un'istruzione quando il pannello del debugger è aperto. Chrome lo ignorerà semplicemente se il pannello del debugger è chiuso.
dinesh ygv

@dineshygv, puoi ... ora. Ma non potevi 3 anni fa. debuggerallora non funzionava in uno script creato dinamicamente.
Molecular Man

10

Penso che potresti dover dare al codice eval'd un "nome" come questo:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Se lo fai, penso che probabilmente l' debuggerapproccio da "aggiornamento 2" dovrebbe funzionare allora.


Sì. Lo vedo. Ho già segnalato questo bug al team jQuery da molto tempo. bugs.jquery.com/ticket/8292
Soul_Master

1
Avvertimento! la tecnica descritta causa un errore in IE7, quindi non lasciare il file //@ sourceURL=blahin produzione.
Jethro Larson

probabilmente è la debuggerparte che causa problemi, non il commento della fonte (che è sicuramente ignorato da JS)
Kyle Simpson

Può causare problemi con la compilazione condizionale. ad esempio: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson

5

AGGIORNAMENTO : la sintassi per sourceUrl è stata modificata (@ è sostituito da #) per evitare errori su browser non supportati (leggi: IE). Dettagli


2

Utilizzo di Chrome (12.0.742.112) con il codice fornito più un'istruzione del debugger come questa

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

per me va bene.

Ho bisogno di modificare un po 'di JavaScript (limitando l'ambito di tutti i selettori jQuery all'attuale partial> view div) prima di eseguirlo.

Può essere più tangibile se leghi la modifica del selettore a un evento nella tua vista parziale invece di creare elementi di script nel corpo html (non sembra giusto).

Potresti fare qualcosa del genere

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Questo codice aggiungerebbe sempre un selettore di limitazione a tutte le operazioni di selezione di jQuery eseguite mentre il mouse si trova in un certo elemento dato che l'HTML non è incasinato.

(Sembra ancora un hacker, potrebbe essere che qualcuno abbia una soluzione migliore)

Saluti


1

In Firebug, dovresti essere in grado di vedere quello script dopo che la pagina è stata caricata e lo script è stato inserito. Quando lo fai, puoi impostare un punto di interruzione nella posizione appropriata e verrà conservato quando aggiorni la pagina.


Hai ragione. Non funziona. L'ho provato con eval () e Firebug ti consente di impostare un punto di interruzione quando lo usi. C'è un motivo per cui non puoi usare eval () e devi impostare un tag script? Ancora più in generale, c'è una ragione per cui non puoi servire questo javascript dinamico come file .js separato sul tuo server? Che problema stai cercando di risolvere?
Moishe Lettvin,

Devo modificare alcuni JavaScript (limitando l'ambito di tutti i selettori jQuery all'attuale div vista parziale) prima di eseguirlo. O hai qualche idea per risolvere la mia recente domanda. Per ulteriori informazioni, guarda la mia recente domanda.
Soul_Master

1

Javascript caricato in modo dinamico deve ancora essere analizzato dal browser, qui è dove si trova il debugger di WebKit o FireBug, quindi è soggetto al debugger, non importa cosa, penso che sia lo stesso per gli strumenti di sviluppo in IE8,

Quindi il tuo codice è soggetto al debugger, quindi dove stai riscontrando un problema non sarà in quel file o testo se non si verifica un errore

L'altra cosa è che script.text = "alert('Test!');";non è valido quindi non funzionerà in tutti i browser quello che vuoiscript.innerHTML = "alert('Test!');";

anche se il suo HTML interno significa codice all'interno dei tag HTML non l'HTML all'interno solo la maggior parte delle persone lo usa per questo quindi viene spiegato in modo sbagliato

MODIFICATO PER L'AGGIORNAMENTO DUE

E al secondo aggiornamento utilizzando Chrome l'ho fatto

vai a about: blank Apri la console e incolla

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

quindi si interromperà e aprirà la scheda dello script con about: blank mostrato (niente da vedere)

Quindi sul lato destro mostra l'elenco dello stack di chiamate, quindi fai clic sulla seconda (funzione anonima) e te lo mostrerà.

Quindi sul tuo file avrai una (funzione anonima) che è il codice che stai eseguendo e vedrai il punto di interruzione lì dentro. quindi sai di essere in quello giusto.


0

Utilizzando lo strumento per sviluppatori di Google Chrome (o Safari ), puoi eseguire JavaScript riga per riga. Script degli

strumenti per sviluppatori Scegli quale script vuoi eseguire il debug del segno di pausa sul lato destro Oppure imposta i punti di interruzione facendo clic sul numero di riga>>>


0

Un'opzione che mi piace usarla aggiungendo un'istruzione console.log ('') nel mio codice. Quando questa istruzione viene visualizzata nella console, viene associato un numero di riga. È possibile fare clic su quel numero per andare alla posizione nell'origine e impostare un punto di interruzione. Lo svantaggio di questo approccio è che i punti di interruzione non vengono conservati durante i ricaricamenti delle pagine e devi eseguire il codice prima di poter aggiungere un debugger.


0

Per l'attuale browser Google Chrome o altri browser moderni, puoi facilmente cercare qualsiasi codice valutato con strumenti per sviluppatori come le immagini seguenti.

  1. Simula un file di caricamento dinamico.

inserisci qui la descrizione dell'immagine

  1. Premi Ctrl + Maiusc + F nella scheda sorgente e cerca la funzione sopra.

inserisci qui la descrizione dell'immagine

Crea un punto di interruzione ed esegui la funzione per testarlo.

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.