Modificare pagina web dal browser con Ispeziona elemento
Gli strumenti per sviluppatori integrati nel browser Google Chrome si rivelano partner eccellenti per chi è alle prese con la realizzazione di un sito web o per chi necessita di apportare rapidamente modifiche ai fogli di stile e, di conseguenza, al layout grafico delle pagine.
La funzionalità Ispeziona di Chrome (integrata nel menu che appare cliccando con il tasto destro) consente di modificare una pagina web dal browser, in modo istantaneo e senza scaricare alcun file, ad esempio, via FTP.
Ovviamente la modifica sarà applicata solo in locale, temporaneamente ma sarà utile per verificare in anticipo quali interventi possano essere fatti, ad esempio, sui file CSS (fogli di stile) per modificare una pagina web e migliorarne ‘il look’. In particolare, Ispeziona consente di applicare temporaneamente delle modifiche alla pagina web in corso di visualizzazione in modo da stabilire con certezza il risultato degli interventi, prima ancora di applicarli in via definitiva lato server.
Ispeziona, inoltre, permette di verificare il funzionamento del codice JavaScript presente nella pagina, alterarne il comportamento (si possono ad esempio nascondere elementi che impediscono la corretta visualizzazione di una pagina), controllare quali e quanti elementi vengono scaricati (stabilendo anche quali risorse tendono a ritardare il caricamento, per intero, della pagina) e così via.
Lo stesso strumento si rivela utile allorquando una porzione della pagina web non fosse visibile perché nascosta da un elemento grafico sovrapposto, per stabilire il percorso di qualunque immagine, per estrapolare un oggetto dal resto della pagina.
Come usare la funzionalità Ispeziona di Google Chrome
Dal browser Google Chrome, per accedere rapidamente alla finestra Ispeziona (Strumenti per gli sviluppatori), è sufficiente ricorrere alla combinazione di tasti CTRL+MAIUSC+I oppure cliccare con il tasto destro in un’area della pagina da analizzare e scegliere Ispeziona.
La scheda Elements consente di ispezionare tutti gli elementi contenuti nel DOM della pagina ed eventualmente di modificarli al volo.
DOM (Document Object Model) è la forma strutturata con cui vengono rappresentati gli elementi che compongono la pagina web.
La scheda Console permette di accedere ad una sorta di prompt dei comandi attraverso il quale si può interagire con la struttura della pagina ed effettuare interventi diagnostici.
Sources mostra il codice sorgente di tutti gli elementi che compongono una pagina, sia quelli residenti sul server web che ospita il sito in corso di visita, sia quelli remoti caricati dalla pagina attraverso riferimenti nel DOM.
La scheda Network è utilissima per capire in che modo vengono caricati gli elementi della pagina web e il loro impatto sulla durata del download. Vai alla fonte
