Per esaminare un elemento, fai clic con il pulsante destro del mouse su di esso e scegli "Ispeziona " in Chrome, Firefox o Edge. In Safari, abilita prima le funzionalità per sviluppatori web, quindi fai clic con il pulsante destro del mouse o con il tasto Control premuto e scegli " Ispeziona elemento" . Il browser aprirà i suoi strumenti e selezionerà l'elemento nell'albero del documento in tempo reale. Chrome ed Edge chiamano il pannello " Elementi" , Firefox lo chiama "Ispeziona" e Safari lo chiama "Ispeziona Web" .
Oppure usa il menu con i tre puntini di Chrome: Altri strumenti > Strumenti per sviluppatori . Scorciatoie: F12 o Ctrl+Maiusc+I (Windows/Linux) e Comando+Opzione+I (Mac). Premi Ctrl+Maiusc+C o Comando+Maiusc+C per aprire Elements in modalità di selezione pagina.
Oppure seleziona Impostazioni e altro (…) > Altri strumenti > Strumenti per sviluppatori . Premi F12 o Ctrl+Maiusc+I (Windows/Linux) e Comando+Opzione+I (Mac) per riaprire l'ultimo pannello Strumenti per sviluppatori. Le scorciatoie personalizzate potrebbero essere diverse.
Apri gli Strumenti per sviluppatori con F12 o Ctrl+Maiusc+I (Windows/Linux) oppure Comando+Opzione+I (Mac). Ctrl+Maiusc+C o Comando+Opzione+C aprono l'Inspector. Se un sito sostituisce il menu contestuale (clic destro), usa una scorciatoia o il menu di Firefox.
Lo strumento Ispettore Web seleziona l'elemento su cui si è fatto clic. In alternativa, è possibile scegliere Sviluppo > Mostra Ispettore Web oppure premere Opzione+Comando+I per aprirlo per la pagina corrente. Queste istruzioni si applicano a Safari su Mac.
La riga evidenziata è un nodo nell'albero DOM in tempo reale. Espandete la freccia corrispondente per visualizzare gli elementi annidati oppure fate clic sull'icona del selettore di elementi, passate il mouse sopra la pagina e selezionate un elemento di destinazione. Il selettore è utile per elementi piccoli o sovrapposti.
Utilizza il riquadro Stili (chiamato Regole in Firefox) per visualizzare quali dichiarazioni CSS sono applicate e da dove provengono. Deseleziona una dichiarazione o modifica un valore per visualizzare in anteprima le modifiche al layout, al colore, alla spaziatura o alla tipografia. Questa operazione non sovrascrive i file del sito né modifica ciò che vedono gli altri visitatori.
Ogni browser dispone di un controllo di anteprima responsiva o per dispositivi mobili. Scegli o inserisci una dimensione del viewport più stretta, quindi esamina lo stesso DOM e gli stessi stili. Questo può rivelare problemi di breakpoint e di layout, ma non sostituisce i test su dispositivi reali.
| Browser | Apri gli strumenti per sviluppatori | Esamina un elemento della pagina |
|---|---|---|
| Chrome | F12 o Ctrl+Shift+I; Mac: Comando+Opzione+I | Ctrl+Maiusc+C; Mac: Comando+Maiusc+C |
| Firefox | F12 o Ctrl+Shift+I; Mac: Comando+Opzione+I | Ctrl+Maiusc+C; Mac: Comando+Opzione+C |
| Safari | Opzione+Comando+I su Mac | Fare clic con il pulsante destro del mouse/control-clic > Ispeziona elemento |
| Bordo | F12 o Ctrl+Shift+I; Mac: Comando+Opzione+I | Utilizza l'icona di selezione negli Strumenti per sviluppatori. |
Le scorciatoie possono variare a seconda del sistema operativo, della versione del browser o delle impostazioni personalizzate. Se una non funziona, utilizzare il menu del browser o il comando del menu contestuale.
Le modifiche ordinarie apportate nei pannelli Elementi, Ispettore o Stili sono modifiche temporanee nel browser. Ricaricando la pagina, di solito si ripristina la versione fornita dal sito. Alcuni flussi di lavoro per sviluppatori possono salvare le modifiche localmente sul proprio computer, ma anche in questo caso le modifiche non vengono pubblicate sul server del sito web. Considera gli Strumenti per sviluppatori come uno strumento per esaminare e testare una pagina, non come un modo per modificare un sito attivo per tutti.
Per informazioni aggiornate, consultare la guida ufficiale di Chrome DevTools , le scorciatoie di Firefox , la guida di configurazione e verifica di Safari di Apple e la panoramica di Microsoft Edge .
Scopri cosa significa online la metafora della "missione secondaria", come sperimentare hobby e comunità su diverse app e come proteggere la tua privacy, il tuo tempo e i tuoi limiti.
Scopri quando clip di processo, diari di produzione e registrazioni rapide possono contribuire a rafforzare la fiducia, e come confrontarli in modo equo con video professionali.
Scopri modi semplici ed economici per rallentare in un mondo sempre connesso, stabilisci dei limiti digitali più flessibili e goditi la routine quotidiana senza trasformare la tranquillità in un'altra sessione di shopping.
Scopri quando TikTok e YouTube offrono aiuto con tutorial, prodotti, viaggi e risposte a domande di tutti i giorni, e impara a verificare date, sponsorizzazioni e affermazioni importanti.
Scopri come i creatori rielaborano musica, tipografia, colori, moda e texture video degli anni '70 e '80 per il pubblico statunitense, tenendo conto del contesto culturale e dei diritti.
Confronta Reddit, Substack e Discord in termini di visibilità, moderazione, identità, costi e portabilità del pubblico, con una guida pratica per lettori e creatori.
La cultura del caos descrive video veloci, stratificati e remixabili, non una regola che imponga a tutti gli spettatori della Generazione Alpha di preferire lo stesso stile. Scopri le caratteristiche, i limiti della ricerca e una pratica checklist per i creatori.
Trova sfondi animati Android gratuiti per orologi e pannelli di stato personalizzati, immagini rotanti, scene che cambiano ed effetti fotografici Pixel, oltre a suggerimenti per la configurazione.
Blocca qualcuno su TikTok usando il menu Condividi, gestisci i commenti indesiderati, controlla la tua lista di persone bloccate e scopri cosa include e cosa non include il blocco.
Confronta 11 server DNS pubblici gratuiti, tra cui Cloudflare, Google e Quad9, con indirizzi verificati, opzioni di filtro e suggerimenti per la configurazione su Windows 11.
