10 suggerimenti per la console di Chrome che devi sapere

Il test di un sito Web o di un'applicazione Web e della relativa interfaccia utente può essere complicato e richiedere molto tempo, soprattutto se non utilizzi strumenti di debug appropriati come la console Chrome, nota anche come strumenti per sviluppatori di Chrome.

Quasi tutti i browser Web ora supportano gli strumenti di sviluppo, ma Google sembra essere più determinato nel fornire l'ambiente migliore per un rapido processo di debug.

Google ha davvero lavorato duramente per rendere Chrome DevTools il più adatto agli sviluppatori possibile. Tanto che la domanda non è più cosa puoi fare utilizzando questi strumenti per sviluppatori integrati direttamente nel browser Google Chrome. Ora è una questione di quanto sai della console Chrome.

Esistono funzionalità specifiche della console Chrome che tendono ad affascinare ogni sviluppatore. Alcuni credono che sia il miglior strumento per sviluppatori per cercare come viene realizzata una parte di un sito Web, inclusi script e stili. Altri sviluppatori lo trovano più utile per tenere traccia di tag di collegamento, rendering del browser, richieste e risposte HTTP, punti di interruzione di pagina, test di nuove funzionalità o script, ecc.

Questo articolo graffierà a malapena la superficie di ciò che può essere fatto con la Console. Per una panoramica completa delle funzionalità e del manuale, vai alla pagina ufficiale degli sviluppatori di Google.

Come aprire la console Chrome

Il mezzo convenzionale per accedere a Chrome DevTools è fare clic sul pulsante Personalizza e controlla Google Chrome (i tre punti verticali nell'angolo in alto a destra della barra dei menu del browser Chrome), scorrere verso il basso fino a più strumenti e selezionare gli strumenti per sviluppatori .

Scorciatoia da tastiera: Ctrl + Maiusc + I per Windows e Cmd + Opzioni + I per Macintosh.

In alternativa, puoi accedere alla console Chrome facendo clic con il pulsante destro del mouse su qualsiasi elemento di un sito Web e selezionando l'opzione Ispeziona elemento.

Il pannello della console di Chrome apparirà sul lato o nella parte inferiore della finestra del browser se utilizzi uno dei metodi sopra menzionati. Puoi sbloccare il pannello della console di Chrome in una finestra separata o modificare la posizione del dock facendo clic sul pulsante Personalizza e controlla Devtools (i tre punti verticali nell'angolo in alto a destra del pannello DevTools) e selezionando la tua posizione preferita accanto all'opzione laterale Dock .

10 suggerimenti per Chrome Console che ogni sviluppatore dovrebbe conoscere

1. Simula dispositivi mobili

Uno degli aspetti più importanti del test del sito Web è accertare quanto siano reattivi i design della tua pagina e i loro punti di rottura rispetto ai diversi dispositivi. Puoi utilizzare Chrome DevTools per testare le query multimediali o scoprire la risoluzione alla quale un sito Web si interromperebbe in modo da poter impostare dove applicare una query multimediale simulando diversi dispositivi mobili.

Per accedere alla modalità dispositivo della console Chrome, in cui puoi simulare diversi dispositivi mobili, fai clic sulla barra degli strumenti del dispositivo di attivazione/disattivazione (l'icona del piccolo telefono e tablet) nell'angolo in alto a sinistra del pannello della console di Chrome. Ciò cambierebbe la finestra del sito Web in modalità reattiva.

Scorciatoia da tastiera: Ctrl + Maiusc + M (Cmd + Maiusc + M).

Un insieme di strumenti che apparirebbero nella finestra del sito web ti consentirebbe di scegliere i dispositivi e la risoluzione che desideri simulare e di aggiungere dispositivi mobili non disponibili nell'elenco.

2. Ispezionare l'attività di rete

Utilizzando la console Chrome, puoi controllare l'attività di rete di un sito web per assicurarti che tutte le risorse vengano scaricate e caricate in modo accurato. E anche per ispezionare le proprietà di ciascuna risorsa, come la dimensione dell'immagine, il contenuto, le intestazioni HTTP, ecc.

Fare clic sulla scheda di rete nella finestra DevTools. Questo aprirà il pannello di rete con un registro vuoto perché lo strumento registra l'attività di rete solo mentre è aperto. Premi Ctrl + R (Cmd + R) o ricarica il sito Web per visualizzare l'attività del registro di rete della tua pagina.

Dovresti vedere una tabella in fondo alla pagina che mostra un registro cronologico dell'attività di rete della tua pagina. Per visualizzare maggiori informazioni su ciascuna risorsa, fare clic sulle impostazioni di rete (l'icona a forma di ingranaggio a destra) e selezionare la casella accanto a utilizzare righe di richiesta di icone grandi.

Puoi migliorare le prestazioni di caricamento della pagina eseguendo il debug degli errori nei registri di rete per risolvere problemi come la compressione dei file.

3. Limitazione della rete

Simile alla simulazione del dispositivo mobile, puoi utilizzare la console Chrome per simulare diverse velocità Internet. Questa funzione può essere utile se desideri testare le prestazioni del sito Web a una velocità specifica, ad esempio su un dispositivo mobile 3G.

Nella barra dei menu del pannello Rete, fai clic su in linea (limitazione) e seleziona la velocità Internet di tua scelta. Per aggiungere un profilo di rete personalizzato, fai clic sull'opzione Aggiungi nel menu a discesa e inserisci la velocità di caricamento e scaricamento preferita.

4. Aggiungi uno snippet di script

Puoi aggiungere il tuo codice casuale preferito ovunque tu voglia all'interno del tuo sito web utilizzando la funzione snippet. Invece di dover scrivere lo stesso codice più e più volte, questa funzione ti consentirà di salvare uno snippet e accedere al codice ogni volta che vuoi.

Fare clic sulla scheda sorgenti >> frammenti >> nuovi frammenti. Questo creerà un nuovo file nel riquadro dei frammenti. Rinomina il tuo snippet e scrivi il tuo piccolo blocco di codice JavaScript all'interno della finestra accanto al riquadro. Per salvare lo snippet, fai clic con il pulsante destro del mouse sul file snippet, fai clic su salva con nome e scegli la directory preferita. Puoi anche accedere a questa funzione tramite il menu dei comandi.

Usa Ctrl + Maiusc + P o Cmd + Maiusc + P (Mac) per aprire il menu dei comandi, digita frammenti e fai clic su crea nuovi frammenti .

Usa Ctrl + Invio o Cmd + Invio per eseguire il codice o fai clic sull'icona Esegui snippet sotto la finestra di testo.

5. Cattura screenshot di un sito web

Chrome DevTools ti consente di acquisire schermate di diverse parti di un sito web. Apri il menu dei comandi usando Ctrl + Maiusc + P o Cmd + Maiusc + P (Mac) e digita screenshot . Seleziona il tipo di screenshot che desideri. DevTool eseguirà automaticamente uno screenshot e scaricherà l'immagine come file .png nella directory dei download predefinita.

6. Attiva la modalità di modifica del testo del contenuto

Puoi modificare il contenuto della tua pagina direttamente nella finestra del browser utilizzando la console di Chrome. Fare clic sulla scheda della console e attivare la funzione utilizzando il codice seguente.

document.body.contentEditable = 'vero';

O

document.designMode='on';

Premi il tasto Invio per attivare la funzione.

7. Selettore colore

È più facile manipolare il colore sul tuo sito web usando il selettore colore che ha una gamma di strumenti. Il contagocce ti consente di selezionare i colori direttamente dalle pagine Web e di impostarli sulle proprietà del colore. Puoi regolare la tonalità e l'opacità dei tuoi colori utilizzando il selettore colore e convertire tra RGBA, HEX e HSLA con semplici clic.

Per accedere al selettore colore, seleziona l'elemento di cui vuoi cambiarne il colore. Questo dovrebbe aprire la scheda dell'elemento e il riquadro del foglio di stile a destra. Trova la proprietà CSS dell'elemento e fai clic sulla casella del colore appropriata per aprire il selettore colore.

8. Modifica la proprietà CSS

La console Chrome offre un facile accesso per regolare la proprietà CSS di qualsiasi elemento su un sito web. Fare clic sul pulsante di selezione (Ctrl + Maiusc + C o Cmd + Opzioni + C), posizionare il cursore sull'elemento che si desidera modificare per una panoramica delle proprietà dell'elemento, fare clic sull'elemento.

Questo dovrebbe evidenziare la radice HTML dell'elemento nel riquadro Elemento e le proprietà CSS sul lato destro del pannello DevTools. Vai al riquadro Stili e scorri fino alle proprietà che desideri modificare per le modifiche in tempo reale. Puoi visualizzare le proprietà complete di qualsiasi stile facendo Ctrl + clic (Cmd + clic) sulla proprietà.

9. Punto di rottura di JavaScript

È molto più facile trovare e correggere gli errori JavaScript utilizzando i punti di interruzione rispetto al metodo console.log(). Questo perché, in quest'ultimo metodo, è necessario accedere manualmente al codice sorgente e inserire le istruzioni console.log() nel codice pertinente prima di ricaricare la pagina per rivedere i log. I punti di interruzione non richiedono necessariamente di comprendere la struttura del codice prima di poter mettere in pausa il codice pertinente.

Fare clic sulla scheda Sorgente > pagina e selezionare lo script di cui si desidera eseguire il debug dalla cartella specifica. Puoi impostare punti di interruzione in Chrome DevTools semplicemente facendo clic sul numero di riga in cui vuoi mettere in pausa lo script non appena viene eseguito su quella riga.

In alternativa, puoi utilizzare il listener di eventi nel riquadro del debugger per impostare il punto di interruzione con riferimento all'evento specifico di destinazione nello script, ad esempio il clic del mouse o la riproduzione multimediale. Aggiorna la pagina usando Ctrl + R (Cmd + R) e usa gli strumenti del riquadro del debugger per spostare i passaggi.

10. Memorizza l'elemento HTML come variabile JS globale

Sia che tu stia ispezionando un oggetto complesso registrato sulla console o un elemento DOM su un sito, puoi archiviare automaticamente un riferimento ad essi a livello globale. Questo è molto comodo durante il debug poiché puoi semplicemente ispezionarli come una variabile globale.

Fare clic con il pulsante destro del mouse sull'oggetto nella console o sul blocco HTML di un elemento nella scheda Elemento e selezionare "salva come variabile globale" nel menu a discesa. La console Chrome memorizzerà automaticamente l'elemento come variabile globale e lo renderà disponibile nella console. Il nome della variabile sarà "tempN", dove N rappresenta il numero di volte in cui sono state memorizzate variabili utilizzando questo metodo. La prima variabile sarà ovviamente denominata “temp1” e la seconda “temp2”.

Conclusione

La competenza e la velocità sono attributi della familiarità con i propri strumenti e questo va in profondità con Chrome DevTools. Più informazioni hai, meglio e più velocemente utilizzerai gli strumenti che, a loro volta, ridurrebbero il tempo impiegato per il debug.

Potrebbe valere di più accreditare una piccola percentuale del tuo tempo questa settimana e poi leggere la documentazione, a cominciare dagli aspetti di debug che spesso richiedono più tempo. Non saremo sorpresi se i suddetti suggerimenti per la console di Chrome non menzionano la tua funzione preferita. Fateci sapere su di loro nel commento qui sotto.