Esaminare il codice sorgente di una pagina HTML \u00e8 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 \u00e8 esaustivo.\u00c8 qui che visualizzare il codice sorgente diventa utile, soprattutto se si desidera estrarre dati o semplicemente imparare come sono strutturati i contenuti. E s\u00ec, Chrome lo rende piuttosto semplice, ma onestamente pu\u00f2 risultare un po’ confusionario se non si \u00e8 abituati agli strumenti o al gergo tecnico.<\/p>\n
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” \u00e8 fondamentalmente ci\u00f2 che ogni sviluppatore usa per muoversi nel codice.\u00c8 utilissimo per il debug o semplicemente per cercare di comprendere layout complessi. Ma attenzione: a volte, il codice sorgente visualizzato non \u00e8 esattamente quello originariamente fornito, a causa di manipolazioni del DOM o di altri script.\u00c8 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\u00f2 essere d’aiuto.<\/p>\n
Il modo pi\u00f9 veloce? Basta cliccare Ctrl + U<\/kbd>su Windows o \u2318-Option-U<\/kbd>Mac. Si apre immediatamente una nuova scheda con il codice HTML grezzo. Su alcuni siti, \u00e8 il modo pi\u00f9 semplice, soprattutto se si vuole solo dare un’occhiata veloce al codice. Ma tieni presente che questo mostra il codice cos\u00ec come lo invia il server, non quello che vedi dopo che JavaScript o gli stili hanno modificato il codice. Per un’analisi pi\u00f9 approfondita, il pannello “Ispeziona” \u00e8 una scelta migliore.<\/p>\n Fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina (s\u00ec, in qualsiasi punto) e vedrai opzioni come ” Visualizza sorgente pagina”<\/strong> o “Ispeziona”<\/strong>. Seleziona “Visualizza sorgente pagina”<\/strong> per visualizzare il codice HTML grezzo, che si aggiorna se aggiorni la pagina. Se selezioni ” Ispeziona”<\/strong>, 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 \u00e8 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\u00f2 essere un po’ nervoso in questo caso.<\/p>\n Per i veri nerd e gli utenti mobile, \u00e8 possibile hackerare l’URL stesso. Basta cliccare sulla barra degli URL, quindi digitare Se il clic destro non basta, il menu di Chrome fa al caso tuo. Fai clic sull’icona con i tre puntini<\/strong>, quindi vai su Altri strumenti<\/strong> e seleziona Strumenti per sviluppatori<\/strong>. Si apre il pannello DevTools, ricco di funzionalit\u00e0: Elementi, Console, Rete, ecc. La scheda Elementi<\/strong> \u00e8 probabilmente quella in cui trascorrerai la maggior parte del tempo, esaminando i DOM live o modificando gli stili. All’inizio pu\u00f2 essere un po’ intimidatorio, ma armeggiare qui pu\u00f2 insegnare molto su come funzionano i siti web. Bonus: puoi attivare l’emulazione del dispositivo e testare i layout mobile direttamente da l\u00ec.<\/p>\n Una volta che hai il codice davanti a te, comprenderne le basi \u00e8 di grande aiuto. L’HTML si basa sui tag, come quelli Ricorda, a volte ci\u00f2 che vedi nel codice sorgente non \u00e8 il quadro completo. Gli script modificano gli elementi DOM dopo il caricamento, quindi la pagina in tempo reale potrebbe apparire diversa.\u00c8 qui che Inspect entra in gioco, perch\u00e9 mostra il codice *reale* con cui stai interagendo, non solo l’HTML originale.<\/p>\n La verit\u00e0 \u00e8 che a volte \u00e8 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\u00f9 semplice. Perch\u00e9, ovviamente, Chrome deve renderlo un po’ complicato.<\/p>\n","protected":false},"excerpt":{"rendered":" Esaminare il codice sorgente di una pagina HTML \u00e8 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 \u00e8 esaustivo.\u00c8 qui […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12996","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/12996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/comments?post=12996"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/12996\/revisions"}],"predecessor-version":[{"id":12997,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/12996\/revisions\/12997"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/media?parent=12996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/categories?post=12996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/tags?post=12996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Utilizzo del menu contestuale<\/h3>\n
Modifica dell’URL per visualizzare la fonte<\/h3>\n
view-source:<\/code>prima dell’URL della pagina web. Quindi, se era https:\/\/www.example.com<\/a>, cambiarlo in view-source:https:\/\/www.example.com<\/a> e premere Invio. Questo carica immediatamente il codice HTML grezzo. Non so perch\u00e9 funzioni, ma \u00e8 molto utile sui dispositivi mobili quando l’interfaccia utente del browser pu\u00f2 intralciare gli DevTools.\u00c8 un trucco un po’ strano, ma a volte salva la situazione.<\/p>\nAccesso tramite il menu Chrome<\/h3>\n
Acquisire familiarit\u00e0 con le basi del codice sorgente<\/h2>\n
<p><\/code>per i paragrafi, <div><\/code>per i contenitori o <a><\/code>per i link. Questi tag indicano al browser il contenuto di ogni elemento. Gli attributi all’interno dei tag, come class<\/code>o id<\/code>, forniscono informazioni aggiuntive, come lo stile o l’identificazione di elementi specifici. Ad esempio, la pagina web di MDN sugli elementi HTML<\/a> \u00e8 una buona risorsa se ti perdi.<\/p>\n