Share
In questa terza parte della nostra serie di strumenti per sviluppatori di Chrome, esamineremo come modificare e eseguire il debug di JavaScript. L'ottimizzazione è una parte importante del processo di sviluppo, in particolare per le applicazioni critiche per le prestazioni. Discuteremo anche delle tecniche per identificare potenziali colli di bottiglia nel nostro codice.
Come nei precedenti due articoli, mi concentrerò sulle funzionalità disponibili nel build di Chrome Canary (versione 26.0, al momento in cui scrivo). Tratterò i pannelli Fonti e Timeline.
Il pannello Sources è il luogo go-to per il debug di JavaScript. Questo pannello, abbinato al pannello della console, è uno strumento estremamente potente! È un'interfaccia point-and-click che consente di mettere in pausa l'esecuzione di JavaScript e di ispezionare tutte le variabili e gli oggetti nell'ambito corrente.
Potresti trovare utile modificare i tuoi CSS e JavaScript negli Strumenti per sviluppatori.
Accentsconagua
Questo parola chiave nelle varie fasi di un programma JavaScript, è possibile orologio il Questo parola chiave per vedere i suoi diversi valori nel tempo. Fai clic sul pulsante Aggiungi per aggiungere un'espressione e, se un'espressione non si aggiorna, fai clic sul piccolo pulsante di aggiornamento accanto al pulsante Aggiungi.La scheda delle fonti elenca le risorse raggruppate in base al sottodominio da cui sono servite. Ogni risorsa ha un menu contestuale (rivelato facendo clic con il tasto destro del mouse sulla risorsa) con una serie di opzioni comuni. Un'opzione, tuttavia, è molto interessante: Modifiche locali, che vedremo più avanti.
Nota: è possibile visualizzare l'elenco dei file di origine come un elenco semplice (ovvero non contenuto nelle cartelle raggruppate per sottodominio) deselezionando 'Mostra cartelle' in Impostazioni> Generale.
Cliccando su una risorsa lo si visualizza nel riquadro del contenuto principale. Non dimenticare di abilitare la modalità di stampa per risorse minime, poiché alcuni minificatori rinominano le variabili per rendere il codice più difficile da capire. Si spera che più sviluppatori genereranno mappe di origine in futuro, rendendo più semplice lavorare con codice miniato.
È possibile modificare la maggior parte dei file nel riquadro del contenuto principale e tali modifiche si riflettono immediatamente nel browser. Dopo aver apportato modifiche a una risorsa, il menu di scelta rapida offre la possibilità di salvare (anche se non in modo permanente) o Salva con nome (salva una nuova versione localmente). Quando lavori con i tuoi siti locali, potresti trovare utile modificare i tuoi CSS e JavaScript negli Strumenti per sviluppatori invece del tuo IDE. Salvando le modifiche, in questo caso, modifica il vero file sorgente. Strumenti come Tincr o chrome-devtools-autosave possono aiutare con l'automazione di questo flusso di lavoro.
Il menu di scelta rapida della risorsa offre anche la possibilità di rivelare la risorsa nel pannello di rete.
Una revisione è un nuovo punto all'interno della vita di una risorsa, su cui è stato modificato. La modifica e il salvataggio del codice dal pannello delle fonti crea una nuova revisione e le modifiche di stile apportate all'interno del pannello Elementi attivano effettivamente una nuova revisione!
Dopo aver apportato alcune modifiche, è possibile fare clic con il tasto destro del mouse sulla risorsa e selezionare Modifiche locali. Questo apre un nuovo riquadro di Modifiche locali che contiene un diff dei file originali e modificati. All'interno del riquadro delle modifiche locali, possiamo ripristinare un file sorgente modificato nella sua interezza (utile per quando hai apportato un gran numero di modifiche indesiderate) facendo clic su "ripristina" accanto al nome file.
Gli Strumenti per sviluppatori sono abbastanza gentili da avvisarci di potenziali ottimizzazioni.
Il riquadro del contenuto principale presenta molte delle funzionalità che potresti trovare negli editor di codice di base: numeri di linea, evidenziazione della sintassi, possibilità di creare schede e funzionalità di 'annullamento'. Anche se non corrisponde a un IDE completo, non è male per il montaggio veloce.
I punti di interruzione ci consentono di interrompere l'esecuzione del codice JavaScript e di ispezionare l'ambiente corrente. Ad esempio: supponiamo di avere un semplice per loop che spinge gli oggetti su un array. Il nostro obiettivo è comprendere con precisione i meccanismi interni all'interno di ogni iterazione del ciclo. Potremmo usare molto facilmente console.log per registrare le variabili che vogliamo ispezionare. Mentre questa tecnica ti darebbe i risultati desiderati, non è certamente la tecnica di debug più efficace. Utilizzando i punti di interruzione, possiamo sospendere l'esecuzione del codice mentre ci si trova all'interno di per loop e ispezionare tutte le variabili nell'ambito del contesto.
var arr = []; per (var i = 0; i < 3; i++) var num = i; arr.push(num);
Per aggiungere un punto di interruzione, fare clic sul numero di riga; puoi anche fare clic con il pulsante destro del mouse sul numero di riga e scegliere l'opzione "Aggiungi punto di interruzione". Dopo aver impostato il punto di interruzione, aggiornare la pagina e notare che i punti di interruzione persistono tra i carichi di pagina. Se il codice deve ancora essere eseguito (ad esempio, il punto di interruzione è stato impostato all'interno di un gestore di eventi click), quindi è possibile avviare l'esecuzione del codice senza un aggiornamento della pagina.
È possibile codificare un punto di interruzione nel codice utilizzando il comando debugger; dichiarazione nel tuo codice. Gli Strumenti per sviluppatori (e la maggior parte dei debugger JavaScript) riconoscono questo come un punto di interruzione.
Quando si raggiunge un punto di interruzione, la pagina si colora di grigio e la linea del codice si evidenzia in blu. A questo punto, possiamo premere il tasto Esc per visualizzare il pannello della console. Ciò che è interessante è che il codice scritto ed eseguito all'interno della console (mentre è in pausa su un breakpoint) viene effettivamente eseguito nel contesto correntemente in pausa! In genere, il Questo parola chiave si riferisce al globale finestra oggetto; considerando la visione Questo in un clic gestore di eventi mostra il valore come destinazione dell'evento (un elemento).
Nello screenshot in alto, la parte grigia è il documento stesso e gli Strumenti per gli sviluppatori hanno evidenziato la riga corrente di JavaScript. Nella console, si vedono i risultati dell'ispezione di alcune variabili. A destra del riquadro del contenuto è presente il riquadro "Variabili dell'ambito", in cui è possibile esaminare tutte le variabili e gli oggetti nell'ambito corrente.
I punti di interruzione condizionali consentono di interrompere quando una determinata condizione è vera.
Nel pannello laterale destro del pannello Sorgenti, noterai la scheda Breakpoint XHR. Fai clic su "Aggiungi XHR Breakpoint" sul tuo sito preferito autorizzato da Ajax. Lasciando vuoto il campo 'URL Contiene' si interrompe qualsiasi XHR richiesta.
Questo presenta agli sviluppatori nuove e potenti opportunità. Possiamo navigare verso un sito che non abbiamo costruito, né con alcun coinvolgimento, e semplicemente avviare il debug del codice in base a determinati eventi e criteri. Quindi fare una pausa sulle richieste Ajax è bello, ma su quali altri eventi possiamo andare avanti?
Il pannello delle fonti ha un'interfaccia point-and-click per l'impostazione dei breakpoint che corrispondono a determinati listener di eventi. Nota che interrompere un evento particolare funziona solo quando la pagina in questione è in ascolto per quell'evento. Se rompiamo il Controllo> Ridimensiona evento, avendo un codice come il seguente assicura che il codice si interrompa quando l'evento si attiva:
window.onresize = function (e) console.log (e); ;
Quindi, quando si tratta di eventi particolari utili?
I punti di interruzione persistono tra i carichi di pagina.
La scheda Punti di interruzione DOM visualizza i punti di interruzione per il DOM. Un modo semplice per vedere questo in azione è trovare un elemento che, per esempio, quando ha cliccato ha il suo nome della classe proprietà cambiata. Individua l'elemento nel pannello Elementi, fai clic con il pulsante destro del mouse e vai a Break On> Modifiche agli attributi. Il codice verrà interrotto quando cambiano i valori degli attributi di quell'elemento.
document.querySelector ('# button'). onclick = function () this.setAttribute ('some', 'thing'); ; Il al clic il gestore di eventi sopra conta come una modifica di attributo, che presenta qualcosa di simile a questo:
Altre opzioni includono:
element.remove ().Nota: Chrome sembra aver implementato il metodo remove (). Alcuni browser non supportano questo metodo; quindi, sarà necessario rimuovere removeChild ().
Il pannello Timeline ti consente di esaminare i problemi di rendimento della tua app Web. Lo scopo principale del pannello Timeline è (al momento della scrittura) per la visualizzazione delle informazioni, a differenza degli altri pannelli che consentono di eseguire azioni distruttive sulla pagina.
Le volte che potresti voler utilizzare il pannello Timeline includono:
È possibile codificare un punto di interruzione nel codice utilizzando il comando
debugger;dichiarazione nel tuo codice.
Nella Parte 2, è possibile ricordare come abbiamo iniziato a registrare le informazioni di rete prima della pagina caricata al fine di catturare quante più richieste di rete possibili. Non lo facciamo nel pannello Timeline; stiamo meglio registrando eventi brevi e specifici. Non dobbiamo necessariamente * fare * qualsiasi cosa. Potremmo lasciarlo in registrazione per vedere cosa succede quando l'utente è inattivo, o se qualche timer potrebbe essere in esecuzione in background.
Le schede Eventi, Frames e Memoria vengono popolate durante la registrazione; quindi, assicurati di esaminarli per trovare i dati richiesti. La sezione Memoria può aiutarti a individuare potenziali perdite di memoria.
I record vengono visualizzati durante e dopo le registrazioni. Una buona quantità di dati viene catturata all'interno dei record, come mostrato nell'immagine seguente.
Questa schermata mostra alcune richieste di rete (blu) e alcuni "ricalcoli stili" (viola). I ricalcoli di stile potrebbero accadere per una serie di motivi. I record gialli sono script e il verde rappresenta il rendering della pagina.
Cliccando su o passando con il mouse su un record vengono visualizzate ulteriori informazioni. Ad esempio, passando con il mouse su un record di 'pittura' potresti mostrare la parte della pagina che è stata dipinta.
Gli strumenti di sviluppo a volte collegano un record a un altro pannello. Ad esempio, il collegamento di un'immagine ti indirizza al pannello Risorse con quell'immagine a fuoco e un record XHR potrebbe collegarsi alla voce corrispondente nel pannello Rete..
Gli Strumenti per sviluppatori sono abbastanza gentili da avvisarci di potenziali ottimizzazioni. Si noti la piccola icona di notifica a destra di alcuni dei record nell'immagine seguente. Se è sbiadito, sarà necessario eseguire il drill down per individuare il record attuale che contiene le informazioni utili.
I popover a volte contengono un collegamento alla riga di codice che ha causato la visualizzazione del record. Ma una parola di avvertimento: la stampa carina non sempre aiuta, specialmente quando si guarda al codice di terze parti. Un'opzione è quella di impostare un punto di interruzione sulla linea a cui sei portato. Una volta messo in pausa il debugger, è possibile visualizzare i contenuti della variabile per comprendere meglio l'intento del codice.
Se sei come me, finisci sempre per acquisire più dati di cui hai bisogno, ma puoi creare una selezione attraverso le barre verticali (frame) che visualizzano solo i record corrispondenti alla porzione selezionata.
Se ti interessano solo i record lunghi, imposta un filtro per visualizzare solo i record lunghi. Puoi farlo nella parte inferiore del pannello Timeline.
Se lo scorrimento non è agevole come dovrebbe, prendere in considerazione l'esclusione di "Caricamento" (ad esempio record di rete). Detto questo, se sai che le richieste di rete vengono utilizzate per caricare i dati in una pagina che lo scorrimento infinito degli utenti, ti consigliamo di mantenere selezionato 'Caricamento'.
Non applicare filtri solo perché i dati appaiono troppo intensi all'inizio. Prenditi il tempo per capire e indagare su quali strumenti di sviluppo ti stanno mostrando. Ti consigliamo di utilizzare la timeline per confermare dove si verificano i rallentamenti e mirare a ottenere quelle barre verticali più vuote possibili (spazio bianco / tempo di inattività).
Il riquadro del contenuto principale ha molte delle funzionalità che potresti trovare negli editor di codice di base.
Conosci altre risorse utili? Menzionalo nei commenti!
