Eseguire il debug degli stili CSS utilizzando DOM Explorer

Articolo
06/05/2015

Si applica a Windows e Windows Phone

Durante il debug delle app di Windows Store e Windows Phone Store, puoi visualizzare e modificare le regole CSS per gli elementi DOM selezionati e i relativi elementi figlio.

Le schede Stili e Calcolata di DOM Explorer mostrano le regole CSS applicabili a un elemento selezionato. Le regole sono visualizzate in base alla loro specificità secondo le regole di precedenza CSS. Le regole nella parte superiore di un selettore o di uno stile in una scheda (le regole più specifiche) vengono applicate per ultime all'elemento selezionato, mentre quelle nella parte inferiore vengono applicate per prime. Quando le regole vengono applicate, hanno la precedenza su quelle applicate in precedenza.

Le schede Stili, Calcolata e Modifiche forniscono visualizzazioni diverse delle informazioni di stile.

Usa la scheda Stili per visualizzare le regole organizzate dal nome del selettore CSS, ad esempio html, body. Puoi anche usare questa scheda per abilitare o disabilitare stili specifici, modificare manualmente i valori e vedere i risultati immediati delle modifiche.
Usa la scheda Calcolata per visualizzare i valori calcolati di uno stile. Ad esempio, se imposti una dimensione su 1em, il valore calcolato da Internet Explorer potrebbe essere 16px. Gli stili in questa scheda sono organizzati in base al nome, ad esempio height. Puoi anche usare questa scheda per abilitare o disabilitare stili specifici, modificare manualmente i valori e vedere i risultati immediati delle modifiche.

Nota

In Visual Studio 2013 Update 2, le informazioni presenti nella scheda Traccia sono state aggiunte alla scheda Calcolata e la scheda Traccia è stata rimossa.
Usa la scheda Modifiche per identificare e rilevare gli stili CSS modificati durante una sessione di debug.

Suggerimento

Le modifiche apportate nelle schede Stili e Calcolata non sono permanenti,infatti vengono perse quando arresti il debug.Per modificare il codice sorgente e ricaricare le pagine senza arrestare e riavviare il debugger, aggiorna l'app utilizzando il pulsante Pulsante Aggiorna app di Windows (Aggiorna applicazione Windows) nella barra degli strumenti Debug.Per ulteriori informazioni, vedi Aggiornare un'applicazione (JavaScript).

Esempio di correzione di una regola CSS

In questo esempio viene illustrato come controllare le regole CSS ed eseguire il debug di un problema di stile. Per questo esempio, supponiamo che tu voglia modificare il colore di un carattere usato per visualizzare i titoli di gruppo nel modello Applicazione divisa di Windows Store.

Nota

Questo esempio mostra un'app di Windows Store, ma tutte le funzionalità di DOM Explorer illustrate sono applicabili anche a un'app di Windows Phone Store.

Per visualizzare e modificare le regole CSS

In Visual Studio crea una nuova app di Windows Store usando JavaScript e HTML nel modello di progetto Applicazione divisa.
In Esplora soluzioni apri items.css, disponibile nella cartella delle pagine.
Sostituisci il codice CSS riportato di seguito:
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }
```
Con il seguente:
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }
```
Questa operazione aggiunge uno stile che specifica il colore #ff6a00 (arancione) per ogni elemento nell'elenco. Il selettore CSS, .itemspage .itemslist .item, indica un set di nomi di classe per gli elementi DIV in items.html, che vengono visualizzati come elementi annidati nel DOM attivo. L'elemento DIV item specifica gli elementi dell'elenco.
Seleziona Simulatore nell'elenco a discesa nella barra degli strumenti Debug (Computer locale è il valore predefinito).
Premi F5 per eseguire l'app in modalità debug.

Al termine del caricamento dell'app, osserva le intestazioni degli elementi dell'elenco, ad esempio Group Title: 1. Il colore rimane invariato, quindi il tentativo di applicare un colore arancione ai titoli non ha funzionato. Cercheremo di capire qual è la causa dell'errore lo risolveremo utilizzando le schede CSS in DOM Explorer.

Suggerimento

Dopo che l'app viene visualizzata nel simulatore, posiziona il simulatore proprio accanto alla finestra di Visual Studio in modo che sia possibile osservare immediatamente i risultati delle selezioni e le modifiche apportate agli stili CSS.
Passa a Visual Studio e fai clic su Seleziona elemento in DOM Explorer o premi CTRL+B. In questo modo la modalità di selezione cambia per consentirti di selezionare un elemento facendovi clic sopra e l'app viene portata in primo piano. La modalità viene ripristinata dopo un singolo clic. Ecco il pulsante Seleziona elemento.

Suggerimento

Puoi anche selezionare elementi HTML direttamente in DOM Explorer.Per ulteriori informazioni sulla selezione di elementi, vedi Guida introduttiva: Eseguire il debug di HTML e CSS.
Nel simulatore passa il mouse sul titolo del primo elemento nell'elenco, Group Title: 1, nel riquadro sinistro della home page. Il titolo è evidenziato come illustrato qui:

Nota

L'emulatore Windows Phone supporta solo in parte l'evidenziazione degli elementi al passaggio del mouse.
Fai clic sul titolo con il contorno. DOM Explorer seleziona automaticamente l'elemento HTML corrispondente, simile a quello illustrato.
```
<h4 class="item-title">Group Title: 1</h4>
```
Quando selezioni l'elemento H4 in DOM Explorer, le schede di DOM Explorer mostrano le regole associate all'elemento H4. La scheda Calcolata è illustrata qui, con la proprietà color aperta:

Questa visualizzazione fornisce informazioni utili sulle regole associate allo stile color, come illustrato di seguito:
- Il selettore CSS modificato in items.css, .itemspage .itemslist .item, non viene usato nel calcolo dello stile finale (viene mostrato con testo barrato). Non vengono inoltre utilizzate molte altre occorrenze dello stile color.
  
  Suggerimento
  
  Nel caso di nomi più lunghi del selettore, il nome completo viene visualizzato in una descrizione comando.
- Il valore CSS finale calcolato, rgba(255, 255, 255, 0.87), viene impostato in modo specifico per il selettore CSS seguente: .itemspage .itemslist .item .item-overlay .item-title, anch'esso definito in items.css.
  
  Suggerimento
  
  Ora che sappiamo dove viene impostato il colore, sappiamo dove possiamo modificarlo.Tuttavia, possiamo anche verificare le modifiche in DOM Explorer senza aggiornare l'app, come illustrato negli altri passaggi.
Deseleziona la casella di controllo per la prima occorrenza dello stile color, ovvero per il selettore .itemspage .itemslist .item .item-overlay .item-title. A questo punto, nel simulatore, vedrai che il colore dei titoli dell'elemento diventa arancione, come previsto, e non viene più eseguito l'override del selettore modificato in CSS, .itemspage .itemslist .item (non viene più applicato il testo barrato). Di seguito è riportata la scheda Calcolata dopo aver deselezionato la casella di controllo.
Seleziona la scheda Modifiche.

Usa la scheda Modifiche per identificare e rilevare le modifiche degli stili effettuate durante una sessione di debug. Nella figura seguente viene illustrato il selettore .itemspage .itemslist .item .item-overlay .item-title nella scheda Modifiche, di cui è stato eseguito l'override.
Puoi anche modificare manualmente i valori di stile CSS e visualizzare il risultato immediato tramite la scheda Stili.
Seleziona la scheda Stili.
Apri il selettore di stile .itemspage .itemslist .item .item-overlay .item-title.
Seleziona la prima occorrenza dello stile color e fai doppio clic sul valore della proprietà rgb(255, 255, 255, 0.87).
Usa la tastiera per modificare questo valore. Impostalo su rgb(255, 255, 0, 0.87) e premi invio. I colori dei titoli degli elementi nel simulatore vengono tutti cambiati in giallo.
Per modificare il file CSS di origine, fai clic sul collegamento items.css nella scheda Stili. Verrà aperto items.css, dove puoi modificare il valore dello stile color nel codice dell'app. Per aggiornare l'applicazione senza arrestare e riavviare il debugger, fai clic sul pulsante (Aggiorna applicazione Windows) nella barra degli strumenti Debug.

Vedere anche

Condividi tramite

Eseguire il debug degli stili CSS utilizzando DOM Explorer

Esempio di correzione di una regola CSS

Per visualizzare e modificare le regole CSS

Vedere anche

Attività

Concetti

Altre risorse

Risorse aggiuntive