Scopri nuovi flussi di lavoro in questo riferimento completo delle funzionalità di Chrome DevTools relative alla visualizzazione e alla modifica del CSS.
Per informazioni di base, consulta Visualizzare e modificare il CSS.
Seleziona un elemento
Il riquadro Elementi di DevTools ti consente di visualizzare o modificare il CSS di un elemento alla volta.
Nello screenshot, l'elemento h1 evidenziato in blu nella struttura ad albero DOM è l'elemento selezionato.
A destra, gli stili dell'elemento vengono visualizzati nella scheda Stili. A sinistra, l'elemento è evidenziato nel viewport, ma solo perché il mouse è sopra di esso nell'albero DOM.
Per un tutorial, consulta Visualizzare il CSS di un elemento.
Esistono molti modi per selezionare un elemento:
- Nel viewport, fai clic con il tasto destro del mouse sull'elemento e seleziona Ispeziona.
- In Strumenti per gli sviluppatori, fai clic su Seleziona un elemento
o premi Comando+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento nel viewport.
- In DevTools, fai clic sull'elemento nell'albero DOM.
- In DevTools, esegui una query come
document.querySelector('p')nella console, fai clic con il tasto destro del mouse sul risultato e seleziona Mostra nel riquadro Elementi.
o premi Comando+Maiusc+C (Mac) o
Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento nel
viewport.Visualizza CSS
Utilizza le schede Elementi > Stili ed Elaborato per visualizzare le regole CSS e diagnosticare i problemi relativi al CSS.
Navigare con i link
La scheda Stili mostra link in varie posizioni ad altri punti, tra cui, a titolo esemplificativo:
- Accanto alle regole CSS, agli stili e alle origini CSS. Questi link aprono il riquadro Origini. Se il foglio di stile è minimizzato, consulta Rendere leggibile un file minimizzato.
- Nelle sezioni Ereditato da…, agli elementi principali.
- Nelle chiamate a
var(), alle dichiarazioni delle proprietà personalizzate. - Nelle proprietà di abbreviazione
animation, a@keyframes. - Link Scopri di più nelle descrizioni comando della documentazione.
- e molto altro.
Eccone alcuni in evidenza:
Lo stile dei link può variare. Se non sai con certezza se si tratta di un link, prova a fare clic per scoprirlo.
Visualizzare descrizioni comando con documentazione CSS, specificità e valori delle proprietà personalizzate
Elementi > Stili mostra descrizioni comando con informazioni utili quando passi il mouse sopra elementi specifici.
Visualizza la documentazione CSS
Per visualizzare una descrizione comando con una breve descrizione CSS, passa il mouse sopra il nome della proprietà nella scheda Stili.
Fai clic su Scopri di più per accedere a una documentazione di riferimento CSS di MDN su questa proprietà.
Per disattivare le descrizioni comando, seleziona Non mostrare.
Per riattivarli, seleziona Impostazioni > Preferenze > Elementi >
Mostra descrizione comando della documentazione CSS.
Visualizza la specificità del selettore
Passa il mouse sopra un selettore per visualizzare una descrizione comando con il relativo peso di specificità.
Visualizzare i valori delle proprietà personalizzate
Passa il mouse sopra un --custom-property per visualizzarne il valore in una descrizione comando.
Visualizzare CSS non validi, sostituiti, inattivi e di altro tipo
La scheda Stili riconosce molti tipi di problemi CSS e li evidenzia in diversi modi.
Consulta Informazioni sul CSS nella scheda Stili.
Visualizza solo il CSS effettivamente applicato a un elemento
La scheda Stili mostra tutte le regole che si applicano a un elemento, incluse le dichiarazioni che sono state sostituite. Se non ti interessano le dichiarazioni sostituite, utilizza la scheda Calcolato per visualizzare solo il CSS effettivamente applicato a un elemento.
- Seleziona un elemento.
- Vai alla scheda Calcolata nel riquadro Elementi.
Seleziona la casella di controllo Mostra tutto per visualizzare tutte le proprietà.
Consulta Informazioni sul CSS nella scheda Elaborato.
Visualizzare le proprietà CSS in ordine alfabetico
Utilizza la scheda Calcolata. Consulta Visualizzare solo il CSS effettivamente applicato a un elemento.
Visualizzare le proprietà CSS ereditate
Seleziona la casella di controllo Mostra tutto nella scheda Calcolata. Consulta Visualizzare solo il CSS effettivamente applicato a un elemento.
In alternativa, scorri la scheda Stili e individua le sezioni denominate Inherited from <element_name>.
Visualizzare le regole at-rule CSS
Le regole at sono istruzioni CSS che ti consentono di controllare il comportamento del CSS. Elementi > Stili mostra le seguenti regole at in sezioni dedicate:
Visualizza le regole at @property
La regola at @property CSS ti consente di definire esplicitamente le proprietà CSS personalizzate e di registrarle in un foglio di stile senza eseguire JavaScript.
Passa il mouse sopra il nome della proprietà nella scheda Stili per visualizzare una descrizione comando con il valore, i descrittori e un link alla registrazione della proprietà nella sezione comprimibile @property nella parte inferiore della scheda Stili.
Per modificare una regola @property, fai doppio clic sul nome o sul valore.
Visualizza le regole at-rule @supports
La scheda Stili mostra le regole at-rule CSS @supports se sono applicate a un elemento. Ad esempio, controlla il seguente elemento:
Se il browser supporta la funzione lab(), l'elemento è verde, altrimenti è viola.
Visualizza le regole at-rule @scope
La scheda Stili mostra le regole at @scope CSS se sono applicate a un elemento.
Le nuove regole at @scope fanno parte della specifica CSS Cascading and Inheritance Level 6. Queste regole ti consentono di definire l'ambito degli stili CSS, in altre parole di applicare esplicitamente gli stili a elementi specifici.
Visualizza la regola @scope nell'anteprima seguente:
- Esamina il testo nella scheda nell'anteprima.
- Nella scheda Stili, individua la regola
@scope.
In questo esempio, la regola @scope sostituisce la dichiarazione background-color CSS globale per tutti gli elementi <p> all'interno di elementi con una classe card.
Per modificare la regola @scope, fai doppio clic su di essa.
Visualizza le regole at-rule @font-palette-values
La regola at CSS @font-palette-values ti consente di personalizzare i valori predefiniti della proprietà font-palette. Elementi > Stili mostra questa atrule in una sezione dedicata.
Visualizza la sezione @font-palette-values nell'anteprima successiva:
- Esamina la seconda riga di testo nell'anteprima.
- In Stili, trova la sezione
@font-palette-values.
In questo esempio, i valori della tavolozza dei caratteri --New sostituiscono quelli predefiniti del carattere colorato.
Per modificare i valori personalizzati, fai doppio clic su di essi.
Visualizza le regole at @position-try
La regola CSS @position-try insieme alla proprietà position-try-options ti consente di definire posizioni di ancoraggio alternative per gli elementi. Per scoprire di più, consulta Introduzione all'API CSS Anchor Positioning.
Elementi > Stili risolve e collega quanto segue:
- I valori della proprietà
position-try-optionsin una sezione@position-try --namededicata. - Valori della proprietà
position-anchore argomentianchor()agli elementi corrispondenti con attributipopovertarget.
Controlla i valori position-try-options e le sezioni @position-try nell'anteprima successiva:
popover- Nell'anteprima, apri il sottomenu, ovvero fai clic su IL TUO ACCOUNT e poi su NEGOZIO.
- Esamina l'elemento con
id="submenu"nell'anteprima. - In Stili, individua la proprietà
position-try-optionse fai clic sul relativo valore--bottom. La scheda Stili ti indirizza alla sezione@position-trycorrispondente. - Fai clic sul link del valore
position-anchoro sugli stessi argomentianchor(). Il riquadro Elementi seleziona l'elemento con l'attributopopovertargetcorrispondente e la scheda Stili mostra il CSS dell'elemento.
Per modificare i valori, fai doppio clic su di essi.
Visualizzare il modello di casella di un elemento
Per visualizzare il modello a casella di un elemento, vai alla scheda Stili e fai clic sul pulsante 
Per modificare un valore, fai doppio clic su di esso.
Cercare e filtrare il CSS di un elemento
Utilizza la casella Filtra nelle schede Stili e Calcolata per cercare proprietà o valori CSS specifici.
Per cercare anche le proprietà ereditate nella scheda Elaborato, seleziona la casella di controllo Mostra tutto.
Per navigare nella scheda Calcolata, raggruppa le proprietà filtrate in categorie comprimibili selezionando Raggruppa.
Emula una pagina con lo stato attivo
Se trasferisci lo stato attivo dalla pagina a DevTools, alcuni elementi in overlay vengono nascosti automaticamente se vengono attivati dallo stato attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione Emula una pagina con lo stato attivo ti consente di eseguire il debug di un elemento come se fosse attivo.
Prova a emulare una pagina attiva in questa