Share
In questa serie di tutorial in due parti, daremo un'occhiata alla scrittura e al debug del codice JavaScript utilizzando strumenti moderni come Chrome DevTools.
Nella parte 1, avrai uno sguardo introduttivo ai vari pannelli in DevTools e su quali flussi di lavoro sono adatti. Ci sarà anche un focus sulla scrittura e l'esecuzione di codice JavaScript attraverso il browser piuttosto che un editor di codice.
Gli Strumenti per gli sviluppatori sono funzionalità fornite dai browser contenenti una serie di utilità per ispezionare, interagire e eseguire il debug di pagine Web. Browser DevTools sono in genere in bundle con tutti i browser moderni tra cui Chrome, Firefox, Safari, Opera e Internet Explorer. Questo tutorial si concentrerà in particolare sulla parte DevTools di Chrome Canary, ma tutte le funzionalità elencate qui faranno presto parte di Chrome Stable.
La piattaforma web aperta ti consente di Fare clic con il tasto destro> Ispeziona elemento su qualsiasi pagina web e scopri la parte interna di esso, ma JavaScript è sempre stato un po 'più fuori dalla portata del CSS (Cascading Style Sheets). Mentre DevTools è pieno di funzionalità relative allo stile della pagina, c'è anche un mucchio di funzionalità meno conosciute che ti permette di visualizzare, scrivere ed eseguire il debug di JavaScript in vari modi, sia che si tratti della tua pagina o di un terzo -party sito.
Se sei uno sviluppatore web front-end, ti consigliamo almeno di essere a conoscenza delle utilità JavaScript che DevTools ha da offrire. Le funzionalità di alto livello includono:
Questa sezione coprirà gli elementi dell'interfaccia utente di DevTools, in particolare il pannello Sources e il pannello della console, poiché questi sono i due pannelli che verranno utilizzati per il resto di questo tutorial.
Prendi nota di alcune caratteristiche del layout:
Il pannello Sources fornisce un editor di codice e supporta l'evidenziazione della sintassi per molti formati di file comuni come HTML, CSS, JavaScript, CoffeeScript, LESS e Sass. L'editor di codice è presente nel pannello principale. Direttamente sopra il riquadro principale puoi vedere le schede corrispondenti ai tuoi file aperti.
Nel riquadro Sources nella barra laterale sinistra è presente una struttura di file che mostra in genere le risorse caricate dalla pagina attualmente ispezionata. Le risorse sono raggruppate per dominio e le cartelle possono essere in uno stato espanso o compresso. Se fai un solo clic su una risorsa, questa si aprirà nell'editor di codice.
La barra laterale destra contiene controlli per il debug di JavaScript e ogni riquadro può essere in uno stato espanso o compresso. Qui vengono visualizzati vari livelli di output quando JavaScript viene messo in pausa in corrispondenza di un punto di interruzione.
Il pannello della console consente di visualizzare l'output prodotto dalla registrazione diagnostica (come ad es console.log dichiarazioni) ma anche per scrivere e valutare JavaScript nel contesto della pagina attualmente ispezionata. Il pannello della console supporta sia l'API della console che l'API della riga di comando. Ecco alcune funzioni esposte da ciascuna API, insieme a una descrizione del loro output.
Accentsconagua
// Una semplice istruzione di registro, che registra una stringa, un array e un oggetto console.log ('Ciao', [1,2,3], questo);
// Come console.log ma formattato in rosso per indicare un errore console.error ('Si è verificato un errore');
tasti (finestra); // Ottieni le proprietà di un oggetto
$ 0; // Recupera l'elemento attualmente selezionato nel pannello Elementi
La parte superiore del pannello della console contiene alcuni controlli come mostrato di seguito.
chiaro(), che fa parte dell'API della riga di comando.Il pannello della console è uno dei pochi pannelli che è possibile sovrapporre ad altri pannelli in DevTools (Elementi, rete, Sorgenti) per fornire un flusso di lavoro migliorato. Se ti ritrovi regolarmente a tornare al pannello della console, apri il cassetto della console premendo il pulsante Fuga chiave.
Questa sezione si concentrerà sull'utilizzo di DevTools per vedere le risorse JavaScript utilizzate da un sito. Prima di continuare, si consiglia di disabilitare la cache del browser tramite DevTools. Per fare questo, vai a Impostazioni> Generale e abilitare la casella di controllo intitolata Disabilita la cache (mentre DevTools è aperto). Questo ti assicura sempre una nuova versione di un bene.
Passare a HTML5Please.com, un sito che spiega la disponibilità delle funzionalità della piattaforma Web. Apri il DevTools usando Comando-Maiuscole-I o selezionando Ispeziona elemento dal menu di scelta rapida della pagina. Dirigetevi verso il Pannello delle fonti e prendere nota della struttura ad albero dei file mostrata nella barra laterale sinistra. Non è raro che i siti Web memorizzino il loro JavaScript in cartelle come "js" o "script", quindi sai già dove cercare. Apri il script.js file nel js cartella. Nota alcune caratteristiche dell'editor di codice che possono rivelarsi utili quando visualizzi o modifichi il codice JavaScript:
Usa la funzione di definizione go-to per trovare o scoprire rapidamente metodi o funzioni JavaScript. È possibile aprire la finestra modale di definizione go-to tramite il collegamento Comando-Maiuscole-P. Se conosci il nome del metodo o della funzione che stai cercando, digita nella casella di ricerca della definizione go-to; mentre digiti, i risultati verranno aggiornati in tempo reale. Ogni risultato contiene il nome del metodo corrispondente (se ce n'è uno) e il numero della linea in cui è definito. Uso accedere per selezionare un risultato di ricerca e quindi atterri sulla riga di codice in cui è definita la funzione.
Ora aperto Modernizr-2.0.min.js nel JS / libs cartella. Il fatto che questo file sia minimizzato rende più difficile la visualizzazione. Selezionare Bella stampa avere DevTools applica una formattazione più intuitiva al file, usando interruzioni di riga e rientro. La funzione Pretty Print funziona sia per CSS che JavaScript.
Ogni file JavaScript nella struttura dei file ha un menu contestuale, quindi aprilo usando tasto destro del mouse. Notare alcune opzioni utili per portare il file offline per un uso successivo.
Il pannello di rete, oltre a mostrare semplicemente quali risorse è stata caricata una pagina, mostrerà anche altre informazioni e dati.
Utilizzando HTML5Please.com come sito Web di esempio, segui i passaggi seguenti:
Il primo script, Modernizr-2.0.min.js, ha il valore di html5please.com/:17 per l'iniziatore. Ciò suggerisce che si trattasse di una risorsa HTML che ha avviato il download dello script (piuttosto che un caricatore di script, ad esempio). Fai clic sull'iniziatore e tieni indirizzato alla riga di codice nel pannello Sources che fa riferimento al file:
Nel caso in cui uno script sia inserito dinamicamente (con un caricatore di script, ad esempio), la colonna di iniziatore nel pannello di rete può fornire uno stack di chiamate JavaScript relativo alle chiamate che si sono verificate fino al punto in cui lo script è stato inserito dinamicamente nel DOM.
Puoi fare clic su ogni chiamata all'interno di uno stack di chiamate per navigare verso la porzione di codice pertinente nel pannello Sources.
Nella sezione "Visualizzazione di JavaScript usando DevTools", ho spiegato come visualizzare informazioni, metadati e codice sorgente sulle risorse JavaScript. Questa sezione esaminerà i modi in cui è possibile scrivere JavaScript utilizzando DevTools.
Usa il pannello della console per scrivere quick one-liner JavaScript con risultati immediati. JavaScript viene eseguito con il contesto della pagina attualmente ispezionata. Esegui alcuni JavaScript nel pannello della console premendo accedere dopo aver inserito del codice.
Fare riferimento all'API della console e all'API della riga di comando per un elenco di metodi e funzioni disponibili.
Mentre il pannello della console è relativamente semplice, ci sono alcuni piccoli suggerimenti per migliorare il tuo flusso di lavoro:
chiavi (finestra) per rilevare le variabili globali nella pagina corrente.$ _ helper per recuperare l'ultimo risultato di un comando precedente.È possibile che il pannello della console sia un buon candidato per sperimentare rapidamente con JavaScript per scoprire quale sia l'output di determinate espressioni. Tuttavia, quando inizi a scrivere JavaScript più complesso, puoi facilmente incontrare limitazioni:
Il pannello di console non intende essere una sostituzione di editor di codice o addirittura alternativa. Ecco un elenco di alcuni casi in cui il Pannello di Console può essere utile:
chiamata() e applicare() metodi eseguendoli in linea e osservando i risultatiIl pannello principale del pannello Sources contiene un editor di codice con funzionalità di modifica di base.
L'editor stesso è alimentato da CodeMirror, un potente editor di testo implementato usando JavaScript. DevTools importa l'editor CodeMirror nella propria base di codice e abilita in modo selettivo varie funzionalità che sono a loro volta rese disponibili a qualsiasi utente di Chrome.
Quando si modifica JavaScript (tra le altre lingue supportate), l'editor del pannello Sources contiene un numero di utilità come:
documento non è consigliato dopo aver digitato docu a meno che non ci sia già almeno una occorrenza della parola documento nello stesso file.La funzione, meglio conosciuta come Live Edit, ti dà la possibilità di modificare il codice JavaScript di una pagina tramite DevTools e fare in modo che le modifiche si applichino immediatamente alla pagina senza un aggiornamento della pagina. Non esiste una particolare interfaccia utente per usarlo; devi semplicemente riscrivere una parte del codice JavaScript e premere Comando-S per salvarlo.
Di seguito viene spiegato come funziona dietro le quinte, ma prima consideriamo i seguenti prerequisiti (questi sono indipendenti da Modifica live):
script.js carica in Chrome tramite una pagina Web.script.js viene analizzato, valutato e compilato in codice macchina tramite il motore JavaScript V8.Ecco cosa succede dietro le quinte della funzione Modifica dal vivo, considerando i punti precedenti:
script.js nell'editor di codice DevTools. Supponiamo che ci sia un pulsante sulla pagina web corrente. Al clic del pulsante, un listener di eventi click esegue una funzione anonima.console.log dichiarazione e salvare il file.script.js vengono iniettati nuovamente nel motore V8 per l'elaborazione.script.js e quello vecchio. Cancellazioni, aggiunte e modifiche sono memorizzate.script.js con le modifiche compilate.Live Edit funziona meglio con piccole modifiche piuttosto che l'authoring di interi file JavaScript per la tua app. Gli scenari di debug funzionano bene con Live Edit.
Le aree di lavoro non sono un componente critico del debug di JavaScript tramite DevTools. Tuttavia, a seconda delle tue esigenze, può velocizzare il tuo flusso di lavoro di debug. Aree di lavoro è una funzionalità di DevTools che consente di modificare i contenuti di una cartella sul file system apportando modifiche al codice in DevTools.
Se stai navigando in un progetto che viene servito localmente attraverso un server web, come ad esempio http: // localhost: 3000 / e il progetto esiste sul tuo file system all'indirizzo ~ / Sviluppo / progetto, ad esempio, puoi insegnare a DevTools la mappatura tra i due e utilizzare le funzionalità di Live Edit con le abilità di salvataggio su disco. Aree di lavoro consente il seguente flusso di lavoro:
Al punto 3, il salvataggio sovrascrive il file sorgente originale.
Mappe di origine risolvono un problema comune quando si tratta di codice sorgente elaborato o compilato in qualcos'altro. Esempi inclusi:
Il problema è il seguente: quando si esegue il debug di una versione elaborata del codice, può essere difficile capire in che modo il codice sorgente originale viene mappato su ciò che si sta visualizzando durante il debug. Se si verifica un errore nella console DevTools per un sito Web di produzione, in genere si dovrà eseguire il debug di una versione minified e concatenata del codice JavaScript, che ha una scarsa somiglianza con i file di origine che si è autore.
Una mappa sorgente è un file generato prodotto come parte di un processo di compilazione disponibile per i casi d'uso elencati in precedenza. DevTools può leggere un file di mappa sorgente per capire come un file compilato viene mappato sul file originale.
I due frammenti di codice (File di origine: app.js e Transpiled file-compiled.js) dimostrano il codice debugger della mappa sorgente.
Esempio 1. File di origine: app.js
for (var elemento di [1, 2, 3]) console.log (elemento);
Si noti che il app.js il file sorgente utilizza una funzione compatibile con Ecmascript 6 nota come iteratore di array.
Esempio 2. Transpiled File-compiled.js
"usare rigorosamente"; for (var $ __ 0 = [1, 2, 3] [Symbol.iterator] (), $ __ 1;! ($ __ 1 = $ __ 0.next ()). done;) var element = $ __ 1.valore; console.log (elemento); // # sourceMappingURL = app.js.map
Nota che compiled.js è referenziato da un tag script su una pagina HTML, insieme al runtime Traceur e infine viene aperto in un browser.
Anche il JavaScript compilato ha il console.log dichiarazione on line 6. DevTools è in grado di mostrare esattamente dove si trova ilconsole.log la dichiarazione esiste all'interno del file sorgente originale (debug della mappa di origine), che si trova sulla linea 2. I punti di interruzione funzionano come previsto. Dietro le quinte, il JavaScript compilato viene valutato ed eseguito, ma DevTools presenta una risorsa diversa al posto della versione valutata del browser.
La funzione Snippet di DevTools offre un modo rapido per scrivere codice JavaScript vario ed eseguirlo. Tutti i JavaScript eseguiti tramite Snippet vengono eseguiti nel contesto della pagina corrente. L'esecuzione di uno snippet di DevTools è simile all'esecuzione di un booklet in una pagina. Potresti trovare preferibile scrivere determinati JavaScript all'interno di snippet in opposizione al pannello della console per ragioni correlate a un ambiente di modifica del codice migliore. I tuoi frammenti vengono salvati nell'archivio locale di DevTools.
Per utilizzare frammenti:
console.log ( 'Ciao'); nell'editor di codice.È possibile trovare un certo numero di snippet già scritti in questo repository di frammenti di DevTools.
Questo è tutto per la parte 1 di una moderna esperienza di debug. Nella parte 2, daremo un'occhiata ad alcune funzionalità di debug e anche alcune estensioni che possono aiutare con questo.
