Ho creato questa estensione dopo aver letto questo magnifico articolo di Josh Comeau. Avere una buona conoscenza di cosa sia uno stacking context è fondamentale per risolvere in breve tempo i problemi causati dalla proprietà z-index nei CSS. Comunque, anche se sappiamo come funzionano, non esistevano strumenti in grado di offrire una buona esperienza di debug al riguardo.
Questa estensione permette di visualizzare tutti gli stacking context presenti nella pagina con un metodo simile a quello dell’HTML inspector. Inoltre, selezionando uno stacking context, vengono fornite dettagliate informazioni su quale sia l’ordine degli stacking context “figli” insieme ai loro z-index, sul motivo per cui quell’elemento ha creato uno stacking context e altro ancora. Informazioni simili sono fornite anche in una comoda sidebar presente nel pannello Elements, il che rende ancora più piacevole l’esperienza di debugging.
Infine, questa estensione è Open Source, quindi potete vedere tutto il codice utilizzato andando sul repository github. Se trovate errori o avete dei suggerimenti, non esitate a lasciare un messaggio nella sezione Issues!
Da quando ho creato questa estensione, la ho già utilizzata in diverse occasioni. Sono sicuro che tornerà utile anche a voi!