89883 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 elemento di Chrome consente di modificare una pagina web dal browser, in modo istantaneo e senza scaricare alcun file, ad esempio, via FTP.

Ne consegue che Ispeziona elemento si rivela uno strumento eccellente 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 elemento 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 elemento, 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.


Come usare Ispeziona elemento di Google Chrome

In Chrome, per accedere rapidamente alla finestra Ispeziona elemento (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 elemento:

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.

Modificare pagina web dal browser con Ispeziona elemento

In questo articolo, incentrato sulle modalità per modificare una pagina web istantaneamente, ci concentreremo però solo sulla scheda Elements.

Nella parte di sinistra della scheda, Ispeziona elemento visualizza la struttura ad albero del DOM. Sulla destra, invece, sono posizionati una serie di pannelli che racchiudono informazioni, ad esempio, sugli stili utilizzati e su come questi vengono applicati ai vari elementi HTML della pagina:

Modificare pagina web dal browser con Ispeziona elemento

Cliccando con il tasto destro del mouse su uno specifico elemento visualizzato sulla pagina web e selezionando Ispeziona elemento, Chrome evidenzierà subito tale elemento nel DOM.

Modificare pagina web dal browser con Ispeziona elemento

È importante notare che spostando il puntatore del mouse sui vari elementi nel pannello di sinistra, il browser evidenzia subito l'elemento selezionato sulla pagina web.

Inoltre, utilizzando l'icona a forma di lente d'ingrandimento si potrà scegliere manualmente un qualunque elemento sulla pagina:

Modificare pagina web dal browser con Ispeziona elemento

Cliccando su un qualunque elemento oppure cliccandovi col tasto destro del mouse e scegliendo Edit attribute si può agevolmente modificarlo.

Modificare pagina web dal browser con Ispeziona elemento

Facendo clic su Add attribute è possibile aggiungere un nuovo attributo ad un elemento HTML mentre utilizzando Delete note si potrà eliminare l'elemento dalla pagina ed impedirne la visualizzazione.

Modificare pagina web dal browser con Ispeziona elemento

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 elemento, verranno indicati gli stili (CSS) responsabili dell'aspetto grafico dello stesso oggetto.

Modificare pagina web dal browser con Ispeziona elemento

Una volta selezionato un qualsiasi elemento (in questo caso la tag li di una lista), Ispeziona elemento ne riporta le varie dipendenze.

Il pannello di destra Styles mostra, come accennato in precedenza, quali regole CSS si applicano all'elemento HTML selezionato, a partire dalla priorità più elevata fino ad arrivare a quella più bassa.
In questo modo, grazie alla scheda Styles è possibile 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.

La regola generale, nel caso dei CSS, è che nel caso in cui una regola sia definita più volte, a valere è sempre l'ultima definita in cascata. Nell'area di destra (pannello Styles) di Ispeziona elemento, si troveranno, tipicamente, diverse regole barrate. Ciò significa che tali regole sono state superate da una regola a cui 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:

Modificare pagina web dal browser con Ispeziona elemento

Cliccando sui valori associati a ciascuna proprietà del foglio di stile, si possono effettuare ulteriori modifiche. Nell'esempio in figura, si è provato a modificare il font di carattere usato per l'elemento HTML selezionato.

Allo stesso modo, però, è possibile agire 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.
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, modifica 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 cioè fintanto che non si abbandona la pagina stessa. Effettuando un reload della pagina web, questa sarà nuovamente riproposta dal browser così come viene trasmessa dal server remoto.
Lo strumento Ispeziona elemento è utilissimo quindi per capire, rapidamente, quali modifiche portano all'effetto sperato. Per renderle definitive, tuttavia, le modifiche dovranno essere annotate ed apportate lato server.


  1. 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.
  2. Avatar
    manumission82
    02/10/2015 13:44:20
    Ciao , ma come faccio a salvare definitivamente le modifiche in ispeziona elemento? Grazie
  3. Avatar
    fdsfdsfs
    11/09/2015 18:53:12
    Per provare ho cancellato questa pagina!
  4. 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