Indipendentemente dalla modalità di accesso utilizzata gli strumenti per sviluppatori si aprono all’interno di un’ apposita finestra suddivisa in 8 distinte sezioni individuate dalle etichette presenti nella parte superiore della finestra dedicata e corrispondenti allo specifico tipo di informazioni che questi strumenti forniscono.

Per navigare attraverso i pannelli è possibile utilizzare delle scorciatoie da tastiera:

• Ctrl + ‘ per passare al pannello precedente;
• Ctrl + ì per passare al pannello successivo.

Facciamo una rapida panoramica delle principali caratteristiche di questi pannelli:

• Elements: tramite questo pannello è possibile vedere la pagina web esattamente come la vede il browser. E’ quindi possibile analizzare il DOM della pagina, i suoi elementi HTML le varie proprietà CSS ed è inoltre possibile modificare tutti questi elementi in tempo reale.

Questa è la sezione che utilizzeremo maggiormente nello sviluppo del nostro sito per visualizzare il markup HTML generato da Passweb, per recuperare le classi CSS o gli identificativi dei vari componenti, per visualizzare quelli che saranno i risultati dell’applicazione di determinate proprietà CSS ecc…

• Resources: all’interno di questa sezione è possibile visualizzare tutte le risorse caricate e disponibili nella pagina ispezionata, dalle immagini agli script, ai cookies;
• Network: questo pannello è utile per tenere sotto controllo i tempi di caricamento della pagina, in quanto permette di vedere tutte le richieste fatte al server, il loro tempo di esecuzione e la banda richiesta;
• Timeline: è uno strumento che permette di analizzare più nel dettaglio i tempi di caricamento dei diversi elementi della pagina;
• Sources: all’interno di questa sezione sono visualizzati tutti gli script caricati nella pagina, arricchiti da un debugger e dalla possibilità di modificarli in tempo reale;
• Profiles: questo pannello permette di visualizzare nello specifico le performance degli script JavaScript, cioè i tempi impiegati da ogni singola funzione, per capire meglio dove intervenire;
• Audits: questo strumento analizza il caricamento della pagina e mostra alcuni suggerimenti su come migliorarla;
• Console: permette di interagire con la pagina tramite del codice Javascript

Ora prima di passare ad esaminare nel dettaglio le funzionalità e le possibilità offerte dalle singole sezioni degli strumenti per sviluppatori vediamo rapidamente anche a cosa servono gli altri pulsanti presenti all’interno di questa finestra.

Il primo pulsante in alto a sinistra, raffigurante una lente di ingrandimento , consente di entrare in modalità “Ispeziona Elemento”. Una volta attivata tale modalità sarà possibile passare con il mouse sopra un qualsiasi elemento presente all’interno della pagina, selezionarlo cliccandoci sopra con il tasto sinistro del mouse e visualizzare così il suo markup HTML all’interno del pannello “Elements”

Immediatamente a fianco della piccola lente di ingrandimento troviamo poi un pulsante raffigurante un dispositivo Mobile che ci consente di abilitare/disabilitare l’emulatore di dispositivi mobile particolarmente utile per esaminare come risulterebbe visualizzato il nostro sito all’interno di uno specifico dispositivo mobile (smartphone o tablet).

Per maggiori informazioni in merito a questo emulatore si rimanda all’apposita sezione di questa guida.

Proseguendo da sinistra verso destra troviamo poi i pulsanti per accedere, come precedentemente evidenziato, alle 8 diverse sezioni in cui risultano essere suddivisi gli Strumenti per Sviluppatori e un ulteriore gruppo di altri 4 pulsanti.

Il primo di essi consente di attivare un ulteriore sezione degli Strumenti per Sviluppatori all’interno della quale troviamo altre importanti funzionalità come ad esempio:

• la Console, già presente all’interno dell’apposita sezione principale, grazie alla quale poter interagire con la pagina web mediante la scrittura di codice javascript
• un pannello di ricerca, attivabile anche con la combinazione di tasti CTRL + F, grazie al quale poter effettuare ricerche testuali sui contenuti delle varie sezioni dei developer tool
• una sezione dedicata all’attivazione e alla gestione dell’emulazione dei dispositivi mobile
• una sezione “Rendering” all’interno della quale poter settare alcune impostazioni sulle modalità di renderizzazione della pagina web nel momento in cui dovessero essere aperti gli Strumenti per Sviluppatori

Il pulsante raffigurante un piccolo ingranaggio consente di accedere alla maschera contenente le impostazioni di configurazione dei Developer Tool all’interno della quale sarà possibile ritrovare, tra le altre cose, anche l’elenco degli shortcuts da utilizzare per accedere più velocemente alle varie funzionalità degli Strumenti per Sviluppatori.

Proseguendo ritroviamo il pulsante precedentemente analizzato grazie al quale poter staccare la finestra dedicata agli strumenti per sviluppatori da quella dedicata alla pagina web .

Infine l’ultimo pulsante raffigurante una piccola x consente, ovviamente, di chiudere gli strumenti per sviluppatori, tornando quindi alla normale visualizzazione e gestione della pagina web.

Oltre ai pulsanti appena analizzati, potrebbero comparire, nella barra degli strumenti della finestra dedicata ai Developer tool, anche delle piccole icone relative ad eventuali messaggi di errore presenti all’interno della pagina.

In particolare l’icona raffigurante una piccola x rossa indica la presenza di uno o più errori javascript presenti all’interno della pagina. Questo tipo di errori se non risolti potrebbero anche compromettere il corretto funzionamento della pagina web

L’icona raffigurante un piccolo triangolino giallo rappresenta invece un semplice messaggio di warning, ossia una potenziale situazione che non dovrebbe compromettere il funzionamento della pagina ma che dovrebbe comunque essere valutata e se possibile risolta.

Cliccando su una di queste icone si verrà immediatamente ricondotti alla porzione di codice in cui è localizzato l’errore e/o il messaggio di warning.