178735 Letture

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.

Modificare pagina web dal browser con Ispeziona elemento

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. Consente anche di rilevare i codici di errore eventualmente restituiti e stabilire quale elemento ha richiesto il caricamento di un altro oggetto.
Nell'articolo Strumenti per sviluppatori Chrome su Android: come smascherare chi carica contenuti malevoli abbiamo visto come la stessa scheda possa essere utilizzata per diagnosticare il comportamento dei siti web caricati sui dispositivi mobili Android.

In questo articolo, incentrato sulle modalità per modificare una pagina web istantaneamente, ci concentreremo però solo sulla scheda Elements.
Cliccando con il tasto destro del mouse su uno specifico elemento visualizzato sulla pagina web e selezionando Ispeziona, Chrome evidenzierà subito tale elemento nel DOM.

Modificare pagina web dal browser con Ispeziona elemento

Cliccando sul piccolo pulsante in alto "Select an element in the page to inspect it" quindi facendo clic su un qualunque elemento della pagina web, si avrà la possibilità di intervenirvi direttamente (verrà automaticamente evidenziato nella colonna di destra).

Modificare pagina web dal browser con Ispeziona elemento

Cliccando col tasto destro del mouse su un qualunque elemento nella colonna di destra e scegliendo Edit attribute si potrà agevolmente modificarlo mentre scegliendo Add attribute è possibile aggiungere un nuovo attributo a un elemento HTML.
Utilizzando Delete element si potrà eliminare l'elemento dalla pagina ed impedirne la visualizzazione (utile ad esempio quando un oggetto sovrapposto non permettesse la lettura di quanto mostrato al livello inferiore).


Modificare pagina web dal browser con Ispeziona elemento

Senza cancellare un elemento, è possibile nasconderlo aggiungendo ad esempio uno stile style="display:none;" nella tag HTML.

Un qualsiasi elemento può essere spostato semplicemente trascinandolo nella nuova posizione.
Il comando Scroll into view consente di esporre, nell'area visibile della pagina, l'elemento selezionato.

Esaminando un elemento HTML con la funzionalità Ispeziona di Chrome, verranno indicati gli stili (CSS) responsabili dell'aspetto grafico dello stesso oggetto (scheda Styles nella parte inferiore della colonna di destra).
Una volta selezionato un qualsiasi elemento, Ispeziona ne riporta le varie dipendenze.

Il pannello di destra Styles mostra quali regole CSS si applicano all'elemento HTML selezionato, a partire dalla priorità più elevata fino ad arrivare a quella più bassa.
Diventa semplice stabilire se per definire l'aspetto grafico di un elemento HTML siano stati applicati degli stili in maniera diretta, se per l'elemento selezionato valga una regola generale definita nei CSS oppure, ancora, se le regole siano state ereditate.


Nel caso dei CSS, nei casi in cui una regola fosse stata definita più volte, a valere è sempre l'ultima definita in cascata. Nell'area di destra (pannello Styles) di Ispeziona, si troveranno, tipicamente, diverse regole barrate. Ciò significa che tali regole sono state superate da una regola alla quale il browser assegna "la precedenza".
Le regole ereditate da altri stili vengono chiaramente evidenziate con l'indicazione "Inherited from".

Disattivando le caselle nel pannello Styles, si possono disattivare uno più stili e verificare immediatamente l'effetto dell'intervento sul "look" della pagina web.
Cliccando sui valori associati a ciascuna proprietà del foglio di stile, si possono effettuare ulteriori modifiche.


È quindi possibile agire sul font (font-family), sulla dimensione dei caratteri (font-size), sull'altezza della riga (line-height, su colore e sfondi (ad esempio, background, background-color e color) su margini, padding e così via.

Qualora ciò risultasse necessario, sarà possibile aggiungere una nuova proprietà ai fogli di stile ed accertarsi subito dei risultati delle proprie modifiche.

Se il layout della pagina o comunque l'aspetto grafico degli elementi venisse modificato via JavaScript e non si riuscisse ad individuare il codice responsabile delle modifiche, è possibile ricorrere ai cosiddetti DOM breakpoints.
Sempre dalla colonna di destra, cliccando col tasto destro del mouse su un elemento HTML quindi scegliendo Break on, si avrà la possibilità di sapere quale JavaScript modifica gli elementi-figli, gli attributi dell'elemento selezionato o provvede a rimuoverlo.

Modificare pagina web dal browser con Ispeziona elemento

È ovvio ma è bene sottolinearlo: tutte le modifiche che vengono applicate alla pagina web presa in esame non sono definitive e valgono fintanto che non si abbandona la pagina stessa. Effettuando un reload della pagina web, questa sarà visualizzata dal browser nella forma con cui essa viene trasmessa dal server remoto.

Lo strumento Ispeziona si rivela quindi utilissimo per capire rapidamente quali modifiche portano all'effetto sperato. Per renderle definitive, le modifiche applicate in locale dovranno essere annotate quindi apportate successivamente lato server.

  1. Avatar
    Michele Nasi
    08/01/2018 11.47.07
    Non è ovviamente una cosa immediata. Puoi documentarti in rete su come sviluppare uno script Greasemonkey/Tampermonkey in JavaScript.
  2. Avatar
    Harmony
    08/01/2018 11.08.43
    Citazione: Non puoi salvarle definitivamente a meno di non disporre dell'accesso al server web che eroga la pagina da te modificata.
    Puoi al limite sviluppare uno script che una volta caricata la pagina in questione provveda a modificarla dinamicamente.
    ciao! come faccio a creare suddetto script? grazie in anticipo!
  3. Avatar
    Michele Nasi
    02/10/2015 15.19.48
    Non puoi salvarle definitivamente a meno di non disporre dell'accesso al server web che eroga la pagina da te modificata.
    Puoi al limite sviluppare uno script che una volta caricata la pagina in questione provveda a modificarla dinamicamente.
  4. Avatar
    manumission82
    02/10/2015 13.44.20
    Ciao , ma come faccio a salvare definitivamente le modifiche in ispeziona elemento? Grazie
  5. Avatar
    fdsfdsfs
    11/09/2015 18.53.12
    Per provare ho cancellato questa pagina!
  6. Avatar
    Sonia Bertinat
    14/12/2014 18.07.56
    Ora che ho trovato il punto da modificare, come faccio a sapere dove trovo il codice in FTP? Una sola volta mi ha dato il percorso del file da modificare ma non sapendo come ho fatto non riesco a replicarlo. Ho guardato il file css segnalato ma non trovo la riga che avevo modificato in Ispeziona.
    Grazie
Modificare pagina web dal browser con Ispeziona elemento - IlSoftware.it