Come usare lo strumento ispeziona elemento per lo sviluppo web

Ogni browser, che sia Firefox, Chrome, o Chromium, offre un set di strumenti per sviluppatori pensati per facilitare il lavoro di chi costruisce siti web, applicazioni e soluzioni digitali. Questi strumenti non solo supportano lo sviluppo tecnico, ma rendono la vita di sviluppatrici e sviluppatori un po' meno complicata. Ad esempio, il Page Inspector (o Ispeziona elemento), è tanto prezioso per lo sviluppo frontend, quanto a chi lavora sul backend: nel primo caso, ad esempio, permette di analizzare il DOM e risolvere problemi di layout, nel secondo caso permette di analizzare le chiamate di rete e diagnosticare errori lato server, ma non solo.

Leggi anche: I migliori strumenti per lo sviluppo frontend

Per chi, come noi, si occupa quotidianamente di sviluppo web, il Page Inspector è un alleato indispensabile. In questo articolo ti porteremo con noi per esplorare tutte le funzionalità che offre – o almeno quelle che per noi sono più interessanti – e scoprire come puoi sfruttarlo al meglio nel tuo lavoro.

Questa è solo una breve panoramica di quello che puoi fare con lo strumento Ispeziona Elemento integrato nel tuo browser.

Prima di andare avanti, e approfondire tutte queste funzionalità, scopriamo insieme come accedere a questo strumento e dove puoi trovarlo all’interno del browser.

Esistono molti browser, ma per aprire l'inspector indipendentemente se si è su Chrome o Firefox, basterà fare click con il tasto destro del mouse nel browser e cliccare l'opzione "Ispeziona" o "Inspect" oppure utilizzare le scorciatoie da tastiera (Ctrl+Shift+I).

Per tutti gli altri browser come Brave, Opera ecc, il procedimento è il medesimo: essendo basati su Chromium, il progetto open source su cui si basa anche Chrome, condividono lo stesso codice e, di conseguenza, le stesse scorciatoie.

Pertanto, non importa se utilizzi Brave o Opera o Chromium (noi del team tecnico Nephila abbiamo un debole per quest'ultimo): premi pure Ctrl+Shift+I e goditi l'inspector.

Adesso che abbiamo scoperto nel dettaglio cos’è il Page Inspector e come attivarlo nel browser, esploriamo meglio quali sono le attività che può aiutarci a svolgere nello sviluppo di una pagina web e come può rendere più fluido il processo di sviluppo.

Prima di andare avanti: tutte le funzionalità che descriviamo nell’articolo sono disponibili nei DevTools di Chrome e Firefox. Per ogni funzionalità, dove possibile, troverai le tab specifiche dove localizzare ciascuna funzione.

*tab Network su entrambi i browser (Chrome e Firefox)

Un altro strumento molto utile che viene utilizzato è il tab Console: la console è un elemento imprescindibile per controllare eventuali errori nelle funzioni Javascript, controllare se alcuni media non vengono caricati, per vedere se vengono generati errori 404, ed è anche un ottimo strumento di debug del codice Javascript.

Un modo per utilizzarlo mentre si fa debug è richiamare nel codice la funzione console.log() e confrontando l’output in questa tab è possibile capire se e dove sono stati riscontrati degli errori.

Un’altra funzionalità utilissima a livello di debug del codice ma meno conosciuta rispetto all’Elements o al Console, è la tab Coverage (su Chrome Dev Tools). Questa tab permette di visualizzare quanto del codice JavaScript, CSS e HTML del sito web in esame viene effettivamente utilizzato e quanto invece è inutilizzato.

Ciò può essere utile per identificare i file che possono essere ottimizzati o rimossi per migliorare le prestazioni del sito web. In questo tab è inoltre possibile esportare i dati di coverage per ulteriori analisi. È molto utile in alcune occasioni in cui si fa uso di certe librerie o pacchetti di codice che vanno ad agire su pochi elementi, per cui il codice superfluo risulta essere notevole.

Si tratta di un tool aggiuntivo, molto prezioso per chi si occupa di ottimizzazione delle performance web, del frontend e di riduzione della dimensione del codice. Se vuoi saperne di più, consulta la documentazione Google.

*tab Sources su Chrome e tab Debugger su Firefox

Il tab Elements / Style Editor, permette di visualizzare gli stili applicati a ciascun elemento e modificarli dinamicamente. È anche possibile aggiungere nuovi stili, nascondere o eliminare degli elementi. Questa funzionalità è particolarmente indicata quando c'è bisogno di testare qualche stile rapidamente in un codice complesso e strutturato oppure quando si vogliono effettuare modifiche in maniera provvisoria per fare test.

Quando presente, anche la source map è molto utile per capire in quale file CSS/SCSS si trovino le regole applicate ad un determinato elemento. È possibile consultarla tramite la tab Sources su Chrome Dev Tools. Se non la vedi, devi attivarla dalle impostazioni.*

*Per maggiori dettagli puoi consultare la documentazione Google.

Bonus point: selezionando un elemento e cliccando su :hov si possono simulare gli stati di quel determinato elemento (hover, focus, active, ecc) di modo da vedere/modificare anche gli stili in quel preciso stato.
Il tab Computed è utile per avere tutta la lista delle proprietà applicate ad un singolo elemento senza scendere nel dettaglio di ogni singola classe. Si usa principalmente per trovare un rapido riscontro se le regole CSS definite siano applicate correttamente, senza dover necessariamente indagare approfonditamente su una specifica classe.

Permette quindi di fare una sorta di panoramica degli stili applicati ad un elemento, ed include anche quelli "impostati" dal browser di default.

*tab Elements, sotto tab Styles e sotto tab Computed su Chrome, tab Rules, sotto tab Inspector su Firefox

Nella Tab Application sotto Storage e poi Cookies, sono mostrati quali cookie sono presenti nel browser per una determinata pagina o dominio. Si possono modificare, cancellare, ed è possibile vedere tutte le informazioni di cui si ha bisogno. Ad esempio, la data di scadenza, il nome o il valore di un cookie.

I cookie sono piccoli file di testo che i siti web salvano sul tuo dispositivo (computer, smartphone, ecc.) quando li visiti. Servono a memorizzare informazioni utili, come le preferenze o i dati di accesso, e possono essere utilizzati per personalizzare contenuti, tracciare l'attività dell'utente e ricordare dettagli tra una visita e l'altra.

Questo tab inoltre fornisce informazioni sulle risorse, la cache e lo spazio occupato dal sito web in esecuzione. Permette di visualizzare e gestire i dati di local storage, session storage e cookies associati al sito web, ed è molto utile ad esempio quando si vuole filtrare, modificare, o eliminare i cookie HTTP, o ispezionare e modificare il valore dei local e session storage a scopi di test.

*tab Application su Chrome, tab Storage su Firefox

Avere di fronte la struttura dell’HTML e poter modificarla è utilissimo per manipolare il DOM in fase di sviluppo. Tutto ciò è possibile grazie al Tab Elements su Chrome o Tab Inspector su Firefox.

Ad esempio, se dobbiamo testare un determinato testo, o creare dei div in HTML, o ancora, rintracciare un elemento specifico in modo tale da modificare la classe al quale appartiene, possiamo utilizzare questa sezione.

Un caso d'uso interessante è quando si testano i layout responsivi: avendo una pagina web, possiamo chiederci "cosa succederebbe se invece di 3 figli questo div ne avesse 5?". La risposta è, molto semplicemente: "Tasto destro su uno dei figli -> Copy -> Copy element, Tasto destro -> Paste" (su Chrome Dev Tools). Se vuoi ottenere le stesse informazioni su Firefox dovrai consultare le varie opzioni: Inner HTML, Outer HTML, CSS Selector, CSS Path, XPath.

*tab Elements su Chrome o tab Inspector su Firefox

Nelle tab Inspector su Firefox, e Elements su Chrome, sono presenti tutti i CSS applicati suddivisi per ogni classe definita nel codice. È utile nel caso in cui si debba testare in una situazione reale l’output del codice che verrà scritto successivamente. Talvolta è utile anche per definire un oggetto e riportare il codice scritto nell'inspector del browser direttamente nel codice di sviluppo, avendo già un’idea di come verrà mostrato l’elemento con uno stile modificato.

*tab Inspector, sotto tab Rules su Firefox, tab Elements, sotto tab Styles su Chrome

Il tab Layout mostra il box model degli elementi. Viene utilizzata tipicamente quando si deve avere un riscontro immediato e visivo su quali siano gli ingombri e le distanze di un determinato elemento. Selezionandone uno in particolare, appariranno dei colori (blu, viola e giallo su Firefox, su Chrome avrai blu per le dimensioni, verde per i padding, giallo per il border, arancione per i margini) che indicano le misure rispettivamente per dimensioni, padding e margini.

*tab Inspector, sotto tab Layout su Firefox; tab Elements, sotto tab Layout su Chrome

Il tab Compatibility è uno strumento molto utile quando si sviluppa un progetto cross-browser. Questo tab fornisce informazioni sulla compatibilità delle proprietà a seconda dei vari browser e delle rispettive versioni, in modo rapido e funzionale nel caso in cui non si voglia andare a cercare una versione di un browser molto specifica appoggiandosi a strumenti esterni, come ad esempio Can I Use.

Dall'avvento di HTML5, il web ha subito cambiamenti significativi: sono stati introdotti molti nuovi tag, mentre quelli più datati sono stati deprecati, senza nessuna garanzia sul loro funzionamento. Sebbene tutti i browser moderni dovrebbero supportare i tag più recenti, se si sta sviluppando un'applicazione web destinata anche a dispositivi o browser meno aggiornati e con caratteristiche diverse (come Safari o versioni più vecchie di Chrome), garantire la compatibilità diventa una sfida. In questi casi, il tab Compatibility diventa uno strumento essenziale per verificare rapidamente il supporto delle tecnologie su vari browser.

*tab Compatibility, solo Firefox

La minimizzazione, o minificazione, è una tecnica utilizzata per ridurre le dimensioni del codice sorgente JavaScript, eliminando tutti i caratteri superflui senza influire sulla sua funzionalità. Questo processo comporta la rimozione di spazi vuoti, commenti e punti e virgola, oltre alla sostituzione di nomi di variabili e funzioni con versioni più brevi. Il risultato finale è un file JavaScript più compatto e leggero, ottimizzato per un caricamento più rapido.

*tab Sources su Chrome, tab Network, Inspector e Debugger su Firefox DevTools

Il workspace su Chrome è uno strumento integrato nei DevTools che consente agli sviluppatori di modificare, salvare e testare in tempo reale i file del loro progetto direttamente all'interno del browser.

In pratica, con il workspace è possibile collegare la directory locale del progetto al browser, permettendo di:

• Modificare file locali: qualsiasi cambiamento apportato al codice nei DevTools può essere automaticamente salvato nei file locali;
• Testare modifiche in tempo reale: le modifiche vengono applicate istantaneamente al sito web visualizzato nel browser, facilitando il debugging e l'ottimizzazione;
• Migliorare il flusso di lavoro: evita di dover passare continuamente tra un editor di codice esterno e il browser per vedere i risultati delle modifiche.

*tab Workspace. Solo Chrome

Citando Google, i Core Web Vitals sono un insieme di metriche che misurano l'esperienza utente reale relativa a prestazioni di caricamento, interattività e stabilità visiva della pagina. È consigliabile ai proprietari di siti di avere buone metriche di Core Web Vitals per usufruire al meglio della Ricerca e garantire un'ottima esperienza utente in generale.

In particolare, LCP (Largest Contentful Paint) che misura la performance di caricamento e il valore dovrebbe essere inferiore a 2.5s dal primo caricamento; FID (First Input Delay) che misura l'interattività e dovrebbe assestarsi sotto i 100 ms; CLS (Cumulative Layout Shift) che misura la stabilità visuale e dovrebbe avere un valore che non superi 0.1

*tab Rendering su Chrome. Su Firefox DevTools non esiste un tab specifico per il rendering come su Chrome, ma se hai bisogno di verificare problemi di rendering puoi controllare il tab Performance, oppure attivare dalle opzioni funzionalità come Pain Flashing o Layout Shift Regions, molto utili anche per verificare il rendering lato accessibilità.

***

Siamo arrivati alla fine! Grazie per aver letto fin qui. Speriamo che questo articolo possa esserti stato utile per trovare ispirazione e consigli di utilizzo su uno strumento che per lo sviluppo web è essenziale. Non esitare a contattarci, se hai domande, curiosità o semplicemente vuoi fare due chiacchiere!

Ci siamo persi delle funzioni fondamentali o utilizzi il Page Inspector in un modo che non abbiamo descritto in questo post? Ci teniamo a saperlo e a scoprire come utilizzi anche tu questo strumento. Puoi farlo tramite i commenti al blog post che vedi qui sotto, oppure tramite i nostri social: Linkedin, X, Mastodon, Facebook.

Ti aspettiamo. Al prossimo articolo! 😉