Share
Nel 2013 ho pubblicato alcuni tutorial su DevTools: Markup and Style, Networking e Console e JavaScript e Performance, che coprono le funzionalità di base dei vari pannelli DevTools. Da allora, molto è cambiato, quindi diamo un'occhiata.
DevTools è cresciuto un bel po 'dal momento che è stato coperto l'ultima volta su Tuts +, ecco alcune delle caratteristiche che vorrete sapere:
screencasting: visualizza e interagisce con le pagine Web sul tuo dispositivo Android tramite DevTools sul desktop.
Aree di lavoro: utilizzare il fonti pannello come editor di codice. Modifica il codice nel tuo progetto e fallo persistere su disco.
Debug della mappa di origine: scrivere LESS / Sass o anche CoffeeScript? Mappe sorgente di output durante la compilazione per consentire a DevTools di comprendere la mappatura.
* Grafico delle fiamme: *visualizzare una visualizzazione interattiva dell'elaborazione JavaScript nel tempo.
Emulazione mobile: emula determinate caratteristiche del dispositivo (ad esempio, dimensioni dello schermo, programmi utente) e le applica alla tua pagina per vedere come risponde.
Debug su tela: passa attraverso i comandi ricevuti da canvas HTML5 e osserva come la tela cambia con ciascuna istruzione.
Molto è entrato in DevTools per migliorare lo sviluppo e il debug dei flussi di lavoro. Dal debug della mappa di origine al debug remoto, si spera che almeno una cosa in questo post sarà in grado di rimuovere e iniziare a utilizzare. Se desideri provare alcune di queste funzionalità, procedi e prova Chrome Canary.
Con Screencasting, ottieni la possibilità di interagire con una pagina Web aperta in Chrome per Android, dal tuo computer desktop. Clic, scorri, scorrimento e altro è tutto possibile grazie al mouse.
Apri il Ispeziona i dispositivi pagina facendo clic su hot dog icona in Chrome (in alto a destra) e vai a Strumenti> Ispeziona dispositivi (In alternativa, immettere chrome: // ispezionare i dispositivi / # nella barra degli indirizzi). Assicurati di poter vedere il tuo dispositivo nell'elenco. Il tuo dispositivo dovrà avere il debug USB abilitato, se non già. Una volta visualizzato il tuo dispositivo, inserisci un URL che desideri eseguire il debug remoto in "Apri scheda con url"casella di input e selezionare Aperto. A questo punto, dovresti vedere questa pagina caricarsi in Chrome per Android. Colpire 'Ispezionare'indietro sul chrome: // ispezionare pagina e notare un piccolo Schermo icona nell'angolo in alto a destra del DevTools. Cliccando su questo si attiva Screencasting.
Lo screencast che vedi in DevTools viene aggiornato in tempo reale. Se si scorre la pagina (tramite DevTools o sul dispositivo) anche la sua controparte scorrerà. Si noti nello screenshot qui sotto, che il Ispeziona elemento la funzionalità si comporta come ci si aspetterebbe, in quanto funzionalità quali digitazione e gesti consentono di spostare parti significative del flusso di lavoro di test del dispositivo su DevTools.
Controlla la documentazione ufficiale sullo schermo Screencasting del tuo dispositivo.
L'idea generale è, tu hai il fonti pannello visualizza il contenuto dei file sorgente del progetto così come sono presenti nel tuo file system. Ogni file è modificabile con capacità salvate su disco. Modifica non solo i file come un editor di testo, ma sincronizza le modifiche a loro sia che tu modifichi gli stili nel Elementi pannello, esternamente in un altro editor o in DevTools.
Per preparare gli spazi di lavoro:
Per prima cosa aggiungi una cartella al tuo spazio di lavoro. Pulsante destro del mouse nel fonti riquadro e selezionare 'Aggiungi cartella a Workspace'.
Concedere le autorizzazioni del file system come richiesto da Chrome.
Dopo aver concesso le autorizzazioni del file system, puoi procedere e modificare il codice all'interno di DevTools e salvarlo come faresti in un editor di codice. Il vero vantaggio deriva dal codice di modifica che è condiviso dalla pagina web che stai visualizzando. Se stai scontando una pagina a http: // localhost: 3000 / andare avanti e aggiungere il progetto corrispondente come cartella Workspace in DevTools. A questo punto, ti consigliamo di insegnare a DevTools la mappatura tra la risorsa di rete e la risorsa di file system corrispondente.
Pulsante destro del mouse su un file all'interno di una cartella di risorse di rete in fonti panel (assicurati che abbia una mappatura ovvia su un file sul tuo file system).
Selezionare Mappa su risorsa file system ...
Una volta che DevTools è stato istruito sulla mappatura, i file di origine del progetto verranno visualizzati al posto dei file di risorse di rete.
Alcune caratteristiche piccole ma utili da notare sono:
La maggior parte dei file include l'evidenziazione della sintassi.
Uso Cmd + P per aprire rapidamente un file, se vedi risultati indesiderati (come i file all'interno node_modules), tasto destro nella cartella contenente e selezionare 'Escludi cartella'.
Crea nuovi file dal Menù contestuale > 'Nuovo file'.
Se si aggiorna un file altrove, DevTools tenterà di ricaricarlo automaticamente ogni volta che riprende lo stato attivo.
Consulta la documentazione di DevTools per le aree di lavoro su Google per ulteriori informazioni.
Per LESS, Sass, CoffeeScript e alcuni altri strumenti, il loro processo di compilazione può produrre file di mappe sorgente. DevTools è in grado di interpretare tali file e fornire funzionalità di live-edit. Ciò significa che puoi modificare i tuoi file sorgente (.meno, .scss, .coffee) all'interno del fonti pannello. Se hai un'attività di controllo sui file preelaborati che ricompila un nuovo file CSS / JS dopo la modifica, DevTools si ricaricherà automaticamente da quel file in modifica e aggiornerà la pagina web di conseguenza..
Per capire di più su questi flussi di lavoro, abbiamo coperto DevTools più il debug della mappa sorgente in passato:
Sviluppo con Sass e Chrome DevTools (giugno 2013)
Lavorare con LESS e il Chrome DevTools (gennaio 2014)
Il Flame Chart offre una panoramica visiva dell'attività JavaScript in un dato momento.
Per creare e visualizzare una visualizzazione di una mappa di fiamme, raccogliere un profilo di CPU JavaScript dal Profili scheda e scelto il "Grafico"vista sul Profilo risultato. I picchi nel grafico possono essere ingranditi da trascinando e selezionando una parte di interesse È possibile selezionare un intervallo che comporterà l'aggiornamento della mappa della fiamma di conseguenza, quindi trascinare le fiamme orizzontalmente o verticalmente per fare una panoramica.
L'altezza di tutte le barre in una particolare colonna non è significativa, rappresenta semplicemente ogni chiamata di funzione che si è verificata. Ciò che è importante, tuttavia, è la larghezza di una barra, poiché la lunghezza è correlata al tempo impiegato dalla funzione per eseguire.
Ogni barra può essere posizionata sopra per richiamare i dettagli di temporizzazione. Un punto di partenza per scoprire i colli di bottiglia delle prestazioni sarebbe:
Trova una barra ampia nella tabella delle fiamme.
librarsi su di esso per far apparire la sezione dettagli.
Garantire l 'Tempo totale'è in quantità soddisfacente.
Una barra che ha un tempo di esecuzione elevato può rallentare la pagina web, clic su di esso per essere portato al punto corrispondente del codice.
C'è un pezzo di documentazione dedicato per il Flame Chart su Google.
L'emulazione mobile consente al desktop Chrome di imitare alcune caratteristiche dei dispositivi mobili. Le caratteristiche possono essere controllate singolarmente o tramite una serie di preset fissi basati su dispositivi noti come Nexus 5, Galaxy S4, iPhone, iPad, Kindle e molti altri.
A prima vista, puoi applicare un preset del dispositivo per vedere come si comporta la pagina Web ispezionata in condizioni mobili.
Apri il cassetto di DevTools premendo Fuga.
Passare al riquadro Emulazione.
Seleziona 'Google Nexus 5'
Stampa 'Emulare'
Dovrai anche aggiornare la pagina per assicurarti che le impostazioni del dispositivo siano state applicate correttamente. Nota come l'area della pagina web visibile ora è molto più piccola, questo corrisponde al rapporto di aspetto del dispositivo preselezionato. Cos'altro è cambiato?
Agente utente: Digitando navigator.userAgent nella console uscirà il file emulato agente utente del dispositivo, ad esempio: "Mozilla / 5.0 (Linux; Android 4.2.1; it-it; Nexus 4 Build / JOP40D) AppleWebKit / 535.19 (KHTML, come Gecko) Chrome / 18.0.1025.166 Mobile Safari / 535.19"
Risoluzione dello schermo: Le dimensioni riportate screen.width e screen.height ora segnala le dimensioni che riceverai dal dispositivo stesso. Prendi nota, per il preset Nexus 5, la larghezza e l'altezza sono riportate come 384 e 640 rispettivamente. Vedi Un pixel non è un pixel non è un pixel.
* devicePixelRatio: *window.devicePixelRatio rapporti 2 che abiliterà una query multimediale mirata rapporto min-device-pixel: 2.
Tocca Eventi: I "clic" che svolgi ora verranno tradotti nel solito touchstart, touchend e altri eventi. Suggerimento: ascolta rapidamente gli eventi tattili utilizzando monitorEvents (finestra, "touchstart"); nel consolle pannello.
Indipendentemente dal dispositivo preselezionato, sono disponibili altre opzioni di emulazione che possono essere abilitate. Il riquadro Sensori nel pannello Emulazione contiene un accelerometro in tempo reale che può essere trascinato in giro.
È possibile personalizzare la latitudine e la longitudine segnalate che si trovano anche nel riquadro Sensori, utile quando la pagina Web ispezionata fa uso di navigator.geolocation metodi.
Per ulteriori informazioni sulle opzioni di emulazione disponibili in DevTools, consultare la documentazione di emulazione mobile ufficiale.
Canvas Inspection in DevTools è attualmente una funzione sperimentale. Abilitarlo a DevTools> Impostazioni> Esperimenti. Canvas Inspection è essenzialmente un tipo di profilo, quindi lo troverai sotto Profili riquadro dove può essere abilitato.
Il profiler canvas raccoglie le istruzioni inviate alla tela stessa e ti consente di scorrere ciascuna di esse mentre visualizzi gli attuali stati delle proprietà del canvas e una rappresentazione visiva della tela in un determinato punto nel tempo.
Una volta che un profilo è stato registrato, è possibile esplorare le voci di primo livello (disegnare gruppi di chiamata) e scoprire le chiamate individuali (ctx.drawImageper esempio). A destra di ogni chiamata di pareggio, prendere nota del File: LineNumber riferimento, facendo clic su questo si naviga verso fonti Pannello con la riga di codice pertinente selezionata. Puoi usare la barra degli strumenti:
... per navigare facilmente tra le singole chiamate di disegno o i successivi gruppi di chiamata di disegni. Il menu a tendina consente di specificare quale contesto di canvas controllare le proprietà di, se ne esiste più di uno.
Una guida più dettagliata, vedi: Canvas Inspection usando Chrome DevTools su HTML5Rocks.
DevTools for Mobile - Chrome Dev Summit 2013 di Paul Irish.
C'è anche The Breakpoint Ep. 6: Accelerazione del tempo di caricamento, del tempo di esecuzione e degli strumenti JS che ha una forte enfasi sulle prestazioni, è vecchio di un anno, ma vale comunque la pena guardare.
Per quelli con pagine a scorrimento lento su cellulare, checkout: The Breakpoint Ep. 7: creazione di profili di un sito per dispositivi mobili con Chrome DevTools con Paul Irish e John McCutchan
Un bel episodio di breakpoint sulla profilazione della memoria: Ep. 8: Memory Profiling con Chrome DevTools, l'episodio presenta Loreena Lee e John McCutchan.
Addy Osmani ha creato un video di produttività DevTools: migliorare la produttività 2013 con Chrome DevTools.
Paul Irish mette in mostra una serie di funzionalità precedentemente sperimentali in DevTools.
Alcuni digest di DevTools sono stati pubblicati su HTML5 Rocks, ci sono le edizioni di novembre e dicembre e l'ultima è l'edizione di Chrome 33.
Remy Sharp condivide le sue conoscenze per il rendering delle prestazioni con il pannello Timeline.
Paul Lewis e Addy Osmani hanno recentemente scritto un articolo estremamente dettagliato per Smashing Magazine intitolato: Gone In 60 Frames Per Second: un case study di Pinterest Paint Performance che è bello, in quanto fornisce esempi pratici di prestazioni problematiche.
Avventure in Jank Busting: Parallax, performance e la nuova Home Page di Flickr che è stata pubblicata sul blog di Flickr Engineering è un altro post incredibilmente dettagliato su come le prestazioni scadenti sono state migliorate notevolmente agendo sulle misurazioni del pannello Timeline.
Brian Grinstead condivide il suo DevTools Snippets su GitHub insieme a un post sul blog.
I segreti del Browser Developer Tools di Andi Smith ha una vasta gamma di suggerimenti per DevTools che dovrebbero contribuire a rendere gli sviluppatori più efficienti durante il loro flusso di lavoro di sviluppo.
DevThemez contiene una serie di temi personalizzati che possono essere utilizzati con DevTools.
Cerco di re-twittare / condividere link utili sul mio Twitter e pagine Google+ nel mio profilo qui su Tuts+.
Questo è tutto per ora, grazie per la lettura.
Ti piace quello che hai imparato? Ulteriori informazioni su Chrome DevTools!
Accentsconagua