Vedere il codice di un sito web

Dal codice sorgente alla Developer Tools

creativecode avatar Giulio Tiseo

14 Ago, 2019

~4min.

Vedere il codice di un sito web è una delle pratiche più comuni fra developer. Tutti i browser moderni offrono la possibilità di analizzare la struttura di una pagina web in due modi: dal codice sorgente o attraverso i Developer Tools. In questo articolo vedrai come usare questi due tool.

Requisiti

In questo articolo verranno affrontati argomenti già trattati in Come funziona internet e Da cosa è composta una pagina web. Ti suggerisco di approfondire prima i concetti base descritti nei suddetti articoli e poi di tuffarti nell’analisi delle pagine web. 

# Vedere il codice di un sito attraverso la sorgente di pagina

Lo scopo di questo articolo è quello di farti analizzare il codice di un sito reale per permetterti di osservarne la struttura. Per iniziare, prova ad andare sul sito creativecode.it…

Man mano che il browser scarica dati dal server, andrà a montare la struttura del documento HTML assieme al foglio di stile ed i vari script. Al termine del processo, vedrai il rendering completo della pagina. A questo punto puoi visualizzare tutto il codice che compone la homepage in questo modo:

  • Clicca con il tasto destro del mouse in un punto qualsiasi della finestra;
  • Seleziona la voce “Visualizza sorgente pagina”;

La finestra che si aprirà corrisponde letteralmente alla radiografia della pagina web in cui ti trovavi un attimo fa: testi, immagini, video, bottoni, form e tutto ciò che è stato caricato nel browser, deve essere scritto qui.

  • Cerca nel codice il titolo della guida che è in evidenza su Creative Code attivando la funzione di ricerca del Browser con CTRL+F;

Come vedi, chrome evidenzia in giallo la stringa che hai cercato. Questa stringa, nel contesto del codice che stai visualizzando nella sorgente di pagina, non è nient’altro che il contenuto di un elemento HTML che descrive il formato di un titolo.

Adesso passiamo ad uno strumento molto più interessante ed efficace che ti permetterà di osservare la “forma” che il codice assume nella pagina. Anche se la sintassi degli elementi HTML verrà analizzata in articoli successivi, è importante capire a questo punto la corrispondenza che ha ciascun elemento della pagina con la relativa riga di codice. Come fai a scoprirlo? Facile, attraverso i Developer Tools

# Vedere il codice di un sito con l’ispeziona elemento di Google

I Developer Tools sono gli strumenti che gli sviluppatori utilizzano in fase di implementazione di un sito web.

Accedi alla Chrome Developer Tools facendo nuovamente click con il tasto destro del mouse sulla pagina e seleziona questa volta l’opzione Ispeziona.

Quello che compare nella finestra del browser è il pannello degli elementi della Developer Tools. Puoi notare fin da subito delle affinità con la scheda che mostrava il codice sorgente della pagina, ma non pensare sia la stessa cosa; questo strumento è decisamente più potente.

Prova a portare il cursore su alcune righe di codice scritte nella developer tools e noterai fin da subito delle differenze con la visualizzazione cruda e scarna del codice sorgente. In base alla riga evidenziata con il passaggio del mouse, il browser mostra un riquadro nella pagina che è relativo al contenuto descritto da quella porzione di codice.

Vedere il codice di un sito web attraverso questo sistema è una necessità per ogni developer, perché permette di analizzare attentamente il sito e di effettuare delle prove di editing che accelerano il flusso di lavoro.

# Developer Tools: Il Cursore di Selezione

Puoi vedere il codice di un sito dalla developer tools in modo ancora più efficiente, utilizzando l’apposito cursore di selezione. Questo speciale cursore può essere attivato facendo click sulla prima icona a sinistra del pannello. Con questo strumento non facciamo altro che invertire la funzione del mouse in modo da poter evidenziare l’elemento DALLA pagina ALLA relativa riga di codice.

# Editare il contenuto dalla Developer Tools

Adesso non ti resta che provare a modificare la pagina a tuo piacimento! Seleziona il titolo di una guida presente su creativecode.it di modo che il browser possa mostrarci la relativa riga di codice. A questo punto puoi modificare il contenuto di questo elemento facendo doppio click sul titolo mostrato nella finestra dei Developer Tools.

[immagine]

Come vedi, adesso sei libero di modificare il titolo originale della guida. Non dimenticate di millantare cotale prodezza mostrando il risultato ad amici e parenti, ne rimarranno stupefatti! 😀

Ovviamente non è cosi semplice modificare i contenuti di una pagina. Sapresti spiegare il perché? Pensaci un attimo, non è così strano se conosci il reale funzionamento di un sito web.

Ci sei arrivato?

Non puoi pensare che questo genere di intervento sul codice possa realmente influire nella versione reale del sito, fintanto che le modifiche sono state effettuate lato cliente, attraverso il browser.  Perciò, pur essendo liberi di manipolare i dati in nostro possesso, non possiamo inviare tali modifiche al server.

Ciò che vedi nel browser, effettivamente, non è che una copia di dati scaricati dal server e montati nella tua finestra. Sei libero di fare ciò che vuoi con il sito web perché tutte le modifiche che puoi fare saranno visibili ovviamente solo nella tua copia del sito.

Tutta la magia svanirà quando invierai una nuova richiesta al server aggiornando la pagina. Le tue modifiche saranno perse e… il trucco svelato.

Nella prossimo articolo della Guida base all’HTML ti parlerò in modo molto più tecnico e pratico del linguaggio HTML. Inizierai finalmente a sporcarti le mani con il codice e capirai come creare correttamente i primi elementi di una pagina web.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *