Perché dovresti iniziare a utilizzare subito gli strumenti per sviluppatori di Chrome

Avere un bel set di strumenti utili per testare il tuo sito web è essenziale per gli sviluppatori. Qual è il posto migliore per tenerli? Nel tuo browser, ovviamente! Il popolare browser Web di Google, Chrome, ha strumenti per sviluppatori integrati. È un insieme di strumenti creati per la creazione e il debug del Web. Gli strumenti per sviluppatori di Chrome (noti come DevTools) offrono agli sviluppatori l'accesso al funzionamento interno del browser web e delle app web.

Utilizzando Chrome DevTools puoi conoscere gli stili utilizzati, la dimensione delle immagini, gli script utilizzati, ecc. Puoi eseguire il debug e sapere quali errori esistono nella pagina. Puoi anche attivare o disattivare gli stili, o cambiarli completamente, per vedere quale effetto ha sul tuo sito web.

È nel tuo browser

Gli strumenti stessi sono facili da raggiungere. Ecco tre modi per aprirli:

1. Nel tuo browser Chrome: seleziona il menu Chrome (le tre barre orizzontali nell'angolo in alto a destra), seleziona Altri strumenti, quindi seleziona Strumenti per sviluppatori.
2. Fare clic con il pulsante destro del mouse su un elemento in qualsiasi pagina e selezionare Ispeziona elemento.
3. Sulla tua tastiera in Windows seleziona ctrl + shift + i. Su Mac seleziona cmnd + opt + i.

Ognuno di questi aprirà la finestra DevTools nella parte inferiore del browser.

Finestra principale

Gli strumenti vengono visualizzati nella parte inferiore dello schermo. Vedrai una finestra principale con menu nella parte superiore ed elementi come visualizzazione predefinita e una finestra secondaria con menu e stili come selezione predefinita.

Gli strumenti sono raggruppati in attività. Ci sono 8 gruppi che includono Elementi, Rete, Sorgenti, Timeline, Profili, Risorse, Audit e Console.

Elementi

Qui puoi vedere la struttura HTML della tua pagina. C'è un interruttore in basso per HTML e Body. Puoi passare il mouse su uno qualsiasi degli elementi per visualizzare informazioni dettagliate su ciascuno di essi.

Puoi cliccare sulle frecce per aprire e chiudere i contenuti degli elementi primari per renderli più facili da leggere. Quindi puoi chiudere il corpo e leggere semplicemente l'intestazione, scegliere l'elemento all'interno dell'intestazione da vedere, ecc. Questo è uno strumento eccellente per visualizzare l'HTML del tuo sito web.

Rete

Questo mostra ogni elemento che verrà caricato, come vengono caricati, il tipo di file, la dimensione del file, il tempo necessario per il caricamento e una sequenza temporale di quando verrà caricato all'interno della sequenza di caricamento della pagina. Questo può essere usato per risolvere problemi di rete come colli di bottiglia nel caricamento delle pagine e richieste errate.

Ad esempio, se vedi molti errori 404, puoi guardare più da vicino per vedere quali sono i problemi. Forse hai cancellato una pagina che riceve ancora molto traffico, o forse qualcuno ha sbagliato a digitare un link.

Fonti

Questo mostra gli script e i frammenti che verranno caricati e da dove provengono.

Sequenza temporale

Questo mostra il tempo di caricamento di ciascuna risorsa. Puoi vedere cosa richiede più tempo, il che aiuta a ridurre il caricamento della pagina.

Profili

Questo mostra l'utilizzo della memoria di ciascun elemento. Questo è ottimo per mostrarti quale codice deve essere ottimizzato.

risorse

Qui puoi ispezionare le risorse caricate. Puoi guardare i cookie, la cache dell'applicazione, i database HTML5, ecc.

Audit

Questo ti permette di analizzare la pagina. È possibile eseguire l'audit dopo che è stato caricato o durante il caricamento.

Verifica stato attuale

Per prima cosa, ho scelto di eseguire Audit Present State. Questo esegue l'audit mentre il sito si trova attualmente, già caricato nel mio browser.

Mi dà un elenco di elementi, li colora in base alla loro importanza e mostra il numero di problemi. Posso vedere più dettagli facendo clic su di essi.

Ne ho espansi diversi per visualizzare le informazioni dettagliate su ciascuno di essi. Mi fornisce informazioni sull'utilizzo della rete e sulle prestazioni delle pagine Web. Mi dà consigli su come risolvere i problemi e mi dà la priorità.

Ricarica pagina e verifica al caricamento

Sono tornato indietro e ho selezionato per l'audit al carico. I risultati sono simili, ma come previsto ci sono più problemi durante il caricamento della pagina che dopo che la pagina è stata caricata.

Tra i due ottengo informazioni su JavaScript, memorizzazione nella cache del browser, memorizzazione nella cache del proxy, dimensione dei cookie, offerta di contenuti da un dominio senza cookie, dimensioni dell'immagine, ordine e stili degli script, posizionamento di CSS nell'intestazione del documento, rimozione di rile CSS inutilizzati e utilizzo di CSS normale nomi di proprietà. Ovviamente i risultati variano a seconda del sito.

Le informazioni non sono dettagliate come PageSpeed ​​Insights, ma sono sufficienti per iniziare e mi piace la comodità di essere integrate nello strumento che sto utilizzando comunque. Ti consiglio di eseguirlo ogni volta che apporti una modifica al tuo sito. È troppo facile da usare per non usarlo.

Console

Questa è la console JavaScript in cui puoi testare pagine e app. Puoi eseguire il debug dei tuoi script e ottenere consigli su quali modifiche apportare. La Console ti consente di inserire comandi in modo da poter interagire con la tua pagina web. Registrerà le informazioni di diagnostica per aiutarti con il debug. Puoi usarlo nella schermata principale o nel drawer (la finestra sotto la schermata principale).

Puoi utilizzare le API della console o della riga di comando. Puoi scrivere sulla console, formattare i tuoi elementi e stili di output, misurare il tempo di esecuzione o caricamento, visualizzare e contrassegnare la timeline, contare le istruzioni, impostare punti di interruzione, valutare espressioni, monitorare eventi, impilare messaggi, vedere errori e avvisi e molto altro di più.

Questo è uno strumento potente, ma c'è molto da usare. Fortunatamente viene fornito un buon materiale di riferimento con esempi su come usarlo.

Debug

Selezionando ctrl + p in Windows, o cmd + p su Mac, si aprirà la schermata di debug in cui è possibile selezionare gli script di cui eseguire il debug. Questo strumento ti offre le funzionalità di debug che ti aspetteresti di vedere in qualsiasi ambiente di programmazione: pausa, continua, entra, supera, punti di interruzione, codice formattato, ecc.

Vengono forniti file della guida dettagliati per guidare l'utente nell'utilizzo della modalità di debug.

Finestra Stili CSS

La casella all'estrema destra contiene tutte le informazioni CSS. Quando selezioni un elemento, la finestra Stili a destra mostra le informazioni sugli stili per l'elemento. Questa sezione è interessante. Esistono cinque gruppi di strumenti: Stili, Calcolato, Listener di eventi, Breakpoint DOM e Proprietà.

Stili

È possibile selezionare gli stili e modificarli manualmente in questa finestra. Ad esempio, è possibile selezionare la dimensione e il colore del carattere.

Seleziona la dimensione del carattere e inserisci la tua dimensione. Quando lo fai, la dimensione del carattere del carattere selezionato cambierà sullo schermo.

Effettuando la selezione su un colore del carattere si aprirà il selettore di colori. Seleziona il colore che desideri e premi invio. Vedrai il carattere che hai selezionato cambiare nel nuovo colore. Questo è un ottimo modo per provare nuovi stili di carattere, dimensioni e colori.

Se clicchi su site.CSS a destra si aprirà una finestra più grande con le informazioni in dettaglio. Qui puoi digitare il nome del carattere che desideri utilizzare, specificare un colore, specificare una dimensione, ecc.

calcolato

Questo mostra le dimensioni della casella in pixel. Ha padding, bordo e margine.

Modalità dispositivo

C'è un piccolo pulsante a sinistra tra la lente di ingrandimento e il menu Elements che sembra un dispositivo mobile. Indovina un po? È un dispositivo mobile. Questa è la modalità di emulazione del dispositivo. Questo è un ottimo modo per vedere quanto è reattivo il tuo sito.

Dispositivo

Ciò che è ancora più interessante del semplice essere un dispositivo mobile è che puoi scegliere quale dispositivo mobile è e quindi puoi vedere il sito Web come se lo stessi guardando su quel dispositivo. Ora, è fantastico!

Ho selezionato Amazon Kindle Fire HDX 7 "e lo schermo ha imitato quel dispositivo in modo da poter vedere come sarebbe stato il sito sul suo schermo e come avrebbe funzionato il tocco.

È possibile modificare l'orientamento dello schermo premendo il pulsante Scambia dimensioni.

Questo è un ottimo modo per vedere come appare il tuo sito WordPress sullo schermo mobile più piccolo. Ho scelto iPhone 6 e le dimensioni dello schermo sono cambiate per adattarsi alle nuove dimensioni e risoluzione dello schermo. Ci sono molti dispositivi da visualizzare. Puoi anche vedere una dimensione personalizzata trascinando i lati per aumentare o diminuire la dimensione.

Rete

C'è anche una selezione per scegliere il tipo di rete attraverso la quale si accede al sito. Ciò ti consente di vedere le prestazioni del tuo sito Web attraverso vari tipi e velocità di connessione. Puoi testare diverse velocità da 50 Kbps GPRS a 30 Mbps WiFi e diverse velocità di connessione 2G, 3G e 4G. Questo è un modo eccellente per testare la velocità del tuo sito web attraverso reti cariate e ottenere approfondimenti su cosa migliorare.

Media query

C'è un piccolo pulsante in alto a sinistra che sembra gradini. Apre un'altra sezione dello schermo sopra la finestra del sito Web che mostra diverse larghezze di pixel. Facendo clic su di essi, lo schermo del cellulare raggiunge quelle dimensioni. Ti mostrano:

• Query mirate a una larghezza massima
• Larghezze all'interno di un intervallo
• Query che hanno come target una larghezza minima

Questo ti aiuta a regolare gli stili e i contenuti multimediali per un design completamente reattivo.

Il cassetto

C'è un'altra sezione di strumenti sotto la schermata principale chiamata cassetto. Questo aggiunge:

Console : questa è la stessa console della finestra principale. Posizionandolo qui puoi usarlo insieme a qualsiasi strumento nella finestra principale.

Cerca : consente di cercare le fonti.

Emulazione : puoi scegliere Dispositivo (qui puoi scegliere il modello, la risoluzione, la rete, ecc.), Media, Rete (throughput e agente utente) e Sensori (touchscreen, accelerometri, ecc.).

Rendering : mostra rettangoli di vernice, bordi dei livelli composti, misuratore FPS, ridisegnatura continua della pagina e potenziali colli di bottiglia di scorrimento.

Impostazioni e altro

La barra dei menu a destra ti dirà il numero di errori e avvisi sul tuo sito, ti permetterà di nascondere il cassetto in basso, di regolare le impostazioni e di agganciare lo strumento alla finestra principale (creando uno schermo diviso tra il tuo sito web e i DevTools).

C'è una grande quantità di impostazioni che puoi regolare in modo da poter modificare gli strumenti per lavorare nel modo in cui ne hai bisogno.

Chrome Canary

Se vuoi davvero essere all'avanguardia dei Chrome DevTools di Google, prova Chrome Canary. La sua icona è gialla. Prendilo? Ha bisogno di un mantello. È l'ultimo e il migliore di Google. È progettato per gli sviluppatori e dispone dell'ultima versione di DevTools. Non è ancora abbastanza stabile per un uso generale, quindi probabilmente romperà il tuo sistema.

Se sei incline a causare gravi danni al tuo ambiente quando il tuo sistema si rompe, guarda l'icona Chrome Canary nell'immagine sopra e non lampeggiare per cinque secondi.

Ora puoi passare alla fine. Non ricorderai questa parte.

Avvolgendo

Gli strumenti per sviluppatori di Google Chrome sono un ottimo strumento per la risoluzione dei problemi, il miglioramento delle prestazioni della rete, la visualizzazione del tuo sito su schermi di diverse dimensioni e risoluzioni e per ottenere informazioni su dove il tuo sito necessita di miglioramenti. Ci sono molte funzionalità e puoi aggiungerne ancora di più tramite le estensioni. Questi strumenti da soli sono un ottimo motivo per installare Google Chrome, anche se non è il tuo browser principale. Prendersi del tempo per imparare le funzionalità pagherà e il tuo sito e i visitatori ti ringrazieranno per questo.

Il tuo turno! Utilizzi gli strumenti per sviluppatori di Chrome? Ho tralasciato la tua caratteristica preferita? Hai qualcosa da aggiungere? Mi piacerebbe sentirlo nei commenti qui sotto!

Immagine in miniatura dell'articolo di Anikei / shutterstock.com