Come accedere e utilizzare gli strumenti per sviluppatori di Chrome

Gli Strumenti per sviluppatori di Chrome (DevTools) sembrano essenziali una volta che ci si abitua, ma all’inizio possono risultare un po’ complicati. Soprattutto se si cerca di curiosare nel codice di un sito web o di risolvere problemi senza alcuna esperienza di programmazione. A volte, le cose non funzionano come previsto: magari gli elementi non mostrano lo stile corretto o la pagina si carica molto lentamente. E, naturalmente, è frustrante non riuscire a capire come aprirli senza dover esplorare i menu con un clic all’infinito. Fortunatamente, esistono alcuni metodi collaudati per aprire e utilizzare DevTools, quindi non si è costretti a armeggiare ogni volta.

Come aprire gli Strumenti per sviluppatori di Chrome: in modo rapido e semplice

Utilizzo delle scorciatoie da tastiera

Questo è probabilmente il modo più veloce, soprattutto se sei abituato ai comandi da tastiera. Su Windows o Linux, premi semplicemente Ctrl + Shift + Cper aprire la scheda Elementi e iniziare a ispezionare il contenuto. Se vuoi passare direttamente al registro della console, premi Ctrl + Shift + J. E per un rapido passaggio generale, Ctrl + Shift + Ipremi semplicemente F12. Su Mac? È praticamente lo stesso, ma scambia Ctrlcon Commande Shiftcon Option. Ad esempio, Command + Option + Capre Elementi. A volte, questo non funziona al primo tentativo, soprattutto se Chrome è ostinato o se stai usando un layout di tastiera strano: riprova o riavvia Chrome se necessario.

Onestamente, queste scorciatoie sono una vera salvezza: è un po’ strano che non siano più evidenti, ma una volta memorizzate, sono più veloci che cliccare sui menu.

Utilizzo del menu Chrome: nessuna scorciatoia necessaria

Meno subdolo, ma altrettanto utile, è cliccare con il tasto destro del mouse su un elemento qualsiasi di una pagina web e scegliere “Ispeziona”. Invece di dover scorrere i menu, si apre immediatamente DevTools ed evidenzia l’elemento nella scheda Elementi. In alternativa, clicca sul menu a tre puntini nell’angolo in alto a destra di Chrome, vai su ” Altri strumenti”, quindi seleziona “Strumenti per sviluppatori “.Questo metodo è utile se non ti piacciono le scorciatoie o vuoi risparmiare un po’ di tempo cliccando qua e là.

Se Chrome non si apre immediatamente o gli strumenti per sviluppatori non mostrano ciò che ti aspetti, verifica che il tuo browser Chrome sia aggiornato. A volte, bug o versioni obsolete possono interferire con il corretto funzionamento degli strumenti per sviluppatori.

Come sfruttare al meglio Chrome DevTools

Molti sviluppatori e persone un po’ curiose usano DevTools per una vasta gamma di attività: ispezionare il codice HTML delle pagine, eseguire il debug di JavaScript, controllare le richieste di rete o persino testare l’aspetto delle loro pagine su diversi dispositivi. Ma tieni presente: qualsiasi modifica apportata è solo temporanea. Ricarica la pagina e tutto verrà ripristinato. Tuttavia, è molto utile per provare soluzioni rapide o vedere cosa non va prima di modificare il codice base vero e proprio.

È utile familiarizzare con le schede principali:

• Elementi : visualizza e modifica in tempo reale l’HTML/CSS della pagina. Utile per modificare rapidamente gli stili o scoprire perché qualcosa sembra strano.
• Console : esegui frammenti di codice JavaScript, visualizza messaggi di errore o esegui il debug degli script. Utile se JavaScript non funziona correttamente o se vuoi provare soluzioni rapide.
• Rete : monitora tutte le richieste di rete (immagini, script, font, ecc.) e verifica quanto tempo impiegano. Ottimo per individuare risorse a caricamento lento o richieste non necessarie.
• Prestazioni : registra il caricamento della pagina e individua i colli di bottiglia. Perché, ovviamente, Chrome deve renderlo più difficile del necessario.
• Lighthouse : esegui audit per SEO, prestazioni, accessibilità e best practice. Una sorta di controllo dello stato di salute del tuo sito web, senza bisogno di plugin aggiuntivi.

Prova i test di progettazione reattiva

Vuoi vedere come appare il tuo sito su smartphone o tablet? Fai clic sul pulsante di attivazione/disattivazione del dispositivo (la piccola icona dello smartphone) in DevTools, oppure premi Ctrl + Shift + M. Puoi selezionare dispositivi preimpostati da un menu a discesa, come iPhone o Pixel, oppure impostare dimensioni personalizzate per testare schermi di dimensioni insolite. Di solito, questo aiuta a individuare problemi di layout che potrebbero sfuggire su un monitor di grandi dimensioni.

Controlla la velocità e le richieste del tuo sito

Ti sei mai chiesto perché il tuo sito sembra lento? Vai alla scheda Rete, aggiorna la pagina e vedrai tutte le richieste effettuate per caricarla. Guarda in basso: DOMContentLoaded e Tempi di caricamento indicano quanto tempo ci è voluto per caricare l’HTML rispetto a tutto il resto. Se questi tempi sono elevati, forse alcune immagini sono troppo grandi o il tuo hosting è lento. Puoi anche simulare connessioni più lente dal menu a discesa “Throttling”, utile se vuoi vedere come funziona su dispositivi di fascia media.

Che ne dici di SEO e audit di base?

Un altro strumento a tua disposizione è Lighthouse, accessibile tramite il menu (icona a doppia freccia > Lighthouse ).Esegui un rapido audit SEO, un controllo delle prestazioni o una revisione delle best practice.È un po’ come fornire un report sullo stato di salute del tuo sito web. Modifica le impostazioni in base al dispositivo di destinazione, scegli categorie come SEO ed esegui l’audit. I risultati richiedono in genere circa 30 secondi, ma possono fornire utili indicazioni su come correggere i meta tag, la struttura dei contenuti o i problemi di caricamento.

Consiglio: la documentazione di Chrome ([qui](https://developer.chrome.com/docs/devtools/)) è piuttosto dettagliata se vuoi andare oltre le basi.

Nel complesso, una volta acquisita familiarità con queste opzioni, usare DevTools diventa una seconda natura. Non è perfetto – a volte è lento o pieno di bug – ma in definitiva è il modo più veloce per risolvere i problemi e migliorare il tuo sito web senza dover aspettare gli sviluppatori o scrivere codice da zero.

Riepilogo

• Le scorciatoie da tastiera — Ctrl + Shift + C, Ctrl + Shift + J, e F12— sono metodi rapidi per aprire DevTools.
• Fare clic con il pulsante destro del mouse e ispezionare è un modo semplice per controllare rapidamente gli elementi.
• Le schede principali come Elementi, Console, Rete e Lighthouse sono le tue migliori amiche per la risoluzione dei problemi.
• La funzione di attivazione/disattivazione del dispositivo ti aiuta a vedere come appare il tuo sito su schermi diversi.
• La scheda Rete rivela le risorse lente e aiuta a ottimizzare i tempi di caricamento.

Incartare

Prendere confidenza con gli Strumenti per sviluppatori di Chrome apre molte possibilità, sia per il debug che semplicemente per capire come sono costruiti i siti. All’inizio potrebbe essere un po’ macchinoso, soprattutto su alcune configurazioni, ma una volta che ci si abitua, fa risparmiare un sacco di tempo. E poi, se un po’ di pratica risparmia ore di frustrazione, ne vale assolutamente la pena. Incrociamo le dita affinché questo aiuti qualcuno a iniziare senza troppi problemi.