Come ispezionare gli elementi su Mac, Windows, iPhone e iPad

Gli sviluppatori e i progettisti dell'interfaccia utente utilizzano la funzione Ispeziona elemento per modificare i siti Web online senza modificare il codice sorgente. Ma come ispezionare gli elementi senza intraprendere un corso di sviluppo web?

Inspect Element è un pratico strumento per sviluppatori che viene fornito immediatamente con i browser Web più diffusi. Devi solo sapere come distribuire lo strumento in pochi clic durante la navigazione nei siti Web.

Puoi fare molti trucchi magici come cambiare il layout del sito web, acquisire schermate senza testo, cambiare i caratteri, modificare i numeri e altro ancora.

Di seguito troverai una concisa guida passo-passo per imparare a ispezionare gli elementi senza sforzo.

Che cos'è l'elemento di ispezione?

Inspect Element è uno strumento di sviluppo web disponibile nella maggior parte dei browser web. Puoi usarlo per modificare il codice sorgente front-end di qualsiasi sito web che stai visitando.

Le modifiche apportate avvengono all'interno di una sandbox all'interno del tuo browser web. Quindi, non stai apportando modifiche al sito Web effettivo. Inoltre, le modifiche superficiali che apporti scompaiono quando aggiorni la pagina.

Ecco alcuni modi creativi per usarlo:

• Devi fare uno screenshot da un sito web e i testi sull'immagine ti preoccupano. Usa lo strumento Ispeziona elemento per eliminare quei testi.
• Vuoi fare uno scherzo ai tuoi amici mostrando loro il tuo nome sul New York Times o sul Washington Post. Inspect Element è il modo migliore per farlo.
• Testa i codici di debug sui siti Web applicandoli in tempo reale utilizzando lo strumento Ispeziona elemento. Se funziona, puoi modificare il codice sorgente del backend.
• In qualità di marketer digitale, puoi rivelare le parole chiave della concorrenza, i titoli SEO, i meta tag, ecc., utilizzando questo potente strumento di sviluppo web.

Come ispezionare gli elementi su Windows

Usare lo strumento Ispeziona elemento su Windows è incredibilmente facile. Trova di seguito una guida dettagliata per ispezionare gli elementi utilizzando vari browser Web su Windows:

Strumento di ispezione di Google Chrome

Come ispezionare gli elementi sul browser Chrome di Windows

• Quando utilizzi Google Chrome , fai clic con il pulsante destro del mouse in un punto qualsiasi di un sito web.
• Apparirà il menu contestuale del tasto destro.
• In fondo, vedrai Inspect .
• Fai clic su Ispeziona per visualizzare i codici HTML e CSS su un pannello a destra .

Come posso aprire Inspect Element in Chrome senza fare clic con il tasto destro?

Esistono alcune utili scorciatoie per aprire lo strumento Ispeziona elemento su Google Chrome per Windows. Questi tasti di scelta rapida sono i seguenti:

• Ctrl + Maiusc + C
• Il tasto funzione F12

I tasti di scelta rapida di cui sopra funzionano anche sul browser Mozilla per Windows.

Strumento Ispettore Mozilla

Come ispezionare gli elementi su Windows Mozilla Browser

Sul browser Mozilla, il processo è lo stesso di Google Chrome. Tuttavia, la finestra Inspector verrà visualizzata nella parte inferiore del browser anziché sul lato destro, come in Google Chrome.

Strumento Microsoft Edge Inspect

Come ispezionare gli elementi su Windows Edge Browser

Sorprendentemente, Inspect Element di Microsoft Edge funziona in modo simile al browser Google Chrome. Lo strumento Ispeziona è disponibile facendo clic con il pulsante destro del mouse. Inoltre, i codici HTML e CSS vengono visualizzati sul lato destro, in modo simile a Google Chrome.

Come ispezionare gli elementi su Mac

Stai utilizzando Google Chrome, Mozilla Firefox o Microsoft Edge sui computer Mac di Apple? In caso affermativo, puoi distribuire lo strumento Ispeziona elemento seguendo i passaggi sopra menzionati nella sezione Windows.

Ma se stai utilizzando il browser Web macOS predefinito, Safari, utilizzare lo strumento Ispeziona elemento è un gioco complicato. Per impostazione predefinita, Safari non mostra Ispeziona elemento su un Mac. Ecco cosa devi fare:

Come aprire Inspect Element su Mac

Prima di tutto, devi attivare gli strumenti per sviluppatori su Safari su un Mac. Ecco come:

• Esegui il browser Safari .
• Visita un sito Web in cui desideri ispezionare gli elementi Web.
• Seleziona Safari dalla barra dei menu in alto del browser Safari.
• Fare clic su Preferenze dal menu contestuale che si apre.
• Nella schermata Preferenze , selezionare Avanzate .
• Seleziona il menu Mostra sviluppo nella parte inferiore della schermata Preferenze avanzate .

Hai abilitato correttamente gli strumenti per sviluppatori su Safari per Mac. Ora, segui questi passaggi per utilizzare Ispeziona elemento:

• Su qualsiasi elemento di un sito Web come un testo o un'immagine, fai clic con il pulsante destro del mouse su .
• Apparirà un menu contestuale. In fondo, vedrai Ispeziona elemento .
• Fare clic su di esso per aprire una sezione di debug sotto il sito Web che mostra i codici HTML e CSS .

What Are the Keys for Inspect Element?

Potresti cercare scorciatoie per Ispeziona elemento su Mac. Puoi utilizzare quanto segue:

• Comando + Maiusc + C
• Premi il tasto Ctrl e seleziona un elemento qualsiasi.
• Fai clic sul trackpad con due dita

Come ispezionare gli elementi sui Chromebook

Chromebook utilizza Google Chrome come browser predefinito. Quindi, dopo aver aperto qualsiasi sito Web, è sufficiente fare clic con il pulsante destro del mouse per trovare l'opzione Ispeziona elemento nel menu contestuale che segue.

Se utilizzi un Chromebook al lavoro o a scuola, potresti porre questa domanda:

Why Can’t I Inspect on My School Chromebook?

La maggior parte degli amministratori scolastici e aziendali disabilita le funzionalità avanzate sul Chromebook che ti forniscono per lavoro o studio. Poiché gli strumenti per sviluppatori sono funzionalità avanzate, è probabile che il Chromebook della tua scuola o del tuo lavoro non mostri lo strumento Ispeziona elemento.

Come ispezionare gli elementi su iPad/iPhone

Sfortunatamente, non puoi utilizzare lo strumento Ispeziona elemento su un iPhone o iPad senza un Mac.

iOS e iPadOS hanno Web Inspector per l'app Safari. Tuttavia, funziona solo se colleghi il dispositivo mobile a un Mac su cui hai già attivato gli strumenti per sviluppatori per Safari. Di seguito sono riportati i passaggi che puoi provare:

• Apri l'app Impostazioni iPad/iPhone .
• Fai clic su Safari nel riquadro di navigazione a sinistra.

Apertura delle impostazioni di Safari su iPad o iPhone

• Quindi, scorri verso il basso sul lato destro per trovare e selezionare Avanzate .

Attivazione di Web Inspector su iPad e iPhone

• Attiva l'interruttore per Web Inspector .
• Ora collega il dispositivo mobile al Mac tramite USB .
• Autorizza l'iPhone/iPad su Mac.
• Apri qualsiasi sito Web su un dispositivo mobile su Safari.
• Ora esegui Safari sul Mac e seleziona Sviluppa nella barra dei menu in alto.
• Nel menu contestuale che si apre, cerca il nome del tuo dispositivo mobile.
• Passa il cursore sul dispositivo mobile per visualizzare tutti i siti Web aperti.
• Ora, seleziona qualsiasi sito Web per visualizzare il codice sorgente HTML e CSS sul browser Safari del Mac.

Conclusione

Hai esplorato tutti i modi possibili per utilizzare lo strumento Ispeziona elemento per la modifica temporanea di pagine web. Hai anche imparato come ispezionare elementi per vari dispositivi come Mac, Windows, Chromebook, iPad e iPhone.

La prossima volta che devi modificare una pagina web per divertimento o per esigenze professionali, prova questi metodi. Amerai sicuramente questi semplici passaggi rispetto ad altri metodi complicati spiegati altrove.

Non dimenticare di lasciare commenti qui sotto se i passaggi precedenti ti hanno aiutato, qualsiasi metodo che ritieni impegnativo o eventuali suggerimenti segreti sullo strumento Ispeziona elemento.

Hai bisogno di una pagina web come riferimento stampato? Scopri come salvare rapidamente una pagina Web come PDF ora!