Come ispezionare Element in Chrome, Safari e Firefox?

Ti sei mai chiesto cosa rende le pagine web così straordinarie, con così tante caratteristiche e funzionalità? Come si uniscono tutti i codici per creare un sito Web accattivante e sorprendente?

Tutti i segreti possono essere facilmente rivelati semplicemente ispezionando gli elementi del sito Web utilizzando lo strumento Ispeziona nel tuo browser.

Con l'aiuto di questo strumento integrato, puoi facilmente staccare il livello del sito web e vedere come i codici sono collegati a ciascun elemento, creando un sito web completamente funzionale. Ti darà un'idea di come funzionano le cose sul front-end e ti ispirerà anche a ricrearle nei tuoi progetti.

In questo post, ti mostreremo come ispezionare gli elementi del sito web nei browser più diffusi e forniremo metodi brevi per utilizzarli direttamente.

Come ispezionare gli elementi di un sito Web su qualsiasi browser?

Puoi ispezionare facilmente gli elementi di un sito Web su qualsiasi browser semplicemente seguendo queste scorciatoie Ispeziona elementi.

1. Controlla le scorciatoie di Elements per il browser Google Chrome

Puoi accedere agli elementi del sito Web avviando gli strumenti di sviluppo o gli strumenti Ispeziona Elementi semplicemente premendo la combinazione di tasti Ctrl+Maiusc+I sulla tastiera.

Tuttavia, un altro metodo rapido e diretto che puoi provare è semplicemente fare clic con il pulsante destro del mouse su un'area vuota del sito Web o su qualsiasi elemento e selezionare "Ispeziona". Successivamente, puoi utilizzare la scheda “Elementi” per visualizzare l’intera struttura del sito Web o utilizzare la scheda “Console” per qualsiasi tipo di avviso o errore.

Tuttavia, il terzo ma lungo modo per accedere agli strumenti di sviluppo è fare clic sui tre punti verticali o sul menu hamburger (l'icona con tre punti impilati) situato nell'angolo in alto a destra del browser Chrome, quindi fare clic su Altri strumenti, quindi selezionare Strumenti di sviluppo .

2. Controlla i collegamenti di Elements per il browser Firefox

Se sei un utente del browser Firefox, puoi provare una combinazione di tasti di scelta rapida Ctrl+Maiusc+C per utilizzare gli strumenti di sviluppo per insettificare gli elementi del sito Web. Oppure puoi anche fare clic con il pulsante destro del mouse su un'area vuota del sito Web o su qualsiasi elemento e selezionare "Ispeziona".

3. Controlla le scorciatoie di Elements per il browser Opera

Per gli utenti di Opera, premi Ctrl+Shift+I sulla tastiera per accedere direttamente agli strumenti di sviluppo per ispezionare gli elementi del sito web. Allo stesso modo, come altri browser, puoi anche fare direttamente clic con il pulsante destro del mouse su un'area vuota del sito Web o su qualsiasi elemento e selezionare "Ispeziona".

4. Ispeziona i collegamenti agli Elementi per Edge Browser

Nel caso in cui Edge sia il browser predefinito che stai utilizzando; puoi premere F12 sulla tastiera per aprire gli strumenti di sviluppo. Oppure semplicemente fai clic con il pulsante destro del mouse su un'area vuota del sito Web o su qualsiasi elemento e seleziona "Ispeziona".

5. Ispeziona Elementi nel browser Safari

Il browser Safari non dispone di alcun metodo di scelta rapida per ispezionare gli elementi di un sito Web, ma è necessario seguire i passaggi indicati di seguito:

Per utilizzare Ispeziona Elemento in Safari, devi prima abilitare gli strumenti per sviluppatori. Ecco come:

• Fai clic su “Safari” nel menu in alto e seleziona “Impostazioni”.

• Vai alla scheda "Avanzate" e seleziona la casella "Mostra menu Sviluppo nella barra dei menu".

• Chiudi la finestra Preferenze.

Ora puoi fare clic con il pulsante destro del mouse in un punto qualsiasi di una pagina Web e selezionare "Ispeziona elemento" per aprire il riquadro Elementi.

Il riquadro si aprirà immediatamente nella parte inferiore della finestra, il che potrebbe non avere un bell'aspetto e creare anche difficoltà nella visualizzazione dei codici.

Per tua comodità spostalo di lato facendo clic sull'icona nell'angolo in alto a sinistra del riquadro (accanto alla "X") e seleziona "Aggancia a destra della finestra" o "Aggancia a sinistra della finestra" .” ( Vale per tutti i Browser)

Inoltre, puoi anche separare il riquadro dalla finestra, se lo desideri. Per modificare la dimensione del riquadro, sposta il cursore sul bordo del riquadro finché non diventa una doppia freccia, quindi fai clic e trascina per ridimensionare.

Ora ti starai chiedendo cosa fare dopo aver aperto il riquadro o quali sono gli elementi principali che puoi controllare sul sito web.

Bene, a tale scopo controlla le sezioni seguenti.

Cose che puoi fare con gli strumenti di sviluppo di Inspect Website Elements

Ora che hai effettuato l'accesso allo strumento Elementi e aperto il riquadro, vedrai una varietà di strumenti integrati disponibili per aiutarti a giocare facilmente con il sito Web, personalizzarlo e modificarlo in base alle tue esigenze.

Utilizzeremo Chrome a scopo dimostrativo per la tua comodità, ma tutte le funzionalità, le impostazioni, le opzioni e le istruzioni saranno le stesse su tutti i browser.

1. Trova qualsiasi cosa su un sito con l'aiuto dello strumento Ispeziona ricerca elementi

Può essere difficile cercare qualsiasi cosa nell'intero codice sorgente, che è complesso e talvolta enorme. Per questo motivo, DevTools ha uno strumento di ricerca integrato.

Per utilizzarlo, apri il riquadro Elementi predefinito e premi Ctrl + F o Comando + F per cercare nel codice sorgente. Una scheda Cerca verrà immediatamente visualizzata nella parte inferiore del riquadro DevTools.

Nel campo di ricerca puoi cercare qualsiasi cosa, che si tratti di CSS, file JavaScript o elementi specifici all'interno del codice sorgente.

Ad esempio, se digiti "meta nome" nel campo di ricerca e premi Invio, troverà e mostrerà tutte le occorrenze di "meta nome" nel codice. Questo ti aiuta a controllare il meta della tua pagina web, le parole chiave SEO e lo stato di indicizzazione.

Allo stesso modo, se sei un web designer, puoi cercare i colori inserendo il codice esadecimale del colore, come #98fb98db, nel campo di ricerca e premendo Invio. Questo mostrerà ogni istanza di quel colore nei file CSS e HTML del sito.

Comunicazione e correzioni:

• Lo strumento di ricerca aiuta a comunicare con gli sviluppatori mostrando esattamente dove si trovano gli errori o cosa deve essere cambiato.
• Comunica agli sviluppatori il numero di riga relativo al problema per soluzioni più rapide.
• Puoi anche modificare tu stesso la pagina web utilizzando Elements, la parte principale degli Strumenti per sviluppatori di Chrome.

2. Selezionare e ispezionare elementi singoli/specifici della pagina web

Puoi anche visualizzare il codice HTML di un elemento specifico di una pagina facendo clic direttamente sull'icona del cursore nell'angolo in alto a sinistra del riquadro.

Ora puoi fare clic su qualsiasi elemento della pagina per rivelarne il codice sorgente nel pannello di ispezione.

3. Modifica o modifica qualsiasi cosa con gli elementi

Se ti piace sperimentare e giocare con il design del sito web e ti piace dare vita a idee istantanee, lo strumento Ispeziona elemento può aiutarti a farlo.

Con questo strumento puoi apportare modifiche temporanee all'aspetto del sito Web modificando o modificando i file CSS e HTML e visualizzando i risultati in tempo reale.

Tuttavia, i cambiamenti non sono permanenti. Dopo aver ricaricato la pagina, le modifiche scompariranno. In questo modo puoi sperimentare quanto vuoi senza interferire con il codice sorgente del sito web.

Se ad un certo punto trovi le modifiche interessanti, puoi semplicemente copiarle e salvarle altrove per un uso successivo.

Vediamo alcuni esempi di riferimento.

Ma prima prepariamo e puliamo il nostro parco giochi. A tale scopo, fai clic sulla scheda Elementi nel riquadro Strumenti per sviluppatori. Per avere più spazio, premi il tasto Esc per chiudere la casella di ricerca.

Ora sei pronto con il codice sorgente completo sullo schermo.

• Nell'angolo in alto a sinistra del riquadro Sviluppatore, fai clic sull'icona del mouse sopra un quadrato.
• Seleziona qualsiasi elemento della pagina per modificarlo.

Modifica del testo su una pagina Web:

• Fare clic sul cursore/icona quadrata del mouse.
• Fare clic su qualsiasi testo nella pagina.
• Nel riquadro Strumenti per sviluppatori, fai doppio clic sul testo evidenziato per renderlo modificabile.

• Digita il nuovo testo come "Più veloce" invece di "Premium" come mostrato nell'immagine qui sotto e premi Invio .
• La modifica del testo è temporanea e verrà ripristinata quando aggiornerai la pagina.

Elementi di modifica:

• Chiudi il riquadro Sviluppatore, evidenzia qualsiasi parte della pagina Web, fai clic con il pulsante destro del mouse e seleziona Ispeziona .
• Il riquadro Strumenti per sviluppatori evidenzierà la frase selezionata.

Modifica del colore e della dimensione del carattere degli Elementi:

• Nel riquadro Strumenti per sviluppatori, vai alla scheda Stili .

• Fai clic nel campo "dimensione carattere" e modifica il valore in 22px.

• Scorri fino a "colore" e modificalo in #ff0000.

• Regola la "famiglia di caratteri" su "Arial".

Ora i caratteri apparivano così prima delle modifiche apportate:

Dopo le modifiche, appare così:

Modifica degli stati degli elementi:

Se desideri rendere il tuo sito web più accattivante visivamente per i tuoi visitatori quando passano il mouse sopra o interagiscono con pulsanti o collegamenti, puoi utilizzare l'opzione Stati elemento.

• Fare clic sull'icona del cursore/casella del mouse e selezionare l'elemento.
• Nel riquadro Strumenti per sviluppatori, fai clic con il pulsante destro del mouse sul codice, passa il mouse su Forza stato e fai clic su :active:
• Ripeti e fai clic :al passaggio del mouse:

• Cambia il valore "colore di sfondo" in # 003b59 per vedere il nuovo colore al passaggio del mouse.

Modifica delle immagini di sfondo:

• Basta copiare il collegamento dell'indirizzo dell'immagine, ovvero (dove è stata ospitata l'immagine).

• Apri l'elemento Ispeziona sul pulsante "Potenzia la tua automazione con l'intelligenza artificiale".
• Trova il codice " background-color " e sostituisci il colore con l'url ("image-link") .

Sperimenta ulteriori modifiche:

• Puoi modificare il testo, scambiare immagini e alterare colori e stili.
• Prova diverse modifiche per vedere come potrebbe apparire il tuo sito.

4. Testare il sito Web su qualsiasi dimensione dello schermo o dispositivo

Al giorno d'oggi, anche Google consiglia vivamente che i siti Web siano reattivi e facilmente accessibili su qualsiasi dispositivo e dimensione dello schermo. La maggior parte degli utenti di Internet preferisce accedere ai siti Web dai propri smartphone piuttosto che da laptop e desktop.

Pertanto, è diventato fondamentale per gli amministratori web rendere i propri siti Web reattivi e ottimizzati per i dispositivi mobili durante la loro creazione.

Tuttavia, potrebbe non essere possibile per uno sviluppatore o designer web controllare il sito web su ogni tipo di dispositivo o dimensione di schermo contemporaneamente. Per risolvere questo problema, lo strumento di emulazione ti consente di vedere e verificare come potrebbe apparire il tuo sito web a diversi utenti che utilizzano vari dispositivi.

Ciò non significa che dovresti saltare i test effettivi su diversi dispositivi, ma può darti una buona idea.

Ecco come puoi eseguire:

• Nel riquadro Strumenti per sviluppatori, fai clic sulla piccola icona del telefono nell'angolo in alto a sinistra.
• La pagina cambierà in una visualizzazione in stile telefono con un menu in alto per modificare le dimensioni.
• Ridimensiona il piccolo browser per vedere come appare la pagina su diversi dispositivi come un tablet, un telefono o uno schermo più piccolo.

• Fai clic sul menu in alto per selezionare le dimensioni predefinite del dispositivo, come Surface Duo o iPhone 12 Pro.
• La pagina web si adatterà alle dimensioni del dispositivo selezionato. Utilizza il menu a discesa della percentuale accanto alle dimensioni per ingrandire.
• Seleziona "Responsive" nelle preimpostazioni del dispositivo per regolare la visualizzazione trascinando il bordo destro della pagina web.
• Passa dalla visualizzazione verticale a quella orizzontale facendo clic sull'icona di rotazione alla fine del menu in alto.
• Esplora diversi dispositivi per vedere come cambiano la pagina web e la risoluzione dello schermo.
• Anche tutti gli altri strumenti di sviluppo reagiranno alla visualizzazione del dispositivo.

5. Testare le prestazioni della pagina Web su reti mobili emulate

Oltre a tutti i test visivi, puoi anche vedere come funziona il tuo sito web su diverse reti mobili come 5G, 4G, 3G o reti più lente.

Per dimostrare ciò,

• Fai clic sul menu hamburger nell'angolo in alto a destra del riquadro.
• Passa il mouse su Altri strumenti e seleziona Condizioni di rete .

Condizioni di rete:

• Scegli una delle condizioni di rete come 4G veloce, 4G lento o offline per vedere come funziona la pagina senza Internet.

• Fare clic su Aggiungi... per includere la velocità di test (ad esempio, 56 Kbps per testare la connessione Internet dial-up).
• Ricarica la pagina per vedere quanto tempo impiega per caricarsi con una connessione lenta e come appare durante il caricamento.
• Questo ti aiuta a comprendere l'importanza di migliorare il tempo di caricamento del tuo sito per connessioni lente.

Modifica dell'agente utente:

• Nel campo User-agent, deseleziona Usa browser predefinito .
• Seleziona un agente utente diverso (ad esempio, Firefox, Mac) per vedere se il sito cambia il suo rendering per altri browser.
• Questa funzione ti consente di vedere come funziona il web caricamento delle pagine anche se dichiarano di funzionare solo con un browser diverso.

Conclusione

Dopo aver ottenuto così tante informazioni approfondite su Dev Tools o Inspect Elements, devi esserti reso conto che sono disponibili molte informazioni su uno qualsiasi dei tuoi siti Web preferiti di pubblico dominio.

In pochi clic, puoi eliminare completamente qualsiasi sito Web, rivelando tutti i suoi segreti di caratteristiche e funzionalità visivamente sbalorditive senza dover controllare i file originali.

Ora puoi analizzare e visualizzare quali stili CSS vengono utilizzati, la logica dietro funzionalità complesse, come viene eseguita l'ottimizzazione dei motori di ricerca a livello di codice e molto altro ancora.

Rahul

Rahul Kumar è un appassionato di web e content strategist specializzato in WordPress e web hosting. Con anni di esperienza e l'impegno a rimanere aggiornato sulle tendenze del settore, crea strategie online efficaci che indirizzano il traffico, aumentano il coinvolgimento e aumentano le conversioni. L'attenzione ai dettagli e la capacità di creare contenuti accattivanti di Rahul lo rendono una risorsa preziosa per qualsiasi marchio che desideri migliorare la propria presenza online.