Come utilizzare lelemento Ispeziona

Collegamenti del dispositivo

• Androide
• Chromebook
• Mac
• finestre
• Dispositivo mancante?

La maggior parte delle persone non sa che c'è un tesoro di strumenti per sviluppatori a loro disposizione e che è nascosto nel loro browser preferito.

Ogni browser Web offre strumenti per sviluppatori per verificare la codifica di un sito Web. Tuttavia, è un'entità estranea per l'utente medio di Internet. Dopotutto, chi vuole guardare il codice di un sito web, giusto?

A quanto pare, ci sono molte cose che puoi imparare osservando il codice di un sito web. Continua a leggere per scoprire cosa ha da offrire la funzionalità di ispezione dell'elemento e come utilizzarla.

La maggior parte dei browser dispone di strumenti per ispezionare gli elementi di un sito Web, ma generalmente funzionano tutti allo stesso modo.

Utilizzo di Ispeziona elemento in Google Chrome

1. Apri il sito web che desideri ispezionare.
   
2. Fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e seleziona Ispeziona .
   
   O
3. Fai clic sui tre punti verticali nell'angolo destro della barra degli strumenti.
   
4. Vai a Altri strumenti .
   
5. Seleziona Strumenti per sviluppatori .
   
   O
6. Premi il tasto di scelta rapida da tastiera F12 su un PC (o CMD + Opzioni + I su un Mac).
   

Utilizzo di Ispeziona elemento in Microsoft Edge

1. Apri un sito web.
   
2. Fai clic sui tre punti verticali nell'angolo in alto a destra della barra degli strumenti del browser.
   
3. Scorri verso il basso e fai clic su Altri strumenti .
   
4. Fare clic su Strumenti per sviluppatori .
   
   O
5. Fai clic con il pulsante destro del mouse in un punto qualsiasi del sito Web e fai clic su Ispeziona .
   
   O
6. Premi Ctrl + Maiusc + I .
   

Ognuno di questi tre metodi ti darà lo stesso risultato.

Se lo hai fatto correttamente, si apre un nuovo riquadro nella parte inferiore del browser. Questi sono gli strumenti per sviluppatori e includono la scheda Elementi. Questo è lo strumento necessario per ispezionare l'elemento.

Il pannello si aprirà nella parte inferiore dello schermo per impostazione predefinita, ma puoi sempre modificarne l'aspetto. Segui questi semplici passaggi per riposizionare il pannello Strumenti per sviluppatori:

1. Fai clic sui tre punti orizzontali nell'angolo superiore del pannello Strumenti per sviluppatori.
   
2. Seleziona un lato del dock (a sinistra, in basso o a destra) o sgancia in una finestra separata.
   

Passando il cursore accanto al bordo della cornice del pannello Strumenti per sviluppatori e trascinando si restringerà o allargherà l'area di lavoro. Ad esempio, se scegli di agganciare il pannello al lato destro della finestra del browser, prova a passare con il mouse sul bordo sinistro. Puoi trascinare il pannello per ridimensionarlo quando vedi il cursore a forma di freccia.

Utilizzo di Inspect Element (specifico del sistema operativo)

Sebbene molti dei passaggi coinvolti potrebbero essere stati coperti semplicemente mostrandoti come utilizzare Inspect Element nel browser, ti mostreremo comunque come sulla maggior parte dei sistemi operativi.

Come utilizzare Inspect Element su un Chromebook

Il browser predefinito su un Chromebook è Google, quindi segui le istruzioni del browser Chrome per accedere a Inspect Element . Ecco un piccolo corso di aggiornamento per te:

1. Apri un sito web.
   
2. Fare clic sui tre punti verticali nell'angolo in alto a destra della barra degli strumenti.
   
3. Seleziona Altri strumenti .
   
4. Fare clic su Strumenti per sviluppatori .
   

Puoi anche utilizzare il metodo del clic destro o il tasto funzione F12 per accedere più rapidamente agli Strumenti per sviluppatori.

Come utilizzare Inspect Element su un dispositivo Android

L'esecuzione di Inspect Element su un dispositivo Android è leggermente diversa. Scopri come accedere al pannello Ispeziona elemento su Android:

1. Premere il tasto funzione F12 .
   
2. Scegli Attiva /disattiva barra del dispositivo .
   
3. Seleziona il dispositivo Android dal menu a discesa.
   

Quando selezioni un dispositivo Android specifico, noterai che viene caricata una versione mobile del sito web. Da qui, sei libero di utilizzare la funzione Ispeziona elemento sul tuo dispositivo Android comodamente dal tuo desktop.

Questo metodo funziona sia per i browser Chrome che per Firefox perché hanno una funzione nei loro Strumenti per sviluppatori chiamata Simulazione dispositivo.

Funziona allo stesso modo anche per i dispositivi iPhone. Devi solo selezionare quello giusto nel menu a discesa.

Come utilizzare Ispeziona elemento in Windows

Lo strumento Ispeziona elemento non è necessariamente specifico del sistema operativo, ma è specifico del browser. Ciò significa che gli Strumenti per sviluppatori sono una funzionalità del browser che utilizzi e non necessariamente di Windows. Tuttavia, puoi accedere al pannello Ispeziona elemento indipendentemente dal browser che preferisci.

Se utilizzi il sistema operativo Windows, è probabile che utilizzi anche il browser Microsoft Edge. Scopri come accedere a Ispeziona elemento su MS Edge:

1. Apri il sito web che desideri ispezionare.
   
2. Tocca i tre punti verticali nell'angolo della finestra del browser.
   
3. Scorri verso il basso e seleziona Altri strumenti .
   
4. Fare clic su Strumenti per sviluppatori .
   

È inoltre possibile utilizzare il tasto funzione F12 per accedere più rapidamente a Ispeziona elemento. Inoltre, anche fare clic con il pulsante destro del mouse sulla pagina Web e selezionare Ispeziona funziona.

Come utilizzare Ispeziona elemento su un Mac

Se utilizzi un Mac, il tuo browser preferito è probabilmente Safari. L'apertura di Inspect Elements su Safari è leggermente diversa rispetto a Chrome e Firefox. Ma è altrettanto semplice con questi passaggi:

1. Apri il browser Safari.
   
2. Fai clic su Safari nella scheda dell'intestazione e seleziona Preferenze dal menu a discesa.
   
3. Fai clic sull'icona dell'ingranaggio avanzato situata nella parte superiore dello schermo.
   
4. Seleziona la casella che dice Mostra menu Sviluppo nella barra dei menu .
   

L'esecuzione di questi passaggi abilita la funzione Ispeziona elemento sul tuo browser. Se non abiliti prima Ispeziona elemento, non vedrai l'opzione quando apri un sito web.

Dopo aver completato questo passaggio, è sufficiente fare clic con il pulsante destro del mouse su qualsiasi pagina Web aperta e selezionare Ispeziona. Puoi anche utilizzare il comando dei tasti rapidi: CMD + Opzione + I (ispeziona).

Come utilizzare Ispeziona elemento su iOS

Vuoi utilizzare la funzione Ispeziona elementi per vedere come appare una versione mobile di una pagina Web su un iPhone? Puoi fare questo e molto altro con pochi semplici passaggi. Ma prima di guardare un elemento, devi abilitare Web Inspector per il tuo dispositivo iOS:

1. Vai su Impostazioni .
   
2. Ora seleziona Safari .
   
3. Scorri fino in fondo e tocca il menu avanzato .
   
4. Ora tocca l'interruttore a levetta per attivare Web Inspector .
   

Inoltre, assicurati che il menu Sviluppo sia abilitato sul tuo Mac seguendo i passaggi nella sezione precedente.

Dopo aver abilitato sia i dispositivi mobili iOS che i Mac, vedrai il menu Sviluppo nella barra in alto sul tuo Mac. Cliccaci sopra per vedere l'iPhone connesso e la pagina web attiva sul dispositivo. Selezionando la pagina web si apre anche una finestra di Web Inspector per la stessa pagina sullo schermo del tuo Mac.

Tieni presente, tuttavia, che queste indicazioni funzionano solo per Safari su Mac, non per Safari su Windows.

Come utilizzare l'elemento Ispeziona quando è bloccato

Occasionalmente, scoprirai che non puoi ispezionare una pagina web e la selezione Ispeziona è disattivata se provi a fare clic con il pulsante destro del mouse su di essa. Potresti pensare che sia bloccato, ma ci sono molti modi per aggirare questo problema:

Metodo 1: disattiva Javascript

1. Vai in Impostazioni .
   
2. Cerca Javascript .
   
3. Disattiva JavaScript .
   

Metodo 2: accedi agli strumenti per sviluppatori nel modo più lungo

Invece di fare clic con il tasto destro del mouse per ispezionare, procedere come segue:

1. Vai su Impostazioni nel tuo browser.
   
2. Seleziona Altri strumenti .
   
3. Scorri verso il basso e fai clic su Strumenti per sviluppatori .
   

Metodo 3: utilizzo del tasto funzione

Puoi anche provare a utilizzare il tasto funzione F12 sulle pagine Web che bloccano il clic destro per Ispeziona.

Potrebbe essere necessario provare tutti questi metodi prima di trovarne uno che funzioni per te. Come ultima risorsa, puoi anche provare a visualizzare il codice sorgente digitando view-source: [inserisci l'URL completo] .

Come utilizzare Inspect Element su un Chromebook scolastico

Se il tuo Chromebook è stato rilasciato da una scuola, l'utilizzo della funzione Ispeziona elemento richiede alcuni semplici passaggi:

1. Fare clic con il pulsante destro del mouse o toccare con due dita sulla pagina Web e selezionare Ispeziona .
   
2. Premi Ctrl + Maiusc + I .
   
3. Prova a utilizzare il metodo view-source:[url], ad esempio view-source:https://www.wikipedia.com .
   
   

Tuttavia, alcune scuole e organizzazioni bloccano questa funzione, quindi se non funziona per te, potresti dover contattare la tua organizzazione o l'amministratore della scuola.

Come utilizzare Ispeziona elemento per trovare le risposte

Puoi usare Ispeziona elemento per trovare risposte a una varietà di cose come:

• Anteprima del design del sito sui dispositivi mobili.
• Scopri le parole chiave utilizzate dai concorrenti.
• Prove di velocità.
• Modificare il testo su una pagina web.
• Trova esempi rapidi per mostrare agli sviluppatori ciò di cui hai bisogno.

Quando avvii il pannello Ispeziona elemento, vedrai tutto il codice per il sito web. Ciò include tutta la codifica JavaScript, CSS e HTML incorporata. È come vedere il codice sorgente di una pagina Web, tranne per il fatto che puoi apportare modifiche al codice. Inoltre, puoi vedere tutte le modifiche implementate in tempo reale.

Questo strumento rende prezioso per i professionisti del marketing, i designer e gli sviluppatori visualizzare eventuali modifiche al design prima di finalizzarle. Tuttavia, apportare modifiche alla codifica con Inspect Element non dura per sempre. Quando ricarichi la pagina, tornerà al suo stato predefinito.

Domande frequenti aggiuntive

Se non sei un esperto di Ispeziona elemento dopo aver letto sopra, ci sono più risposte qui.

Come posso utilizzare il comando Ispeziona elemento per trovare le risposte?

L'unico modo per trovare risposte utilizzando la funzione Ispeziona elemento è se il sito Web lo rivela immediatamente dopo l'invio. In questo caso, le risposte sono presenti nella codifica.

Altrimenti, stai semplicemente visualizzando la codifica per il quiz o il test quando usi la funzione Ispeziona elemento, così come tutte le risposte che invii.

Inspect Element è illegale?

No, lo strumento Ispeziona elemento non è illegale; è progettato per gli sviluppatori web. La visualizzazione del codice sorgente per un sito Web non è illegale; diventa un problema solo se utilizzi le informazioni raccolte per scopi nefasti, come tentare exploit, ecc.

È possibile disabilitare l'elemento Ispeziona nel browser?

La risposta breve è no.

Non puoi disabilitare l'elemento Ispeziona in un browser, ma puoi impostare parametri che impediscono agli utenti di eseguire determinate azioni come fare clic con il pulsante destro del mouse su una pagina web. Esistono numerosi tutorial online per impostare gli script appropriati per disabilitare determinati eventi. Tuttavia, non puoi effettivamente disabilitare la funzione Ispeziona elemento nella sua interezza.

Impara a conoscere le viscere di una pagina web

Il controllo della funzione Ispeziona elemento di una pagina Web è probabilmente uno strumento per sviluppatori di cui non sapevi di aver bisogno, anche se non sei uno sviluppatore tu stesso. Ha tonnellate di applicazioni di design e marketing che possono rendere il tuo sito web più fluido. E forse darti un vantaggio su un concorrente.

Per cosa usi Ispeziona elemento? Raccontacelo nella sezione commenti qui sotto.