Come accedere al codice sorgente in Google Chrome: 4 metodi semplici
Esaminare il codice sorgente di una pagina HTML è una mossa azzardata, soprattutto se ci si diletta nello sviluppo web o si cerca semplicemente di capire cosa fa funzionare un sito. A volte, i siti caricano script o stili in modo dinamico, quindi il codice effettivo che si vede sulla pagina non è esaustivo.È qui che visualizzare il codice sorgente diventa utile, soprattutto se si desidera estrarre dati o semplicemente imparare come sono strutturati i contenuti. E sì, Chrome lo rende piuttosto semplice, ma onestamente può risultare un po’ confusionario se non si è abituati agli strumenti o al gergo tecnico.
Google Chrome offre un paio di metodi semplici per dare un’occhiata dietro le quinte. Innanzitutto, puoi aprire il codice HTML grezzo direttamente dal server, oppure puoi utilizzare strumenti interattivi che mostrano il codice dopo che JavaScript e CSS del sito hanno completato il loro lavoro. Lo strumento “Ispeziona” è fondamentalmente ciò che ogni sviluppatore usa per muoversi nel codice.È utilissimo per il debug o semplicemente per cercare di comprendere layout complessi. Ma attenzione: a volte, il codice sorgente visualizzato non è esattamente quello originariamente fornito, a causa di manipolazioni del DOM o di altri script.È un po’ strano, ma in alcune configurazioni, l’apertura di “Ispeziona” o della visualizzazione del codice sorgente potrebbe non caricarsi immediatamente: ricaricare la pagina, cancellare la cache o persino chiudere Chrome e riaprirlo può essere d’aiuto.
Come accedere alla sorgente della pagina e all’ispettore in Chrome
Utilizzo delle scorciatoie
Il modo più veloce? Basta cliccare Ctrl + Usu Windows o ⌘-Option-UMac. Si apre immediatamente una nuova scheda con il codice HTML grezzo. Su alcuni siti, è il modo più semplice, soprattutto se si vuole solo dare un’occhiata veloce al codice. Ma tieni presente che questo mostra il codice così come lo invia il server, non quello che vedi dopo che JavaScript o gli stili hanno modificato il codice. Per un’analisi più approfondita, il pannello “Ispeziona” è una scelta migliore.
Utilizzo del menu contestuale
Fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina (sì, in qualsiasi punto) e vedrai opzioni come ” Visualizza sorgente pagina” o “Ispeziona”. Seleziona “Visualizza sorgente pagina” per visualizzare il codice HTML grezzo, che si aggiorna se aggiorni la pagina. Se selezioni ” Ispeziona”, si apre il pannello “Strumenti per sviluppatori di Chrome” proprio in corrispondenza dell’elemento su cui hai fatto clic, consentendoti di visualizzare lo stato corrente di quell’elemento dopo l’applicazione di script o stili. Questo è utile quando stai risolvendo problemi di layout o contenuti dinamici. A volte, questo pannello non si carica immediatamente, quindi attendi un attimo o ricaricalo se necessario: Chrome può essere un po’ nervoso in questo caso.
Modifica dell’URL per visualizzare la fonte
Per i veri nerd e gli utenti mobile, è possibile hackerare l’URL stesso. Basta cliccare sulla barra degli URL, quindi digitare view-source:prima dell’URL della pagina web. Quindi, se era https://www.example.com, cambiarlo in view-source:https://www.example.com e premere Invio. Questo carica immediatamente il codice HTML grezzo. Non so perché funzioni, ma è molto utile sui dispositivi mobili quando l’interfaccia utente del browser può intralciare gli DevTools.È un trucco un po’ strano, ma a volte salva la situazione.
Accesso tramite il menu Chrome
Se il clic destro non basta, il menu di Chrome fa al caso tuo. Fai clic sull’icona con i tre puntini, quindi vai su Altri strumenti e seleziona Strumenti per sviluppatori. Si apre il pannello DevTools, ricco di funzionalità: Elementi, Console, Rete, ecc. La scheda Elementi è probabilmente quella in cui trascorrerai la maggior parte del tempo, esaminando i DOM live o modificando gli stili. All’inizio può essere un po’ intimidatorio, ma armeggiare qui può insegnare molto su come funzionano i siti web. Bonus: puoi attivare l’emulazione del dispositivo e testare i layout mobile direttamente da lì.
Acquisire familiarità con le basi del codice sorgente
Una volta che hai il codice davanti a te, comprenderne le basi è di grande aiuto. L’HTML si basa sui tag, come quelli <p>per i paragrafi, <div>per i contenitori o <a>per i link. Questi tag indicano al browser il contenuto di ogni elemento. Gli attributi all’interno dei tag, come classo id, forniscono informazioni aggiuntive, come lo stile o l’identificazione di elementi specifici. Ad esempio, la pagina web di MDN sugli elementi HTML è una buona risorsa se ti perdi.
Ricorda, a volte ciò che vedi nel codice sorgente non è il quadro completo. Gli script modificano gli elementi DOM dopo il caricamento, quindi la pagina in tempo reale potrebbe apparire diversa.È qui che Inspect entra in gioco, perché mostra il codice *reale* con cui stai interagendo, non solo l’HTML originale.
La verità è che a volte è un po’ complicato: gli script si caricano in modo asincrono, i DOM cambiano al volo. Ma padroneggiare le basi rende il debug o semplicemente l’apprendimento molto più semplice. Perché, ovviamente, Chrome deve renderlo un po’ complicato.