Come utilizzare lo strumento Ispeziona elemento del browser

Se lavori con molti siti web, probabilmente sei sempre alla ricerca di modi più veloci ed efficienti per fare le cose. In tal caso, lo strumento Inspect Element, disponibile nella maggior parte dei principali browser, potrebbe essere una risorsa utile da avere a portata di mano. Con esso, puoi identificare rapidamente le classi CSS, visualizzare in anteprima le modifiche agli elementi su una pagina, simulare un sito su dispositivi mobili e molto altro.

In questo articolo, introdurremo lo strumento Ispeziona elemento e ti mostreremo come accedervi nei browser Web più diffusi. Quindi ti guideremo attraverso alcuni esempi di come puoi usarlo come parte del tuo flusso di lavoro di sviluppo web.

Scaviamo!

Come accedere allo strumento Ispeziona elemento nei principali browser

Lo strumento Inspect Element è un'utilità che consente di visualizzare il codice sorgente sottostante di qualsiasi pagina web. Inoltre, puoi usarlo per apportare modifiche temporanee e vedere i risultati in tempo reale lasciando intatto il codice sorgente originale. Questo è incredibilmente utile se devi testare una modifica o diagnosticare un problema. Può anche tornare utile se incontri un sito con una funzionalità che ti piace e sei curioso di sapere come è stata implementata.

La maggior parte dei principali browser, inclusi Chrome, Firefox e Safari, offre una variante di questo strumento. Diamo un'occhiata a come accedervi in ​​ciascuno di essi.

Accesso all'elemento Inspect in Google Chrome

Esistono tre modi per accedere allo strumento Ispeziona elemento in Chrome:

• Fare clic con il pulsante destro del mouse su un elemento della pagina e scegliere Ispeziona .
• Fai clic sul menu a tre punti nell'angolo in alto a destra della finestra e scegli Altri strumenti > Strumenti per sviluppatori.
• Premi Ctrl + Maiusc + C sulla tastiera ( Cmd + Opzione + C su Mac).

Quando lo strumento si apre, ti presenterà una vista divisa. Da un lato, hai un'anteprima del sito web che stai ispezionando, insieme ad alcuni controlli per regolare la visualizzazione e simulare diverse risoluzioni dello schermo:

Dall'altro, ci sono diversi riquadri contenenti informazioni. Il riquadro superiore è l'HTML della pagina. Passando il mouse su una parte del codice evidenzierà l'area pertinente della pagina a destra:

Sotto c'è un pannello che mostra le informazioni sulla pagina. I dettagli visualizzati qui variano a seconda della scheda selezionata. Negli screenshot qui sopra, mostra gli stili CSS della pagina.

Il riquadro in basso contiene semplicemente notizie e aggiornamenti sugli strumenti per sviluppatori di Chrome. Puoi chiuderlo in sicurezza per ridurre il disordine facendo clic sulla X .

Infine, puoi modificare la posizione di questi riquadri facendo clic sul menu a tre punti nell'angolo in alto a destra del riquadro HTML e selezionando una delle opzioni del dock.

Accesso all'elemento Inspect in Mozilla Firefox

Lo strumento Inspect Element in Firefox è abbastanza simile a quello di Chrome ed è possibile accedervi in ​​modi simili:

• Fare clic con il pulsante destro del mouse su un elemento della pagina e scegliere Ispeziona elemento.
• Fare clic sul menu dell'hamburger nell'angolo in alto a destra della finestra di Firefox e selezionare Web Developer > Inspector .
• Premi Ctrl + Maiusc + C sulla tastiera ( Cmd + Opzione + C su Mac).

Per impostazione predefinita, Firefox posiziona i riquadri delle informazioni nella parte inferiore dello schermo:

Tuttavia, puoi spostarli facilmente facendo clic sul menu a tre punti e selezionando un'opzione diversa.

Accesso all'elemento Ispeziona in Safari

Sui computer Mac, il browser web Safari offre anche uno strumento Ispeziona elemento. Tuttavia, c'è un ulteriore passaggio per accedervi: dovrai abilitare gli strumenti per sviluppatori di Safari.

Per fare ciò, vai alla barra dei menu nella parte superiore dello schermo e vai a Safari > Preferenze > Avanzate . È quindi possibile selezionare la casella pertinente per abilitare gli strumenti di sviluppo:

Una volta abilitato, puoi accedere alla funzione Ispeziona elemento come in altri browser:

• Fare clic con il pulsante destro del mouse su un elemento e scegliere Ispeziona elemento .
• Nella barra dei menu in alto, vai a Sviluppo > Mostra Web Inspector.
• Premi Cmd + Opzione + I sulla tastiera.

Il layout iniziale per lo strumento di Safari differisce leggermente dai browser:

Tuttavia, come con Chrome e Firefox, puoi personalizzarlo facilmente facendo clic sulle icone nell'angolo in alto a sinistra della finestra di ispezione.

5 usi comuni dello strumento Ispeziona elemento

Ora che sai come accedere allo strumento Ispeziona elemento, diamo un'occhiata ad alcune delle cose utili che puoi fare con esso. Ci sono un sacco di possibilità, ma gli usi di seguito sono alcuni dei più comuni. Tieni presente che utilizzeremo Chrome per questi esempi, ma le funzionalità dovrebbero funzionare in modo simile in altri browser.

1. Trova classi CSS su un sito web

Uno dei modi più utili per sfruttare Inspect Element è trovare i dettagli nei fogli di stile a cascata (CSS) di una pagina. Questo è utile per un paio di motivi. Innanzitutto, se stai solo navigando in Internet e ti imbatti in un sito di cui ami davvero lo stile, puoi dare un'occhiata al CSS per raccogliere alcune idee per il tuo web design.

È anche utile sul tuo sito. Ad esempio, se un elemento non ha l'aspetto corretto, puoi ispezionarlo rapidamente per assicurarti che utilizzi il CSS corretto.

Ci sono due modi di base per controllare gli stili usando Ispeziona elemento. Se desideri visualizzare rapidamente un singolo elemento, puoi passarci sopra con il mouse nel riquadro di anteprima per visualizzare alcune informazioni di base su di esso:

Qui puoi vedere la combinazione di colori, il carattere, i margini e altro per l'intestazione sul nostro blog. Nei riquadri dettagliati, lo strumento evidenzia anche il codice pertinente in modo da poter vedere esattamente cosa sta succedendo. Facendo clic su un elemento nell'anteprima si aggiornerà il riquadro degli stili per mostrare anche il suo CSS:

Se il passaggio del mouse sull'elemento sembra non fare nulla, assicurati che l'icona del cursore nel riquadro di ispezione sia evidenziata in blu:

Nel caso in cui conosci la classe o lo stile CSS specifico che stai cercando e desideri vedere ogni elemento che lo sta utilizzando, puoi anche utilizzare la funzione di ricerca. Con l'inspector aperto, premi Ctrl + Maiusc + F sulla tastiera ( Cmd + Maiusc + F su Mac). Si apre una casella di ricerca in cui è possibile cercare il codice della pagina . I risultati rilevanti verranno evidenziati, proprio come se stessi cercando un documento.

2. Risolvere i problemi di un sito

Lo strumento Ispeziona elemento è estremamente utile per la risoluzione dei problemi. Ad esempio, se il colore o il carattere di un elemento non sembra corretto, puoi verificarlo rapidamente utilizzando lo strumento come descritto nella sezione precedente.

Puoi anche modificare direttamente l'HTML di una pagina dallo strumento Ispeziona elemento. Basta fare doppio clic sul codice che si desidera modificare per modificarlo.

Tieni presente che il codice non viene effettivamente modificato sul sito Web: se aggiorni la pagina, tornerà alla sua forma originale. Tuttavia, questa funzionalità è estremamente utile per test rapidi e risoluzione dei problemi.

Infine, il debugger integrato è uno strumento più avanzato che puoi utilizzare per visualizzare eventuali messaggi di errore che vengono visualizzati dietro le quinte. Per accedervi, fai clic su Console nella parte superiore della finestra di ispezione:

Sono disponibili anche altre schede per la visualizzazione di sorgenti, attività di rete e altro. Per accedere all'elenco completo, fai clic sull'icona della doppia freccia nella parte superiore dell'ispettore.

3. Modifica testo per visualizzare in anteprima le modifiche

Uno dei migliori utilizzi di Inspect Element è visualizzare rapidamente in anteprima le modifiche al testo, al carattere o al colore di una pagina. In questo modo, puoi vedere esattamente come appare la tua idea senza nemmeno accedere alla dashboard di WordPress.

Per modificare un elemento, fai clic con il pulsante destro del mouse su di esso e scegli Ispeziona. Questo apre lo strumento con il codice di quell'elemento in primo piano. Se hai già Ispeziona elemento aperto, puoi anche fare clic sull'elemento nel riquadro di anteprima per evidenziare il codice pertinente.

Quindi, fai doppio clic sul codice per renderlo modificabile. Ad esempio, qui abbiamo cambiato il titolo del nostro blog:

Puoi anche cambiare i colori. Seleziona semplicemente l'elemento e scorri il riquadro Stili per trovare la sezione pertinente. Puoi fare clic sui quadrati dei colori per visualizzare un selettore di colori:

Puoi anche modificare direttamente il codice esadecimale del colore se conosci quello che vuoi usare.

4. Anteprima delle modifiche all'immagine

Ispeziona elemento semplifica anche l'anteprima delle modifiche alle immagini. Questo è anche un ottimo modo per provare diverse dimensioni dell'immagine.

Seleziona semplicemente l'immagine che desideri modificare nel riquadro di anteprima, quindi fai doppio clic sul suo URL nel riquadro HTML:

Puoi quindi incollare l'URL di un'immagine diversa per testarla. Se l'immagine si trova nella tua libreria multimediale di WordPress, puoi trovare rapidamente l'URL nei dettagli dell'allegato:

C'è anche un pratico pulsante per copiare l'URL negli appunti. Ancora una volta, ricorda che tutte le modifiche apportate nell'ispettore sono solo temporanee e visibili solo a te, quindi sentiti libero di giocare.

5. Testare un sito utilizzando l'emulazione del dispositivo

Infine, un'altra utile funzionalità di Inspect Element è la capacità di emulare diverse dimensioni dello schermo e persino dispositivi specifici. Ciò ti consente di testare la reattività di un sito e vedere esattamente come apparirà con vari fattori di forma mobile.

Con l'Inspector aperto, fai clic sull'icona che sembra un telefono e un tablet impilati:

Ciò consente l'emulazione del dispositivo. Tieni presente che potrebbe essere abilitato per impostazione predefinita quando apri le impostazioni. Ridimensiona l'anteprima della pagina utilizzando le maniglie attorno ad essa o fai clic sui menu a discesa nella parte superiore del riquadro di anteprima per scegliere vari dispositivi:

Puoi anche inserire un rapporto di aspetto specifico o anche controllare come appare la pagina quando il dispositivo mobile viene ruotato facendo clic sull'icona "ruota" nella parte superiore del riquadro di anteprima. Per emulare vari sensori, come posizione e tocco, fai clic sul menu a tre punti nel riquadro di ispezione e seleziona Altri strumenti > Sensori .

Conclusione

Che tu sia un principiante dello sviluppo web o un professionista esperto, lo strumento Inspect Element è una potente utility che dovrebbe sicuramente essere nel tuo arsenale. È di facile accesso, quasi universalmente disponibile e rende una varietà di operazioni facile e veloce.

In questo articolo, abbiamo dimostrato come accedere a Inspect Element in Chrome, Firefox e Safari. Ti abbiamo anche mostrato come utilizzarlo per individuare le classi CSS, risolvere i problemi di un sito Web, modificare temporaneamente testo e immagini ed emulare i dispositivi mobili. Con questo toolkit, hai tutto il necessario per rendere Inspect Element una parte del tuo flusso di lavoro.

Hai domande sull'utilizzo di Inspect Element? Fatecelo sapere nella sezione commenti qui sotto!

Immagine in primo piano tramite Kinjugraphics / shutterstock.com.