Come ispezionare correttamente un sito web

Che tu sia uno sviluppatore che testa nuove funzionalità su un progetto o un designer che desidera esaminare più da vicino il codice HTML e CSS, ci sono molte ragioni per ispezionare un sito Web e i suoi elementi. Tuttavia, sapere da dove cominciare può sembrare confuso (all'inizio).

Fortunatamente, puoi utilizzare vari semplici strumenti, tecniche e trucchi per ispezionare correttamente gli elementi web. Inoltre, ci sono opzioni per quasi tutti i browser e sistemi operativi (OS).

In questo post, discuteremo perché potresti voler ispezionare un sito web. Quindi ti guideremo attraverso alcuni dei migliori strumenti che puoi utilizzare prima di spiegare cosa cercare. Facciamo un salto!

Perché dovresti ispezionare un sito web

Ci sono diversi motivi per cui potresti voler ispezionare un sito web. Ad esempio, potrebbe essere necessario risolvere un problema o trovare un'informazione specifica.

L'ispezione degli elementi Web in un browser consente agli sviluppatori, ai designer e agli esperti di marketing digitale di WordPress di manipolare l'aspetto di una pagina Web e testare le modifiche. È più probabile che gli sviluppatori o i tester utilizzino questa funzione per eseguire il debug di un particolare elemento, condurre test di layout o eseguire modifiche CSS in tempo reale.

L'ispezione degli elementi web è utile anche per i web designer. Se vuoi testare rapidamente un cambio di colore o un nuovo carattere, puoi farlo senza scavare nel tuo codice CSS.

Inoltre, i professionisti del marketing digitale possono utilizzare uno strumento Ispeziona elemento per vedere in che modo determinate modifiche influirebbero sull'aspetto generale di una pagina Web. Ad esempio, potresti voler provare un nuovo pulsante Call To Action (CTA) o una combinazione di colori diversa. Puoi utilizzare gli strumenti per replicare gli aggiornamenti senza apportare modifiche al tuo sito live.

Infine, l'ispezione di un sito Web può essere un ottimo modo per conoscere come è costruito e funziona un sito Web. Se sei interessato a saperne di più sullo sviluppo web, l'ispezione dei siti è un ottimo modo per iniziare.

Migliori strumenti ed estensioni per ispezionare un sito web

Esistono diversi strumenti ed estensioni che è possibile utilizzare per ispezionare un sito Web. Ecco alcune delle opzioni più popolari!

Ispeziona elemento

Lo strumento Ispeziona elemento è l'opzione più comune. Ti consente di osservare da vicino il codice HTML e CSS che compone una pagina web. Puoi anche usarlo per modificare in tempo reale il CSS e vedere come apparirebbero le tue modifiche senza apportare modifiche permanenti.

Sebbene sia disponibile come estensione di Google Chrome, lo strumento Ispeziona elemento viene fornito anche con tutti i principali browser. La funzione fa parte di Chrome Developer Tools, un insieme di programmi che ti consente di ispezionare e modificare il codice HTML e CSS di una pagina web.

Per accedere agli strumenti per sviluppatori di Google Chrome, premi semplicemente Ctrl+Maiusc+I (o Cmd+Opt+I su un Mac). Puoi anche accedere agli strumenti aprendo il menu Chrome e selezionando Altri strumenti > Strumenti per sviluppatori :

Puoi accedere agli stessi strumenti per sviluppatori in altri browser. Ad esempio, gli strumenti per sviluppatori di Firefox hanno funzionalità simili. Per accedere agli strumenti, premi semplicemente Ctrl+Shift+I (o Cmd+Opt+I su un Mac). Puoi trovare gli strumenti anche aprendo il menu di Firefox e selezionando Web Developer > Inspector.

Inoltre, Safari Developer Tools ti consente di ispezionare e modificare il codice HTML e CSS di una pagina Web su dispositivi Mac. Basta premere Cmd+Opt+I . Puoi anche aprire il menu Safari e selezionare Preferenze > Avanzate > Mostra menu Sviluppo nella barra dei menu .

BrowserStack

Un'altra piattaforma che puoi utilizzare per testare i siti Web è BrowserStack:

Questa piattaforma di test basata su cloud funziona con tutti i principali browser e dispositivi. Dopo esserti registrato per una prova gratuita, puoi accedere alla dashboard Live e scegliere il tuo sistema operativo.

Quindi, puoi selezionare la versione del tuo browser preferita per avviare una sessione Live nel tuo browser. Infine, puoi navigare nel sito Web che desideri ispezionare come faresti tramite Ispeziona elemento.

Come ispezionare un sito web

Diamo un'occhiata a come è possibile ispezionare un sito Web utilizzando lo strumento Ispeziona elemento. Inizia semplicemente facendo clic con il pulsante destro del mouse su qualsiasi elemento della pagina Web e selezionando Ispeziona dal menu contestuale:

Questo aprirà lo strumento Ispeziona elemento nel tuo browser. Una volta che lo strumento è aperto, puoi iniziare a manipolare il codice HTML e CSS per vedere come influenzerebbe l'aspetto della pagina web.

Ad esempio, puoi cambiare il colore di un elemento, aggiungere o rimuovere una classe o persino cambiare la posizione di un elemento. Puoi anche utilizzare il campo di ricerca in alto per cercare una parte di testo o un'immagine.

Ovviamente, qualsiasi modifica apportata utilizzando Ispeziona elemento è solo temporanea. Non verranno salvati quando aggiorni la pagina o chiudi il browser. Tuttavia, questo è un ottimo modo per provare l'aspetto di modifiche specifiche senza alterare in modo permanente il tuo sito web.

Puoi anche accedere allo strumento premendo Ctrl+Maiusc+I (o Cmd+Opt+I su Mac) per aprire gli Strumenti per sviluppatori . Quindi, fai clic sulla scheda Elementi nella parte superiore della finestra:

Infine, puoi anche accedere a Ispeziona elemento aprendo il menu Chrome e selezionando Altri strumenti > Strumenti per sviluppatori , di cui abbiamo discusso in precedenza.

Come modificare un elemento

Se desideri modificare un elemento in una pagina Web, fai clic con il pulsante destro del mouse su di esso e seleziona Ispeziona . Nel pannello Elementi che si apre, trova la parte che desideri modificare e fai doppio clic su di essa.

Quando apri la casella Elementi , puoi utilizzare l'icona del cursore Ispeziona in alto a sinistra del pannello per evidenziare il codice sorgente dell'elemento che desideri modificare. Quando fai clic con il pulsante destro del mouse sul codice evidenziato, seleziona Modifica come HTML :

La casella si espanderà, quindi potrai modificare il testo. Per visualizzare in anteprima le modifiche, è possibile deselezionare l'elemento. Puoi anche fare doppio clic sul testo per modificarlo.

Puoi anche utilizzare questa tecnica per modificare il codice CSS di un elemento. Per fare ciò, fai clic destro su di esso e seleziona Ispeziona . Nel pannello degli elementi, individua l'elemento che desideri modificare e scegli la proprietà element.style . Quindi puoi aggiungere il codice o le dichiarazioni tra parentesi graffe.

Come nascondere o eliminare un elemento

Potresti anche voler nascondere o eliminare un elemento su una pagina web. Una volta trovato l'elemento che desideri nascondere o eliminare, fai clic con il pulsante destro del mouse su di esso e seleziona Ispeziona per avviare lo strumento Ispeziona elemento.

Da qui, fai clic con il pulsante destro del mouse sull'elemento, quindi seleziona l'opzione Elimina elemento o Nascondi elemento :

Il pulsante Elimina rimuove l'elemento Document Object Model (DOM). Il pulsante Nascondi nasconderà semplicemente l'elemento, ma sarà ancora nel DOM.

Come ispezionare le classi CSS

Esistono diversi modi per ispezionare le classi CSS. Tuttavia, il metodo più semplice consiste nel fare clic con il pulsante destro del mouse sull'elemento che si desidera esaminare e selezionare Ispeziona . Quindi apri la scheda Stili per vedere i suoi stili CSS:

Tieni presente che questa scheda mostra solo gli stili incorporati che vengono applicati e non quelli che provengono da un foglio di stile.

Se desideri visualizzare tutti gli stili CSS applicati a un elemento, puoi utilizzare la scheda Calcolato . Ti mostra tutti gli stili CSS applicati a un elemento, inclusi quelli di un foglio di stile:

Quando hai finito di ispezionare una pagina web, chiudi semplicemente lo strumento Ispeziona elemento. Le tue modifiche non verranno salvate, quindi non devi preoccuparti di rompere accidentalmente qualcosa.

Cosa cercare quando si ispeziona un sito web

Qualunque sia il metodo utilizzato per accedere a Ispeziona elemento, vedrai la stessa interfaccia. Si compone di due riquadri: il riquadro HTML e il riquadro CSS.

Il riquadro HTML mostra la struttura della pagina web. Puoi vedere come i vari elementi sono nidificati e correlati.

Il riquadro CSS mostra gli stili applicati all'elemento selezionato. Puoi anche modificare le regole CSS per vedere come le tue modifiche influenzerebbero l'aspetto dell'elemento.

Se stai cercando qualcosa di specifico su un sito Web, che si tratti di una determinata parte di testo o di un'immagine, puoi utilizzare Ispeziona elemento per aiutarti a trovarlo. Ha un campo di ricerca dove puoi cercare un particolare elemento.

Quando ispezioni un sito web, ci sono alcune cose da tenere a mente:

• HTML: il codice che definisce la struttura della pagina web. Presta attenzione al modo in cui gli elementi sono organizzati e al modo in cui interagiscono tra loro.
• CSS: Il codice che definisce lo stile della pagina web.
• JavaScript : il codice che definisce il comportamento della pagina web. Influenza il modo in cui gli elementi interagiscono e il modo in cui la pagina risponde all'input dell'utente.
• Design : l'aspetto generale del sito web. Influenza la facilità d'uso del layout e quanto si adatta allo scopo del sito web.
• Contenuto: testo, immagini e altri media del sito web.

Ciò che dovresti cercare quando ispezioni un sito Web dipenderà principalmente dal fatto che tu sia un designer, uno sviluppatore o un marketer digitale. Come abbiamo discusso in precedenza, lo strumento Ispeziona elemento può aiutarti in tutto, dai test di progettazione alla risoluzione dei problemi.

Conclusione

Ispeziona elemento è una funzionalità preziosa per designer e sviluppatori. Puoi usarlo per visualizzare e modificare l'HTML e il CSS di una pagina web. Questo strumento può essere utile quando si desidera apportare modifiche a una pagina Web su cui si sta lavorando o vedere come è codificata.

Ispeziona elemento è disponibile nella maggior parte dei browser web. Puoi accedervi facendo clic con il pulsante destro del mouse su una pagina Web e selezionando Ispeziona dal menu. Dopo aver aperto la finestra Ispeziona , vedrai il codice HTML e CSS per la pagina web e potrai apportare varie modifiche.

Hai bisogno di aiuto per la gestione o l'ottimizzazione del tuo sito web? Scopri come WP Engine può aiutarti con qualsiasi cosa, dall'hosting WordPress alla gestione del sito e dei clienti!