Gli strumenti per sviluppatori di Google Chrome

Tra gli strumenti disponibili nel menu di Google Chrome, la voce Strumenti per sviluppatori è probabilmente la più importante e utile, almeno per chiunque sia interessato anche al “dietro le quinte” di una pagina. Come il nome stesso suggerisce, questa voce raccoglie una serie di strumenti, pensati principalmente per chi si occupa di produrre pagine o applicazioni web, ma in linea generale possono essere utili e interessanti anche per chi non si sognerebbe mai di diventare uno sviluppatore, ma vuole solo saperne un po’ di più e vedere come funzionano le cose. Gli strumenti disponibili sono otto e descriverli tutti quanti in un colpo solo occuperebbe troppo spazio: per semplificare il mio lavoro, dunque, li dividerò arbitrariamente e li descriverò un poco alla volta. Partirò oggi dalle due schede che, probabilmente, saranno usate più spesso: Elements e Console, ossia la prima e l’ultima nell'ordine in cui Google Chrome ce le offre.
Elements è la scheda in cui possiamo esaminare il contenuto effettivo della pagina che abbiamo davanti: più precisamente, ne possiamo esaminare il contenuto finale. Nel menu di Chrome esiste già una funzione “Visualizza sorgente”, che ci mostra il codice di una pagina: la scheda Elements è simile, ma non identica. Visualizzando il codice sorgente, infatti, noi vediamo il contenuto del file HTML originario, senza le modifiche che possono essere state effettuate utilizzando il JavaScript; la scheda Elements, invece, ci mostra il codice della pagina finale, dopo che tutte le modifiche tramite JavaScript sono state applicate. Inoltre, sempre da qui possiamo anche esaminare il CSS per ogni componente della pagina, nella colonna di destra della scheda. Una buona norma della programmazione web prescrive che il contenuto di una pagina sia sempre e comunque accessibile, anche per chi ha disabilitato il JavaScript: se questa norma fosse sempre rispettata, la visualizzazione del codice sorgente dovrebbe mostrarci già tutto il testo, tutte le immagini e tutti gli altri elementi contenuti in una pagina. Come la maggior parte delle buone norme, però, non sempre è rispettata alla lettera; di conseguenza, una parte più o meno cospicua del contenuto, in molti siti, è aggiunta successivamente col JavaScript. Sempre attraverso il JavaScript, parti della pagina possono essere nascoste o mostrate, modificando il CSS corrispondente, col risultato che la pagina davanti a noi è spesso molto diversa, rispetto al contenuto descritto nel file HTML iniziale. Elements ci mostra dunque un file HTML virtuale, che descrive la pagina così come ci appare sullo schermo in questo momento. Se una immagine è stata aggiunta col JavaScript, Elements ce la mostrerà nel punto in cui è stata aggiunta, con tutti i tag HTML e tutte le regole di stile che le sono state assegnate, proprio come se avesse fatto parte fin dall’inizio della pagina. Se una parte della pagina è stata invece nascosta, in seguito a una qualche nostra azione, non la vedremo apparire in questa sezione. Come è facile da intuire, Elements è molto utile per esaminare il contenuto della pagina, sia mentre noi ci stiamo lavorando, sia quando siamo curiosi di studiare il lavoro altrui, ma questa è solo una parte delle sue funzioni. Oltre a guardare, infatti, in questa scheda possiamo anche modificare il contenuto di una pagina, in modo molto semplice. O almeno, molto semplice se sappiamo orientarci tra i nodi di una pagina HTML e se conosciamo HTML e CSS: dopotutto, questi si chiamano “strumenti per sviluppatori” e la conoscenza dei linguaggi per la programmazione web è data per scontata, essendo rivolti agli sviluppatori di pagine e siti. Non ci piace il colore dello sfondo, oppure il colore dei caratteri? Da qui lo possiamo modificare. Clicchiamo prima col tasto sinistro del mouse sul nodo da modificare e poi, nella colonna di sinistra, cerchiamo la proprietà CSS che ci interessa e clicchiamola col tasto sinistro: in questo modo, la potremo modificare a nostro piacimento. Se invece clicchiamo su un elemento HTML col tasto destro del mouse, si aprirà un menu contestuale, in cui ci saranno offerte altre possibilità di intervento: ad esempio, potremo modificare lo HTML, selezionando la voce “Edit as HTML”, oppure rimuovere quel particolare nodo dalla pagina, selezionando “Delete node” (se un banner vi ha rotto le scatole, potrete cancellarlo da qui). Eliminare un nodo, ad esempio, può essere un sistema rapido, per levarsi dai piedi quei fastidiosi avvisi, che impediscono di leggere una pagina fino a che non avete cliccato “Mi piace” su una pagina Facebook, oppure fino a che non vi siete registrati e cose simili. Ovviamente, ogni modifica apportata alla pagina varrà soltanto per noi: ciò che modifichiamo è la copia locale, caricata nel nostro browser, e non la pagina originale, contenuta nel sito. Nonostante questo, è pur sempre uno strumento valido, per adattare le pagine ai nostri gusti o per rapidi interventi di correzione, oltre alle sue normali funzioni di studio ed esame della pagina.
Console è la scheda di chi ama smanettare col JavaScript. Può essere utilizzata per eseguire brevi porzioni di codice nella pagina (sempre sul lato cliente, sia chiaro), ma è molto più importante il suo ruolo di semplice ambiente di sviluppo per JavaScript. Di fatto, la console è uno spartano (ma poi neanche tanto spartano, nel caso di Google Chrome) REPL, ossia uno spazio in cui possiamo dialogare col JavaScript, direttamente nel nostro browser: scriviamo un comando o una funzione, premiamo Invio, e la console ci restituirà subito il risultato del comando o della funzione. Se stiamo studiando o imparando il JavaScript, possiamo trascorrere ore in perfetta letizia, dialogando col nostro linguaggio di programmazione; se invece stiamo lavorando alla realizzazione di una pagina e qualcosa va storto, è qui che ci saranno segnalati gli errori relativi al JavaScript. Chiunque abbia mai utilizzato un REPL in vita propria, magari trastullandosi col Lisp o altri linguaggi di programmazione affini (anche Scala va bene), non dovrebbe avere problemi con la Console. Un REPL è un Read-Eval-Print-Loop, ossia un ciclo continuo di lettura, esecuzione e stampa del codice: noi scriviamo un comando, una funzione o qualsiasi altra cosa, premiamo Invio, e il comando (o funzione, o altro) sarà eseguito e poi scritto sullo schermo, dopodiché la console sarà pronta per il comando successivo. Ovviamente, comandi e funzioni dovranno essere in JavaScript, per poter funzionare, ma nel peggiore dei casi potete sempre utilizzarla come calcolatrice alternativa. Come dicevo all’inizio, la console può essere utilizzata fondamentalmente in due modi: come ambiente di sviluppo per il JavaScript, oppure per alterare il contenuto della pagina che abbiamo davanti. Come ambiente di sviluppo, è spartano ma funzionale, nonché molto utile se stiamo imparando (o se vogliamo imparare) la programmazione in JavaScript. Possiamo usarla per scrivere ed eseguire funzioni, ad esempio, ma con un’avvertenza: se vogliamo andare a capo, non dobbiamo premere Invio, ma Shift+Invio. Se premiamo Invio da solo, il codice sarà eseguito e ci ritroveremo con un messaggio di errore, se la nostra funzione era a metà. Dettagli a parte, ha il vantaggio considerevole di suggerirci i nomi di variabili, metodi, oggetti e funzioni a nostra disposizione: se cominciamo a scrivere qualcosa, la console ci mostrerà tutti i modi validi in cui possiamo concludere quella parola, proprio come accade in ambienti di sviluppo più raffinati. Ad esempio, La console ricorda anche tutto ciò che abbiamo già fatto, durante la nostra sessione di lavoro: se abbiamo creato nuove variabili globali, oppure nuove funzioni, o nuovi oggetti, anche i loro nomi appariranno tra i suggerimenti, accanto a funzioni, metodi e oggetti già inclusi nel motore JavaScript di Google Chrome. Di fatto, la console offre tutto ciò che è strettamente indispensabile, per programmare in JavaScript. Se invece vogliamo utilizzarla per alterare la pagina corrente, il principio di base è lo stesso, ma cambia il contesto: dalla console avremo accesso a tutto il JavaScript della pagina su cui l’abbiamo aperta, incluse eventuali altre librerie importate (jQuery, ad esempio, che è spesso presente). Se stiamo allegramente sprecando tempo con un gioco in JavaScript e vogliamo barare, possiamo farlo da qui, modificando ad esempio il numero assegnato alla variabile che contiene il punteggio. Ogni modifica avrà effetto a livello locale, ossia nella pagina aperta sul nostro browser: se dunque abbiamo usato la console, per truccare il nostro punteggio in un gioco, il nostro punteggio truccato non avrò effetto su una eventuale classifica dei migliori punteggi, ospitata nel sito del videogioco. O almeno, non dovrebbe avere effetto, a meno che il gioco non sia stato progettato molto male e abbia un livello di sicurezza pari a zero, ma questo è un altro paio di maniche.