Come utilizzare Google Chrome per eseguire il debug di CSS

Lo strumento Inspect Element è ottimo quando si tratta di eseguire il debug delle pagine Web in tempo reale. Puoi utilizzare questo strumento per visualizzare in anteprima e modificare il design di un sito Web. Ti consente inoltre di farlo senza dover ricaricare la pagina, visualizzando immediatamente le modifiche CSS.

Questo articolo spiega come visualizzare le classi CSS e i relativi stili applicati nella finestra Ispeziona elemento. Spiegherà anche come utilizzarlo per visualizzare in anteprima le modifiche apportate al tuo CSS in tempo reale.

Apertura di Inspect Element in Google Chrome

Puoi visitare qualsiasi sito Web e aprire la finestra Ispeziona elemento per vedere come appare il suo codice HTML o CSS. Questo tutorial utilizzerà un sito web di esempio dimostrare.

Puoi aprire la finestra Ispeziona elemento in Google Chrome premendo il tasto F12 chiave. Puoi anche fare clic con il pulsante destro del mouse in qualsiasi punto della pagina e fare clic su Ispezionare.

La finestra Ispeziona elemento si aprirà con il codice HTML per la parte del sito Web in cui hai fatto clic con il pulsante destro del mouse. Questo è dove puoi anche tu

modificare il testo del sito Web utilizzando Google Chrome.

La scheda Stili nella finestra Ispeziona elemento

Nella stessa finestra Ispeziona elemento, sotto il Elementi scheda, c'è un posto per visualizzare sia il codice HTML che CSS. Puoi vedere il codice HTML a sinistra della finestra Ispeziona elemento. Puoi trovare il codice CSS a destra, sotto il Stili scheda.

Supponiamo che tu abbia un elemento HTML con una classe chiamata "card-padding", con il riempimento destro e sinistro applicato:

.imbottitura della carta {
 padding-destra: 0vh;
 riempimento a sinistra: 0vh;
}

Se hai visualizzato in anteprima questo sito Web nel browser, sarai in grado di selezionare il div elemento con la classe "card-padding". Qualsiasi stile applicato alla classe "card-padding" verrebbe mostrato a destra, sotto il Stili scheda.

Quando passi il mouse su un elemento nella visualizzazione del codice HTML, quella parte della pagina Web verrà evidenziata nel browser Web. Il tipo di elemento HTML, insieme a qualsiasi nome di classe, verrà visualizzato anche in una finestra di dialogo accanto all'elemento.

In questo caso, vedrai il contenitore div con i nomi delle classi "row", "card-padding" e "pb-5" evidenziati nella pagina.

Come apportare modifiche al CSS in tempo reale

Puoi modificare il CSS direttamente dalla scheda Stili:

1. Usando questo sito web, fare clic con il pulsante destro del mouse sulla prima intestazione.
2. Su quella particolare intestazione h4, vedrai applicata una classe chiamata "text-grey" con un colore di #8a8a8a.
3. Cambia invece il colore in qualcos'altro, come l'arancione. Vuoi cambiare solo il valore stesso e non il nome della proprietà, "colore".
4. Vedrai l'intestazione cambiare da grigio scuro ad arancione.
5. Se vuoi disabilitare un particolare stile CSS, deseleziona la casella a sinistra dello stile.
6. Puoi anche aggiungere più stili al set originale. Fai clic appena sotto o a destra di una proprietà per iniziare ad aggiungerne una nuova. Dovresti usare la stessa sintassi di un normale file CSS quando aggiungi nuovi stili.
7. Se stai visualizzando l'anteprima di un sito web locale, puoi continuare ad apportare modifiche CSS fino a quando non ti avvicini all'aspetto e al design richiesti per la tua interfaccia utente. Successivamente, puoi copiare nuovamente le modifiche CSS apportate nel tuo codice locale.

Come modificare CSS da librerie o framework di terze parti

Puoi anche apportare modifiche agli elementi HTML se utilizzi librerie o framework di terze parti come Bootstrap.

1. Usando questo sito web, fai clic con il pulsante destro del mouse su uno dei pulsanti Bootstrap nella pagina.
2. Vedrai due classi applicate al pulsante, "btn" e "btn-primary". Bootstrap ha già il suo stile applicato a entrambe queste classi. I colori utilizzati come colori di sfondo e bordo sono #007bff. Cambialo con qualcos'altro, come Violet.
3. Se stai visualizzando l'anteprima di un sito Web locale, puoi aggiungere nuovamente le nuove modifiche al codice locale. A seconda dell'ordine del tuo CSS, potrebbe essere necessario utilizzare un selettore CSS più specifico. Ad esempio, anteporre al selettore ".btn". Questo sovrascriverà lo stile Bootstrap originale.

   .btn.btn-primario {
    colore di fondo: viola;
    colore del bordo: viola;
   }

Cosa significa element.style nella scheda Stili?

Ogni elemento HTML evidenziato nella finestra Esamina elemento ha un blocco element.styles. Questo equivale ad aggiungere uno stile in linea all'elemento HTML, invece di indirizzarlo utilizzando un selettore.

1. Fare clic con il pulsante destro del mouse su un elemento HTML. Aggiungi qualsiasi stile alla sezione element.style, ad esempio:

   colore: bianco fumo;

2. Vedrai che anche il codice per l'elemento HTML è cambiato. Il codice all'interno dell'elemento HTML ora ha la nuova riga:

   stile="colore: bianco fumo;"

Come gli elementi HTML figlio ereditano lo stile

Se hai due diversi valori di stile applicati a un elemento padre e un elemento figlio, il valore nell'elemento figlio avrà la precedenza.

1. Usando questo sito web, fai clic con il pulsante destro del mouse in un punto qualsiasi dei bordi esterni del sito web.
2. Nella sezione HTML della finestra Ispeziona elemento, concentrati su due particolari elementi HTML. C'è un elemento div genitore a cui è applicata una classe "content". Questo elemento HTML ha un elemento figlio h4, con una classe "text-grey" applicata.
3. Seleziona l'elemento HTML h4 figlio e disabilita lo stile del colore nella classe "text-grey".
4. Seleziona l'elemento HTML principale con la classe "content". Aggiungi il seguente stile CSS alla classe:

   colore rosso;

   Tutto il testo all'interno del div padre diventerà rosso. Questa modifica si estenderà anche agli elementi figlio, il che significa che anche h4 avrà un colore rosso.
5. Seleziona l'elemento HTML h4 figlio e aggiungi un nuovo stile alla classe "text-grey":

   colore: verde;

   Questo sovrascriverà lo stile di qualsiasi classe genitore. L'elemento HTML h4 passerà dal rosso al verde.
6. Vedrai anche una barratura se visualizzi lo stile per la classe "contenuto". Ciò conferma che l'elemento figlio h4 sta sovrascrivendo il colore del genitore.

I vantaggi del debug del tuo CSS nel browser

Il debug di CSS nel tuo browser può far risparmiare molto tempo e velocizzare il flusso di lavoro di codifica. Ciò è particolarmente vero se devi vedere in che modo le tue nuove modifiche CSS influiscono sull'interfaccia utente del tuo sito Web in tempo reale.

Puoi utilizzare questa tecnica invece di apportare modifiche al codice locale e ricaricare l'app. Ciò ti eviterà di indovinare quali valori CSS funzionerebbero, poiché ora puoi visualizzare le modifiche dell'interfaccia utente mentre le apporti.

Puoi apportare modifiche alla finestra Ispeziona elemento fino a quando non ti avvicini al design desiderato. Una volta che hai, puoi quindi copiare il codice dalla finestra Ispeziona elemento, di nuovo nel tuo codice locale. Puoi ancora eseguire nuovamente la tua app per verificare che le nuove modifiche CSS funzionino ancora.

Questo tutorial ha illustrato le nozioni di base su come eseguire il debug del CSS di un sito Web utilizzando la finestra Ispeziona elemento, incluso dove trovare il CSS nella scheda Stili.

Ha anche spiegato come apportare modifiche al CSS e visualizzare le modifiche visive all'interfaccia utente in tempo reale. Si spera che tu capisca anche come apportare modifiche quando il CSS utilizza una libreria di terze parti e come funziona l'ereditarietà dello stile.

Ci sono molte altre cose interessanti che puoi fare con la finestra Ispeziona elemento.

7 cose divertenti che puoi fare con Inspect Element

Leggi Avanti

Circa l'autore