Che tu sia un professionista del web intento a correggere errori nel codice del tuo sito, o semplicemente curioso di esplorare l’architettura di un sito web, Google Chrome offre strumenti efficaci per visualizzare il codice HTML. Esistono due metodologie principali: “Visualizza sorgente pagina” e “Ispeziona” tramite gli Strumenti per sviluppatori.
Esaminare il codice sorgente con “Visualizza sorgente pagina”
Apri Chrome e naviga fino alla pagina web di cui vuoi analizzare il codice HTML. Clicca con il tasto destro del mouse in un punto qualsiasi della pagina e seleziona “Visualizza sorgente pagina” dal menù contestuale, oppure premi la combinazione di tasti Ctrl + U. Questa azione aprirà una nuova scheda con il codice sorgente della pagina.
La nuova scheda mostrerà il codice HTML completo della pagina, non formattato e completamente espanso.
L’opzione “Visualizza sorgente” risulta meno pratica per individuare elementi specifici all’interno del codice, soprattutto in pagine ricche di JavaScript e CSS.
Analisi del codice con gli Strumenti per sviluppatori
Questo approccio, che sfrutta il pannello degli Strumenti per sviluppatori di Chrome, offre una visualizzazione più ordinata del codice HTML. La formattazione migliorata e la possibilità di comprimere gli elementi rendono la lettura più agevole.
Apri Chrome e vai alla pagina che intendi esaminare, poi premi Ctrl + Maiusc + i. Si aprirà un pannello agganciato accanto alla pagina web.
Per espandere ulteriormente un elemento, clicca sulla piccola freccia grigia adiacente.
Se desideri ispezionare un elemento specifico invece di visualizzare l’intero codice, clicca con il tasto destro sull’elemento nella pagina e seleziona “Ispeziona”.
Il pannello degli strumenti si aprirà focalizzato direttamente sulla porzione di codice relativa all’elemento selezionato.
La posizione del pannello degli strumenti è modificabile: puoi spostarlo in basso, a sinistra, a destra o sganciarlo in una finestra separata. Clicca sull’icona del menù (i tre puntini) e seleziona l’opzione desiderata.
Questi sono i metodi per esplorare il codice HTML in Chrome. Quando hai finito, puoi chiudere la scheda “Visualizza sorgente” o cliccare sulla “X” del pannello Strumenti per sviluppatori per tornare alla pagina web.