Come impostare i punti di interruzione in Javascript in linea in Google Chrome?

211

Quando apro gli Strumenti per gli sviluppatori in Google Chrome, vedo tutti i tipi di funzionalità come Profili, Timeline e Audit, ma mancano funzionalità di base come la possibilità di impostare punti di interruzione sia nei file js che nei codici html e javascript! Ho provato ad usare la console javascript, che di per sé è difettosa - ad esempio, una volta rilevato un errore JS, non riesco a uscirne se non aggiorno l'intera pagina. Qualcuno può aiutare?

javascript debugging google-chrome

— asso
fonte

Ho rinunciato a Chrome. Ho provato con Firefox e ho avuto il mio breakpoint in pochi secondi. Potrebbe essere possibile con Chrome ma non è certo ovvio come!

— Oliver P

127

Utilizza la scheda Sorgenti, puoi impostare punti di interruzione in JavaScript lì. Nella struttura della directory sottostante (con la freccia su e giù), è possibile selezionare il file di cui si desidera eseguire il debug. È possibile uscire da un errore premendo riprendi sul lato destro della stessa scheda.

— Rian Schmits
fonte

31

Per qualche motivo vedo l'elenco dei file js inclusi, ma non riesco a scegliere la pagina di esecuzione stessa, non viene visualizzata nell'elenco. Qualche idea?

— ulu,

67

@ulu, ho avuto lo stesso problema. Assicurati che l'attributo type = "text / javascript" sia impostato sul tuo elemento <script>.

— contactmatt

9

tranne che in HTML5 questo attributo non è più obbligatorio. Non sto cambiando il codice sorgente solo per il debug!

— sashok_bg

10

Non vedo nemmeno dopo aver aggiunto type = "text / javascript"

— Nitin Kumar Mishra

3

se questo non funziona e hai un codice javascript incorporato come: <script> your code </script>aggiungi un nome come: <script> your code //# sourceURL=somename.js </script> Questo è spiegato meglio in una risposta di seguito

— KM.

209

Stai parlando di codice all'interno dei <script>tag o degli attributi dei tag HTML, come questo?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

In entrambi i casi, la debuggerparola chiave in questo modo funzionerà:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

NB Chrome non si interrompe su debuggers se gli strumenti di sviluppo non sono aperti.

È inoltre possibile impostare punti di interruzione delle proprietà nei file e <script>tag JS :

Fai clic sulle fonti scheda
Fai clic sull'icona Mostra navigatore e seleziona un file
Fare doppio clic sul numero di una riga nel margine sinistro. Una riga corrispondente viene aggiunta al pannello Punti di interruzione (4).

inserisci qui la descrizione dell'immagine

— Matt Ball
fonte

4

Non esiste una scheda Script. Vedo tutte le altre schede presenti in questa immagine ma nessuna scheda Script!

— asso

5

Voglio dire essere in grado di impostare il punto di interruzione all'interno del tag script in HTML. Ho anche provato a utilizzare il debugger; parola chiave ma non funziona. Chrome non si rompe su questo, ma funziona in Firefox. Sto cercando una soluzione breakpoint non basata sulla parola chiave debugger che è scomoda da inserire in molti posti nel codice e quindi dover eliminare.

— asso

2

Nel menu a discesa sotto la scheda Script vedo solo i file JS elencati, ma non i file HTML che contengono il tag <script> di cui voglio eseguire il debug. Firebug su FF ha un menu a discesa simile, ma elenca anche i file HTML che contengono tag <script>. È un bug o esiste un altro modo per impostare un punto di interruzione nel codice JS inline?

— Wolfram Arnold

8

La scheda viene chiamata Sourcesanziché Scriptsora.

— CoderDennis,

1

Quando ho provato a eseguire il debug del mio html embedded js, ho ottenuto una pagina vuota nella mia area di sviluppo. Ho dovuto aggiornare mentre guardavo il file sorgente vuoto per farlo popolare.

— HappyCoder86,

73

Puoi anche dare un nome al tuo script:

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse sostituisce "somename" con un nome;) e poi lo vedrai nel debugger di Chrome in "Sorgenti> inizio> (nessun dominio)> somename.js" come uno script normale e sarai in grado di eseguire il debug come altri script

— buildhome.eu
fonte

3

modo più semplice e perfetto per andare. ma nota per gli altri, ricordati di rimuoverlo prima di portarlo in produzione.

— Zameer Fouzan,

2

Oh mio Dio, non hai idea di quanto mi abbia aiutato. Oh mio Dio, questo è geniale. Ho cercato qualcosa di simile per anni.

— GregRos,

Ho usato questa (bella) idea, ma non sono riuscito a vedere il nuovo file nella scheda delle fonti, solo il file html. Quindi ho eseguito il codice e, alla fine, nella console, a destra di qualsiasi messaggio scritto dallo script, puoi vedere un link al codice. La parte migliore è che il link mostra il nome del file che hai dato allo script (es. // # sourceURL = somename.js).

— Manuel Rivera,

1

Vorrei darti 1000 voti se potessi;) Trucco molto utile

— Giulio Quaresima il

43

Aggiorna la pagina contenente lo script mentre gli strumenti di sviluppo sono aperti nella scheda script. Ciò aggiungerà una voce (programma) nell'elenco dei file che mostra l'html della pagina incluso lo script. Da qui è possibile aggiungere punti di interruzione.

— Gruff Bunny
fonte

Questo non ha funzionato per me. Invece, ho fatto clic sull'icona di un errore di script in basso a destra per aprire il file di programma nella scheda script.

— sanbikinoraion,

1

Grazie! Utilizzando Chrome 69, ha funzionato anche se non ero nella scheda Sorgenti. Avere gli strumenti di sviluppo aperti mentre la pagina caricata sembra essere la chiave.

— Sam

Questa sarebbe stata la risposta accettata se questa fosse la mia domanda. Grazie.

— PlumpNation

Ha funzionato in Chrome 83. Nel mio ambiente, il nome file si basa sull'URL della tua app. Ad esempio, se l'URL è example.com/xxx/yyy, il nome file sarà "yyy".

— Helix Quar,

18

Un altro semplice trucco intuitivo per il debug, in particolare lo script all'interno di HTML restituito da Ajax, è quello di mettere temporaneamente console.log ("test") all'interno dello script.

Dopo aver generato l'evento, apri la scheda della console all'interno degli strumenti di sviluppo. vedrai il link del file sorgente mostrato sul lato destro dell'istruzione di stampa di debug "test". fai clic sulla fonte (qualcosa come VM4xxx) e ora puoi impostare il punto di interruzione.

PS: inoltre, puoi considerare di inserire la frase "debugger" se stai usando Chrome, come quello che viene suggerito da @Matt Ball

— comprensione
fonte

10

La mia situazione e cosa ho fatto per risolverlo:
ho un file javascript incluso in una pagina HTML come segue:
Nome pagina: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Ora inserendo il debugger Javascript in Chrome, faccio clic sulla scheda Script e rilascia l'elenco come mostrato sopra. Riesco a vedere chiaramente script / common.js ma NON ho potuto vedere l'attuale pagina html test.html nel menu a discesa, quindi non ho potuto eseguire il debug del javascript incorporato:

<script type="text/javascript">
  document.write("something");
</script>

Quello era sconcertante. Tuttavia, quando ho rimosso il obsoleto type = "text / javascript" dallo script incorporato:

<script>
  document.write("something");
</script>

..e aggiornata / ricaricata la pagina, voilà, è apparsa nell'elenco a discesa e tutto è andato di nuovo bene.
Spero che questo sia utile a chiunque abbia problemi a eseguire il debug di JavaScript incorporato in una pagina HTML.

— Aditya Singh
fonte

Buon lavoro! Testato in Chrome 20.0.1132.57 su Mac 10.7.4 Bug inviato al progetto Chromium.

— Mars Robertson,

Tieni presente che in HTML 4 e XHTML typeè un attributo obbligatorio. In HTML5, è facoltativo.

— hotshot309,

2

Non ha nulla a che fare con il tipo. Lo script viene raccolto dalla VM dopo l'esecuzione, a meno che ispettore non sia già aperto a questo punto. Quando hai ricaricato la pagina, non è stato raccolto lo script.

— vsevik

Sono il mio caso, la mancanza <div>mi ha impedito di vedere il codice nel debugger

— ceztko,

5

L'aggiunta debugger;in cima alla mia sceneggiatura ha funzionato per me.

— JEKO
fonte

4

Stavo riscontrando lo stesso problema, come eseguire il debug di JavaScript all'interno dei <script>tag. Ma poi l'ho trovato nella scheda Fonti, chiamata "(indice)", tra parentesi. Fare clic sul numero di riga per impostare i punti di interruzione.

Questo è Chrome 71.

— ocarlsen
fonte

2

Se non riesci a visualizzare la scheda "Script", assicurati di avviare Chrome con gli argomenti giusti. Ho avuto questo problema quando ho avviato Chrome per il debug di JavaScript lato server con l'argomento --remote-shell-port=9222. Non ho problemi se lancio Chrome senza alcun argomento.

— Angelo caduto
fonte

Potresti elaborare per favore? Sto riscontrando questo esatto problema: impossibile visualizzare la scheda degli script. Ho scaricato l'ultima versione per sviluppatori di Chrome.

— Tom Redfern,

2

Mi sono imbattuto in questo problema, tuttavia la mia funzione inline era all'interno di una vista angularJS. Pertanto, al momento del caricamento, non ho potuto accedere allo script inline per aggiungere il debug, poiché solo index.html era disponibile nella scheda delle fonti del debugger.

Ciò significava che quando stavo aprendo la vista particolare con il mio inline (non avevo scelta su questo) non era accessibile.

L'unico modo in cui sono stato in grado di colpirlo è stato quello di mettere una funzione errata o chiamare all'interno della funzione JS in linea.

La mia soluzione includeva:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Questo significa che quando ho cliccato sul mio pulsante, mi è stato richiesto nel consolse di Chrome.

Uncaught TypeError: undefined is not a function

La cosa importante qui era la fonte di questo: VM5658:6 fare clic su questo mi ha permesso di passare in linea e mantenere il punto di interruzione lì per dopo ...

Modo estremamente contorto per raggiungerlo .. Ma ha funzionato e potrebbe rivelarsi utile quando si tratta di app a pagina singola che caricano dinamicamente le visualizzazioni.

Il VM[n]valore non ha un valore significativo e il valore non corrisponde all'ID dello script. Queste informazioni sono disponibili qui: Chrome "[VM]"

— Pogrindis
fonte

1

Utilizzando Visual Studio (2012) ho avuto lo stesso problema e il passaggio a IIS Express ha risolto il problema!

Il scripttag ètype attributo non ha influito su di esso.

Per qualche motivo il Visual Studio Development Server non fornisce tutto ciò di cui Chrome ha bisogno per abilitare i punti di interruzione.

— fuga-llc
fonte

1

So che la Q non riguarda Firefoxma non volevo aggiungere una copia di questa domanda per rispondere da solo.

Per Firefox devi aggiungere debugger;per poter fare ciò che @ matt-ball ha suggerito per il scripttag.

Quindi sul tuo codice, aggiungi debuggersopra la riga che desideri eseguire il debug e quindi puoi aggiungere punti di interruzione. Se hai appena impostato i punti di interruzione sul browser, non si fermerà.

Se questo non è il posto giusto per aggiungere una risposta di Firefox, dato che la domanda riguarda Chrome. No :( meno la risposta fammi sapere dove dovrei pubblicarlo e sposterò felicemente il post :)

— T04435
fonte

0

Questa è un'estensione della risposta di Rian Schmits sopra. Nel mio caso, avevo il codice HTML incorporato nel mio codice JavaScript e non vedevo altro che il codice HTML. Forse il debug di Chrome è cambiato nel corso degli anni, ma facendo clic con il pulsante destro del mouse sulla scheda Sorgenti / Fonti mi ha presentato la cartella Aggiungi allo spazio di lavoro . Sono stato in grado di aggiungere il mio intero progetto, il che mi ha permesso di accedere a tutti i miei script Java. Puoi trovare maggiori dettagli in questo link . Spero che questo aiuti qualcuno.

— Patricia
fonte