37

Come posso passare il mio codice javascript riga per riga utilizzando gli strumenti di sviluppo di Google Chromes senza che passi nelle librerie javascript?Javascript Debug linea per linea utilizzando Google Chrome

Ad esempio, sto utilizzando fortemente jQuery sul mio sito, e voglio solo eseguire il debug del jQuery che ho scritto, e non del javascript/jquery nelle librerie jquery. Come faccio a passare attraverso la mia jquery/javascript e non devo sfogliare milioni di righe nelle librerie jquery?

Quindi, se ho il seguente:

function getTabFrame() { 
    $.ajax({ 
     url: 'get_tab_frame.aspx?rand=' + Math.random(), 
     type: 'GET', 
     dataType: 'json', 
     error: function(xhr, status, error) { 
      //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText); 
     }, 
     success: function(data) { 
      $.each(data, function(index, item) { 
       // do something here 
      }); 
     } 
    }); 
} 

se metto il punto di interruzione a $.ajax({, se li avviare il debug che dove si ferma, se poi premo F11, va dritto nelle librerie jQuery . Non voglio che ciò accada, voglio che vada alla riga successiva che è url: 'get_tab_frame.aspx?rand=' + Math.random(),.

Ho provato a premere F10 invece, ma questo va direttamente al } di chiusura della funzione. E F5 passa al prossimo punto di interruzione senza passare da una riga all'altra.

+0

Quando hai principalmente problemi? Quando colpisci le eccezioni? –

+0

Fondamentalmente, ho così tanto javascript che non riesco più a vederne la struttura nella mia mente, quindi volevo solo passare attraverso il mio codice per ricordare a me stesso come tutto funziona per capire dove cercare il problema. .. – oshirowanen

+0

Sembra molto simile a http://stackoverflow.com/questions/7827882/avoid-stepping-through-javascript-file-in-chrome-developer-tools?rq=1 – rjmunro

risposta

62

Supponendo che si sta in esecuzione su una macchina Windows ...

  1. Hit la F12 chiave
  2. Selezionare il Scripts, o Sources, scheda negli strumenti di sviluppo
  3. Fare clic sull'icona della cartella in piccolo il livello superiore
  4. Seleziona il tuo file JavaScript
  5. Aggiungere un punto di interruzione facendo clic sul numero di riga a sinistra (aggiunge un po 'indicatore blu)
  6. Esegui il tuo JavaScript

Poi durante l'esecuzione di debug si può fare una manciata di movimenti passo-passo ...

  • F8 Continua: Continuerà fino al successivo punto di interruzione
  • F10 Passaggio sopra: Passi oltre la prossima chiamata di funzione (non si entrare nella biblioteca )
  • F11 Step into: Passi nella prossima chiamata di funzione (sarà entrare nella biblioteca)
  • Shift + F11 Passo out: esce dalla funzione corrente

Aggiornamento

dopo la lettura il tuo post aggiornato; per eseguire il debug del codice, consiglierei di utilizzare temporaneamente lo jQuery Development Source Code. Sebbene questo non risolva direttamente il tuo problema, ti permetterà di eseguire il debug più facilmente. Per quello che stai cercando di ottenere, credo che avrai bisogno di entrare nella libreria, quindi spero che il codice di produzione ti aiuti a decifrare cosa sta succedendo.

+0

Si prega di vedere le informazioni aggiuntive nella mia domanda per dare un esempio di ciò che sta accadendo. Ho la sensazione che passo dopo passo il debugging non sia possibile con gli strumenti per sviluppatori di Google Chrome? – oshirowanen

+0

Ho aggiornato la mia risposta, si spera che dovrebbe aiutare un po 'oltre. – Richard

+1

A meno che non mi sbagli molto, negli strumenti per sviluppatori di Chrome, credo che F5 aggiornerà la pagina; F8 è la chiave continua, non è vero? – cori

19

...Come faccio a scorrere la mia linea di codice javascript per riga usando Google Chromes strumenti di sviluppo senza entrare in librerie javascript ...


Per la cronaca:? In questo momento (Feb/2015) sia Google Chrome e Firefox ha esattamente quello che (e io) è necessario evitare di andare dentro le biblioteche e gli script, e andare oltre il codice che ci interessa, si chiama nero Boxe:

enter image description here

Quando si Blackbox un file sorgente , il debugger non salterà i nto il file quando si passa al codice che si sta eseguendo il debug.

Maggiori informazioni:

+0

Ecco, questo è MOLTO utile per il debug, grazie. – S1awek

Problemi correlati