Come ispezionare gli elementi in Safari, Chrome e Firefox su Mac

Ispezionare gli elementi è un’abilità essenziale che consente a chiunque di comprendere come è costruito un sito web e di apportare le necessarie modifiche. Non è necessario essere uno sviluppatore web per beneficiare dell’ispezione degli elementi su un Mac con qualsiasi browser moderno con solo pochi semplici clic. Fortunatamente, ispezionare gli elementi è uno strumento integrato in tutti i browser moderni e non è necessario alcun software speciale per farlo. Questo tutorial fornisce istruzioni passo passo su come ispezionare gli elementi in Safari, Chrome e Firefox su Mac.

Suggerimento: stai cercando di passare da Chrome a Firefox come tuo browser predefinito? Ti forniamo tutto ciò di cui hai bisogno per garantire una transizione fluida.

Indice dei Contenuti

• Cos’è Ispezionare Elementi?
• Come Ispezionare Elementi in Google Chrome su Mac
• Come Ispezionare Elementi in Safari su Mac
• Come Ispezionare Elementi in Firefox su Mac
• Domande Frequenti

Cos’è Ispezionare Elementi?

Ispezionare Elementi è una potente funzionalità disponibile su tutti i moderni browser web che consente di apprendere di più su una pagina web, come la sua struttura, layout e stile. Gli sviluppatori e i designer di contenuti online utilizzano spesso questi strumenti per eseguire il debug, sperimentare e risolvere problemi di un progetto web. Puoi facilmente selezionare un elemento di un sito web e lo strumento di ispezione fornirà tutte le informazioni sotto un particolare elemento, come il colore, il font, la dimensione e altri elementi.

Lo strumento di ispezione consente anche di modificare temporaneamente il codice e visualizzare le modifiche applicate alla pagina web in tempo reale. Tuttavia, le modifiche saranno visibili solo a te. È uno strumento potente per te, sia che tu sia un sviluppatore esperto o semplicemente curioso di sapere come è costruito un particolare sito web.

Hai incontrato il pop-up di Firefox Relay? Ti mostriamo come rimuovere il menu a discesa di Firefox Relay dai campi email.

Come Ispezionare Elementi in Google Chrome su Mac

Iniziamo con come ispezionare gli elementi in Chrome, poiché è il browser più popolare. I passaggi sono abbastanza semplici, permettendoti di iniziare in pochissimo tempo.

Come Aprire il Pannello di Ispezione in Google Chrome

1. Apri il browser Chrome e visita qualsiasi sito web che desideri ispezionare.

1. Fai clic destro su uno spazio vuoto e seleziona “Ispeziona.”

1. Vedrai il pannello di ispezione sullo schermo.

Buono a sapere: non usi Chrome per Mac? Scopri come utilizzare lo strumento “Ispeziona” di Google Chrome per la diagnostica dei siti web su un PC Windows.

Come Ispezionare un Elemento Particolare di una Pagina Web in Google Chrome

Ora che hai aperto con successo il pannello di ispezione, impariamo come interagire con un elemento.

1. Nell’angolo sinistro del pannello di ispezione, fai clic su “Seleziona un elemento da ispezionare.”

1. Seleziona qualsiasi elemento. Per questo esempio, stiamo ispezionando un’immagine sulla pagina web. Puoi farlo con qualsiasi elemento desideri. Vedrai una casella bianca con alcune informazioni di base, come il tipo di elemento, il nome del file, ecc. Sul lato destro, vedrai il codice associato all’elemento particolare.

Come Visualizzare la Versione Mobile di un Sito Web in Google Chrome

1. Dal lato sinistro del pannello di ispezione, fai clic sull’opzione “Attiva Barra degli Strumenti Dispositivi.”

1. Vedrai il sito web reagire su un dispositivo mobile. Puoi comunque eseguire la tua ispezione facendo clic sull’elemento, e le informazioni saranno basate sugli smartphone.

1. Se fai clic sul menu a discesa “Responsive” sopra, puoi selezionare un dispositivo a tua scelta dall’elenco. Quando lo fai, vedrai come la pagina web reagisce a un particolare modello di smartphone.

Come Cambiare la Posizione del Pannello di Ispezione in Google Chrome

1. Fai clic sui tre puntini verticali nell’angolo destro del pannello di ispezione.

1. Seleziona la posizione per il dock di ispezione: a sinistra, in basso o in una finestra pop-up.

Come Ispezionare Elementi in Safari su Mac

La funzione di ispezione degli elementi è disattivata per impostazione predefinita su Safari, poiché fa parte dell’opzione sviluppatore. Quindi prima dobbiamo abilitare il “Menu Sviluppo.”

Suggerimento: stai passando da Chrome a Safari come tuo browser predefinito su Mac? Abbiamo tutti i passaggi per aiutarti a passare senza perdere i tuoi segnalibri, estensioni e altro.

Come Aprire il Pannello di Ispezione in Safari

1. Una volta aperto Safari e già sulla pagina web che desideri ispezionare, fai clic sull’icona “Safari” nella barra dei menu in alto e seleziona “Impostazioni.”

1. Questo ti porterà alla scheda “Generale”. Seleziona la scheda “Avanzate” all’estrema destra.

1. Fai clic sulla casella accanto a “Mostra menu Sviluppo nella barra dei menu” per avere accesso a tutte le funzionalità avanzate di Safari.

1. Fai clic destro ovunque sulla pagina web e seleziona “Ispeziona Elemento.” Questo aprirà il pannello di ispezione degli elementi in Safari.

1. Per opzioni più avanzate, fai clic sulla scheda “Sviluppo” nella barra dei menu.

Come Ispezionare un Elemento Particolare di una Pagina Web in Safari

1. Fai clic sull’icona “ispeziona” che assomiglia a un bersaglio nell’angolo sinistro del pannello di ispezione.

1. Usa il cursore e seleziona l’elemento che desideri ispezionare. Stiamo ispezionando il tag titolo per questo esempio, ma puoi ispezionare qualsiasi elemento desideri.

Come Visualizzare la Versione Mobile di un Sito Web in Safari

1. Dalla barra dei menu in alto, fai clic sull’opzione “Sviluppo” e seleziona “Entra in Modalità Design Responsivo.”

1. Seleziona qualsiasi modello di dispositivo che desideri utilizzare per ispezionare la pagina web.

Come Cambiare la Posizione del Pannello di Ispezione in Safari

Dal lato sinistro del pannello di ispezione, seleziona la posizione che desideri, e il pannello di ispezione verrà spostato di conseguenza.

Come Ispezionare Elementi in Firefox su Mac

Firefox è una scelta popolare tra sviluppatori e designer esperti quando lavorano su progetti web. Vediamo come possiamo ispezionare gli elementi in Firefox su Mac.

Come Aprire il Pannello di Ispezione in Firefox

1. Una volta che sei sulla pagina web che desideri ispezionare nel browser Firebox, fai clic destro e seleziona “Ispeziona.”

1. Questo aprirà il pannello di ispezione nel browser Firefox.

Come Ispezionare un Elemento Particolare di una Pagina Web in Firefox

1. Fai clic sull’icona “cursore” che vedi nell’angolo sinistro del pannello di ispezione.

1. Sposta il cursore sull’elemento che desideri ispezionare. Per questo esempio, stiamo ispezionando un tag intestazione, ma puoi farlo con qualsiasi elemento desideri.

Come Visualizzare la Versione Mobile di un Sito Web in Firefox

1. Dall’angolo destro del pannello di ispezione, fai clic sull’icona dello smartphone.

1. Questo convertirà e caricherà il sito web in un visualizzatore a forma di smartphone. Puoi fare clic sull’interruttore “Responsive” per selezionare un dispositivo mobile a tua scelta.

Come Cambiare la Posizione del Pannello di Ispezione in Firefox

1. Fai clic sui tre puntini orizzontali nell’angolo destro del dock di ispezione.

1. Seleziona la posizione che desideri abilitare, e il pannello di ispezione verrà spostato di conseguenza.

Domande Frequenti

In che modo ispezionare gli elementi differisce dalla visualizzazione del codice sorgente della pagina?

Ispezionare gli elementi è uno strumento per sviluppatori integrato nei browser moderni per interagire, modificare e risolvere problemi di una pagina web per il suo HTML, CSS e JavaScript. Quando controlli il codice sorgente di una pagina web, vedi semplicemente un codice HTML statico che è stato consegnato dal server al browser. Puoi analizzare la struttura generale, il contenuto e i tag, come i metadati, ecc., ma lo strumento di ispezione rende la pagina web con tutti i suoi elementi, corregge errori e altro ancora.

Quali altri tipi di dati posso scoprire utilizzando lo strumento di ispezione degli elementi?

Con ispezionare gli elementi, ottieni una visione completa di come è costruito un sito web. Ottieni accesso al codice HTML effettivo con gerarchia e nidificazione. Puoi modificare il CSS e vedere le modifiche in tempo reale, inclusi elementi come colore, dimensione del font, ecc. Puoi anche vedere il codice JavaScript, permettendoti di eseguire il debug del codice e analizzarlo. La funzione “Richieste di Rete” rende più facile per te comprendere le risorse che vengono caricate esternamente, come i font di Console Output, la manipolazione del DOM e altro.

I proprietari dei siti web possono vedere l’attività di ispezione degli elementi sui loro siti?

Tecnicamente, sì. Per chiarire, tutti i siti web moderni hanno strumenti di analisi e tracciamento installati, che tracciano essenzialmente tutto ciò che fai su un sito web, da quanto tempo rimani sul sito a dove clicchi. Tuttavia, non sarai mai identificato personalmente dal sito web, e sei semplicemente un punto dati in un cluster di utenti che corrisponde alla tua demografia e comportamento. Questi sistemi sono in atto per monitorare le prestazioni del sito web e migliorare l’esperienza dell’utente.

Crediti immagine: Unsplash. Tutti gli screenshot di Abbaz Uddin.