Visualizzazione delle Griglie nel Debugger del Browser

Quando si lavora con le griglie durante lo sviluppo di un sito web, a volte è necessario verificare che il posizionamento degli elementi all'interno della griglia sia corretto. Inoltre, se è stato commesso un errore, dobbiamo capire da quale elemento ha origine il posizionamento errato. A questo scopo possiamo utilizzare il debugger del browser.

Esaminiamo una griglia utilizzando il debugger del browser Chrome. Per prima cosa, selezioniamo l'oggetto di nostro interesse che contiene la griglia, clicchiamo con il tasto destro del mouse e scegliamo l'opzione 'Ispeziona' dal menu:

Ora, nel pannello del browser aperto sulla destra, passiamo il cursore sul nostro oggetto con la griglia e notiamo che accanto all'elemento genitore, sulla riga, si trova il pulsante grid:

Dopo aver cliccato sul pulsante grid, vedremo che il nostro oggetto viene visualizzato in un sistema di griglia visivamente intuitivo, con l'indicazione della numerazione di tutte le colonne e le righe:

Ora prestate attenzione al pannello nel debugger. In esso sono presenti le schede Styles, Computed, Layout e altre. Passate dalla scheda Styles, che è attiva per impostazione predefinita, alla scheda Layout. Vedrete un elenco di impostazioni per la vostra griglia:

Selezioniamo per la visualizzazione la prima opzione Show track sizes, che mostra la dimensione delle tracce:

Tramite l'opzione Show area names è possibile visualizzare i nomi delle aree della griglia, se sono stati impostati. E selezionando l'opzione Extend grid lines vedremo le linee delle tracce estese oltre i confini della griglia: