Come utilizzare gli strumenti per sviluppatori di Chrome per migliorare il tuo sito Web WordPress

Chrome Developer Tools (DevTools) è un fantastico set di strumenti di creazione e debug del Web per Google Chrome. I DevTools forniscono l'accesso agli elementi che creano pagine web. Puoi utilizzare DevTools per risolvere i problemi con il layout, guardare e modificare CSS, impostare punti di interruzione JavaScript, ispezionare il codice per l'ottimizzazione e molto altro. I DevTools sono gratuiti e già integrati nel tuo browser Chrome. Quindi, se hai Chrome, li hai già.

In questo articolo otterremo una panoramica di quali sono gli strumenti e come utilizzarli per migliorare il tuo sito Web WordPress.

Apertura degli strumenti

Esistono diversi modi per aprire gli strumenti:

1. Seleziona il menu Chrome, scegli Strumenti, quindi scegli Strumenti per sviluppatori.
2. Fare clic con il pulsante destro del mouse su qualsiasi elemento dello schermo e selezionare Ispeziona elemento (il mio metodo preferito).
3. Ctrl + Maiusc + I (per PC) | Cmd + Opt + I (per Mac)

La finestra di DevTools

La finestra degli strumenti contiene due pannelli. Entrambi contengono strumenti che possono essere utilizzati insieme. Ecco uno sguardo agli strumenti.

Il primo contiene 8 gruppi di strumenti. Gli strumenti includono:

• Elementi
• Rete
• Fonti
• Sequenza temporale
• Profili
• Risorse
• Audit
• Console

La seconda sezione contiene:

• Stili
• Calcolato
• Ascoltatori di eventi
• Punti di interruzione DOM (Document Object Model).
• Proprietà

Esistono diversi modi per visualizzare gli strumenti. Puoi ridimensionare le finestre per fare spazio. Puoi anche spostare le finestre a destra dello schermo per avere uno schermo diviso con gli strumenti da un lato e il tuo sito web dall'altro.

Elementi

Questo pannello ti mostra l'albero DOM, che rappresenta gli elementi HTML della tua pagina, e ti permette di ispezionare o modificare qualsiasi elemento. Puoi vedere le regolazioni CSS in tempo reale.

Puoi aprire e comprimere qualsiasi pannello per semplificare la visualizzazione e la navigazione facendo clic sui nodi (sembrano frecce o triangoli). La visualizzazione ad albero DOM mostra lo stato corrente dell'albero anziché l'HTML originale (ad esempio, potrebbe essere stato modificato da JavaScript).

Quando passi il mouse su un elemento nella visualizzazione ad albero, l'elemento sulla pagina web verrà evidenziato. Ti mostrerà informazioni come lo stile del carattere, la dimensione dell'immagine, ecc.

Se fai clic su uno degli elementi, la finestra a destra mostrerà il CSS. Qui puoi selezionare gli stili e apportare modifiche a caratteri, colori, dimensioni, margini, bordi, spaziatura interna, ecc.

Nel footer vedrai i breadcrumb in modo da poter tornare indietro se necessario. Puoi modificare qualsiasi elemento semplicemente facendo clic su di essi e digitando le modifiche. Quando premi Invio vedrai che le modifiche hanno luogo.

Ad esempio, questa immagine è attualmente larga 600 pixel. Posso selezionare la larghezza e digitare un nuovo valore e premere invio.

L'immagine cambia immediatamente alla nuova dimensione.

Per modificare lo stile del carattere, seleziona il carattere e seleziona ciò che desideri modificare nella finestra degli stili a destra.

Puoi persino trascinare gli elementi in giro e rilasciarli in nuove posizioni per cambiare il layout della tua pagina.

Sto spostando i commenti recenti sopra i post recenti semplicemente trascinando il div.

Fare clic con il pulsante destro del mouse ti offre un nuovo set di funzionalità. Puoi vedere vari stati degli elementi, modificare come HTML, impostare interruzioni, copiare il percorso CSS e molto altro. Puoi anche fare clic con il pulsante destro del mouse ed eliminare un nodo. È così facile che fa quasi paura.

Ho usato questo strumento per trovare le dimensioni delle immagini e per ispezionare frammenti di codice.

Rete

Il pannello Rete mostra quali risorse del tuo sito web vengono richieste e scaricate. È rappresentato graficamente in tempo reale. Vedere quali elementi impiegano più tempo per essere scaricati ti dà informazioni su quali problemi risolvere per ottimizzare la tua pagina.

Puoi filtrare e mostrare diverse visualizzazioni e tipi di grafici, ad esempio a cascata. È possibile registrare l'attività di rete e salvarla in modo da poterla analizzare in seguito.

È possibile visualizzare i dettagli delle risorse. I dettagli includono:

• Intestazioni della richiesta e della risposta HTTP: visualizza l'URL della richiesta, il metodo HTTP, i codici di stato della risposta ed elenca la risposta HTTP e le intestazioni della richiesta con i relativi valori e i parametri della stringa di query.
• Anteprima risorse: mostra un'anteprima per le risorse immagine e JSON.
• Risposta HTTP: mostra il contenuto non formattato della risorsa.
• Nomi e valori dei cookie: mostra i cookie che vengono trasmessi nelle intestazioni di richiesta e risposta HTTP della risorsa e cancella i cookie.
• Messaggi WebSocket: mostra i messaggi inviati o ricevuti tramite una connessione WebSocket.
• Temporizzazione della rete delle risorse: mostra un grafico del tempo impiegato nelle fasi della rete coinvolte nel caricamento della risorsa.

La vista a cascata è un ottimo modo per vedere il tempo impiegato da ciascun elemento per caricare dall'inizio della richiesta fino alla consegna dell'ultimo byte dell'elemento. Vedendo quali elementi richiedono più tempo puoi avere una migliore comprensione di dove apportare modifiche.

È possibile salvare i dati di rete per analisi future.

Fonti

Puoi utilizzare il pannello dei sorgenti per vedere ed eseguire il debug del tuo codice come JavaScript e script che fanno parte della pagina caricata. Puoi mettere in pausa, riprendere, scorrere il codice e mettere in pausa le eccezioni. Include le funzionalità di base per l'esecuzione del codice in modo da poter scavalcare, entrare, uscire e attivare/disattivare i punti di interruzione. Puoi utilizzare i punti di interruzione per eseguire il debug di JavaScript, aggiornamenti DOM e chiamate di rete. Puoi anche impostare punti di interruzione condizionali in cui qualsiasi espressione potrebbe restituire come true o false. Il punto di interruzione metterà quindi in pausa il codice se la condizione è soddisfatta.

C'è una bella funzione di stampa che semplifica la lettura del codice ridotto. Questo rende anche più facile vedere dove posizionare i punti di interruzione. Se questo non funziona come ti serve, puoi utilizzare un formato di mappatura basato su JSON chiamato mappa di origine. Le mappe di origine vengono create da un minificatore che ha questa funzione integrata.

Sequenza temporale

Il pannello Timeline mostra dove viene speso il tempo per il caricamento e l'utilizzo della pagina. Dipingerà e disegnerà ogni evento sulla timeline. Mostrerà risorse come JavaScript, calcolo degli stili e ridisegno. È possibile registrare gli eventi e analizzarli gradualmente. Ci sono tre modalità:

• Eventi: un elenco di tutti gli eventi organizzati per tipo. Questo ti mostra quali attività richiedono più tempo.
• Frame: mostra il lavoro che deve essere svolto in ogni frame delle prestazioni di rendering del tuo sito web. Ad esempio, se il tuo sito esegue il rendering a 60 fotogrammi al secondo, ti mostrerà il lavoro svolto in 1/60 di secondo. Ciò include il caricamento di script, la pittura del layout, la gestione degli eventi, ecc. Puoi usarlo per visualizzare qualsiasi attività anomala nel caricamento della pagina.
• Memoria: rappresenta un grafico dell'utilizzo della memoria nel tempo. Ti mostra tutti i documenti, i nodi e i listener di eventi che sono tenuti in memoria. Questo aiuta a capire cosa sta causando perdite di memoria.

Profili

Qui puoi profilare il tempo di esecuzione e l'utilizzo della memoria di pagine Web e app. Questo ti mostra dove vengono utilizzate le risorse. Questo è un buon strumento per ottimizzare il tuo codice.

Registrerà tre tipi di profilo:

• Raccogli profilo CPU JavaScript: mostra il tempo di esecuzione delle tue funzioni JavaScript.
• Take Heap Snapshot: mostra l'utilizzo della memoria e la distribuzione dei tuoi oggetti JavaScript.
• Registra allocazioni dell'heap: registra le allocazioni degli oggetti per mostrare le perdite di memoria nel tempo.

Risorse

È possibile utilizzare questo pannello per ispezionare le risorse. Ti mostrerà informazioni su IndexedDB, database SQL Web, cookie della cache delle app, archiviazione locale e di sessione e altro ancora. Puoi anche ispezionare le tue risorse visive, come font, immagini e fogli di stile.

La scheda IndexedDB consente di ispezionare i database IndexedDB e gli archivi di oggetti e visualizzare ed eliminare i record.

È possibile eseguire comandi SQL e visualizzare i risultati in formato tabellare. Durante la digitazione dei comandi, verranno forniti suggerimenti per i nomi delle tabelle, i comandi e le clausole.

La scheda cookie mostra informazioni sui cookie creati da HTTP o JavaScript. Puoi eliminarli singolarmente o in gruppi.

Chrome memorizza nella cache le risorse dell'applicazione. La scheda della cache dell'applicazione consente di visualizzare lo stato di tali risorse. Ti mostrerà anche l'URL della risorsa, il tipo di risorsa e le sue dimensioni.

Il locale e la sessione Il pannello di archiviazione consente di visualizzare, creare, eliminare e modificare le coppie chiave/valore di archiviazione locale e di sessione che stavano creando con l'API di archiviazione.

Audit

Il pannello di controllo analizza la pagina durante il caricamento e suggerisce correzioni per ottimizzare il caricamento della pagina. Ha due controlli che separano le informazioni in due categorie: utilizzo della rete e prestazioni della pagina web. Puoi eseguire entrambi gli audit o solo quello che desideri. È possibile eseguire gli audit nello stato attuale della pagina o ricaricare la pagina e eseguire l'audit al caricamento.

Non entra nei dettagli di Google PageSpeed ​​Insights, ma ti fornisce informazioni sufficienti per riparare il frutto a bassa quota. Dopo aver esaminato PageSpeed ​​Insights, la mia pagina era in condizioni decenti, ma mi ha fornito alcune informazioni sul mio sito che Insights non ha fornito.

Console

La console viene utilizzata per il debug. Puoi registrare la diagnostica, inserire comandi, valutare JavaScript, creare profili JavaScript, ecc. Puoi scrivere informazioni sulla console tramite la riga di comando. Utilizzando la riga di comando è possibile utilizzare le funzioni per selezionare e ispezionare gli elementi nel DOM, monitorare gli eventi e arrestare e avviare il profiler.

Modalità dispositivo

Una delle mie funzionalità preferite è la Modalità dispositivo. Puoi accedervi con il piccolo pulsante a sinistra di Elementi nel menu. La Modalità dispositivo ti consente di scegliere tra 23 diversi dispositivi mobili popolari (Kindle Fire, diversi iPhone, diversi Galaxies, laptop, ecc.) e vedere come appare e come reagisce il tuo sito web su quel dispositivo.

Puoi anche trascinare lo schermo per creare la tua dimensione dello schermo personalizzata. Il cursore imita la punta del dito in modo che lo schermo reagisca con il mouse proprio come farebbe con il dito. Puoi anche creare i tuoi dispositivi personalizzati nella schermata delle impostazioni.

Puoi anche scegliere il tipo di rete (3G, 4G, Wi-Fi, ecc.) in modo da poter analizzare l'aspetto e la reazione del sito sulle diverse reti e velocità.

Cassetto

Nella parte inferiore dello schermo troverai il cassetto. Questo può essere attivato o disattivato con il pulsante >_ sul lato destro della barra degli strumenti. Il cassetto contiene:

• Console: la riga di comando della console. Ciò rende la console disponibile quando si utilizzano altri pannelli.
• Cerca: trova qualsiasi fonte. Puoi scegliere di ignorare maiuscole e minuscole e cercare le espressioni regolari.
• Emulazione: strumenti e impostazioni per la modalità dispositivo. Include funzionalità come l'accelerometro e le coordinate di geolocalizzazione.
• Rendering: mostra le funzionalità di rendering come fps meter, bordi stratificati compositi, ecc. La parte migliore di questo è che mostrerà potenziali colli di bottiglia.

È utile avere questi strumenti nel cassetto perché alcuni dei pannelli non includono l'accesso a questi strumenti.

Pensieri finali

Chrome Developer Tools (DevTools) è un fantastico set di strumenti di creazione e debug del Web per aiutarti a migliorare il tuo sito web. Puoi trascinare e rilasciare rapidamente gli elementi per modificare il layout del tuo sito, risolvere le perdite di memoria, risolvere i problemi di caricamento delle pagine, visualizzare il tuo sito Web praticamente su qualsiasi dispositivo mobile e dimensione dello schermo e molto altro. Questa panoramica sta solo scalfindo la superficie di quanto siano potenti questi strumenti. La cosa migliore è che è già integrato in Google Chrome, quindi non devi scaricare nulla.

Mi piacerebbe avere tue notizie. Utilizzi gli Strumenti per sviluppatori di Chrome? Quali sono le tue caratteristiche preferite? Cosa usi di più? Hai qualche consiglio sull'uso degli strumenti? Raccontacelo nei commenti.