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
- Quando si usa Google Chrome, fare clic con il pulsante destro del mouse ovunque su un sito web.
- Apparirà il menu contestuale del tasto destro.
- In fondo, vedrai Ispezionare.
- Clic Ispezionare per visualizzare i codici HTML e CSS su a pannello laterale destro.
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 + Spostare + C
- Il tasto funzione F12
I tasti di scelta rapida di cui sopra funzionano anche sul browser Mozilla per Windows.
Strumento Ispettore Mozilla
Sul browser Mozilla, il processo è lo stesso di Google Chrome. comunque, il Ispettore la finestra verrà visualizzata nella parte inferiore del browser anziché sul lato destro, come in Google Chrome.
Strumento Microsoft Edge Inspect
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.
Tuttavia, se utilizzi 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:
- Correre IL Navigatore Safari.
- Visita un sito Web in cui desideri ispezionare gli elementi Web.
- Selezionare Safari dalla barra dei menu in alto del browser Safari.
- Clic Preferenze dal menu contestuale che si apre.
- Sul Schermata delle preferenze, Selezionare Avanzate.
- Spunta il Mostra Sviluppo menu in fondo al Preferenze avanzate schermo.
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, fare clic con il pulsante destro del mouse.
- 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 HTML e CSS codici.
Quali sono le chiavi per ispezionare l'elemento?
Potresti cercare scorciatoie per Ispeziona elemento su Mac. Puoi utilizzare quanto segue:
- Comando + Spostare + C
- premi il Controllo tasto e quindi selezionare qualsiasi elemento.
- 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:
Perché non riesco a ispezionare sul Chromebook della mia scuola?
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'iPad/iPhone Impostazioni app.
- Clic Safari nel riquadro di navigazione a sinistra.
- Quindi, scorri verso il basso sul lato destro per trovare e selezionare Avanzate.
- Attiva l'interruttore per Ispettore web.
- Ora collega il dispositivo mobile al Mac utilizzando USB.
- Autorizza l'iPhone/iPad su Mac.
- Apri qualsiasi sito Web su un dispositivo mobile su Safari.
- Ora esegui Safari sul Mac e seleziona Sviluppare sulla 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 gli 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? Impara come salvare rapidamente una pagina Web come PDF Ora!