Come visualizzare il codice HTML in Chrome

Collegamenti del dispositivo

• Androide
• i phone
• Chromebook
• Mac
• finestre
• Dispositivo mancante?

Sei curioso di sapere cosa compone una pagina web? Vuoi sapere come modificare la dimensione o il colore del carattere sul tuo sito web? Visualizzando il codice HTML di una pagina Web, puoi fare tutte queste cose e altro ancora.

In questo tutorial, ti mostreremo come visualizzare il codice HTML di una pagina web in Chrome.

Visualizzazione del codice HTML in Chrome

Quando si scrive in HTML, il codice sorgente è la serie di tag e attributi utilizzati per definire la struttura e il contenuto di una pagina web.

Il codice sorgente viene letto dai browser Web e tradotto nella pagina Web grafica visualizzata sullo schermo. Oltre a definire l'aspetto di una pagina Web, il codice sorgente può essere utilizzato anche per aggiungere interattività, come finestre popup, moduli e menu a discesa.

Mentre l'utente medio di Internet potrebbe non aver mai bisogno di visualizzare il codice sorgente HTML di una pagina web, ci sono diversi motivi per cui alcuni potrebbero volerlo fare.

Per gli sviluppatori, visualizzare il codice sorgente può essere un modo utile per capire come è strutturata una pagina e determinare quali elementi di stile e di scripting vengono utilizzati. Per i designer, può essere utile vedere come altri designer hanno utilizzato l'HTML per creare layout efficaci.

In alcuni casi, gli utenti potrebbero anche voler visualizzare il codice sorgente per risolvere errori o saperne di più su come funziona un determinato sito web o applicazione web. Qualunque sia il motivo, la visualizzazione del codice sorgente HTML è un processo relativamente semplice in Chrome.

Come visualizzare il codice HTML di una pagina Web in Chrome su un PC Windows

Il sistema operativo Windows è uno dei sistemi più compatibili di Chrome. Chrome si basa sul progetto Chromium open source, a cui Microsoft contribuisce in modo determinante. Questa compatibilità si estende al regno HTML, dove il popolare browser consente agli utenti di visualizzare il codice HTML di qualsiasi sito web.

Puoi visualizzare il codice HTML in due modi.

Utilizzo di Visualizza sorgente pagina

Questo metodo è semplice:

1. Apri Chrome e vai alla pagina in cui desideri visualizzare il codice sorgente HTML.
   
2. Fai clic con il pulsante destro del mouse sulla pagina e seleziona Visualizza sorgente pagina oppure premi Ctrl + U sulla tastiera per aprire il codice sorgente in una nuova scheda.
   

Il codice sorgente verrà visualizzato nella nuova scheda e potrai scorrerlo per visualizzare il markup HTML per quella pagina.

Utilizzo degli strumenti per sviluppatori

Per ispezionare il codice sorgente di una pagina web utilizzando gli Strumenti per sviluppatori in Google Chrome, procedi nel seguente modo.

1. Apri Google Chrome e vai alla pagina Web che desideri ispezionare.
   
2. Premi Ctrl + Maiusc + I sulla tastiera. Il riquadro Strumenti per sviluppatori si aprirà in un dock accanto alla pagina Web che stai visualizzando.
   
3. Fare clic sulla scheda "Elementi" nella parte superiore del riquadro. Questo visualizzerà il codice sorgente HTML per la pagina web.
   
4. Ora puoi esaminare il codice sorgente della pagina. Per comprimere un elemento, fai clic sul triangolo accanto al nome del tag. Per visualizzare ulteriori informazioni su un componente, fai clic con il pulsante destro del mouse su di esso e seleziona "Ispeziona".
   

Tieni presente che questo metodo è il migliore per le pagine HTML; è possibile visualizzare il codice sorgente di altri tipi di pagine Web, ma la formattazione potrebbe essere più difficile da leggere.

Come visualizzare il codice HTML di una pagina Web in Chrome su un Mac

Se sei uno sviluppatore web, è importante poter visualizzare il codice HTML di una pagina web. Ciò ti consente di vedere come è strutturata la pagina e di risolvere eventuali problemi che potrebbero sorgere. Fortunatamente, è facile farlo in Chrome su un Mac. Segui semplicemente questi passaggi:

1. Apri Chrome e vai alla pagina Web in cui desideri visualizzare il codice HTML.
   
2. Fai clic con il pulsante destro del mouse sulla pagina e seleziona "Ispeziona".
   
3. Si aprirà un nuovo riquadro nella parte inferiore dello schermo che mostra il codice HTML.
   
4. Puoi anche fare clic su elementi specifici nel codice HTML per vedere come sono stilizzati nella pagina. Ad esempio, puoi vedere quali stili CSS vengono applicati a un elemento selezionandolo e facendo clic sulla scheda "Stili" nel riquadro che si apre.
   
5. Per chiudere il riquadro, fare clic sulla "X" nell'angolo in alto a destra.
   

In alternativa, puoi utilizzare gli Strumenti per sviluppatori di Chrome per visualizzare il codice sorgente.

1. Apri Google Chrome e vai alla pagina web che desideri ispezionare.
   
2. Fai clic sull'icona del menu (tre puntini) nell'angolo in alto a destra del browser e seleziona Altri strumenti e Strumenti per sviluppatori dal menu a discesa.
   
3. Il pannello Strumenti per sviluppatori si aprirà nella parte inferiore dello schermo. Seleziona gli "Elementi" nella parte superiore del riquadro.
   
4. Ora vedrai il codice HTML per la pagina corrente visualizzata nel pannello Elementi. È possibile utilizzare le diverse opzioni nel pannello per ispezionare ed eseguire il debug del codice secondo necessità.
   

Con pochi clic, puoi facilmente visualizzare il codice HTML di qualsiasi pagina web in Chrome su un Mac. Questo può essere utile quando stai cercando di risolvere i problemi di sviluppo web o vuoi dare un'occhiata più da vicino a come è costruito un particolare sito web.

Come visualizzare il codice HTML di una pagina Web in Chrome sull'app per iPhone

Se utilizzi un iPhone, puoi visualizzare il codice HTML di qualsiasi pagina in Chrome in due modi:

Modificare l'URL

Puoi visualizzare facilmente il codice HTML di qualsiasi pagina apportando una piccola modifica all'URL:

1. Apri Chrome e vai alla pagina web di cui desideri visualizzare il codice HTML.
   
2. Tocca una volta nella barra degli indirizzi per avviare la modalità di modifica.
   
3. Sposta il cursore davanti all'URL.
   
4. Digita "Visualizza-sorgente" e poi premi il pulsante "Vai". Il codice HTML per la pagina Web verrà visualizzato in Chrome.
   

Utilizzo degli strumenti per sviluppatori

Gli strumenti per sviluppatori di Chrome sono disponibili anche su iOS, ma per avviarlo è necessaria una serie di passaggi diversi rispetto ai PC.

1. Tocca i tre punti nell'angolo in alto a destra dello schermo e seleziona "Impostazioni".
2. Scorri verso il basso e tocca "Avanzate", quindi abilita l'interruttore accanto a "Strumenti per sviluppatori".
3. Tocca e tieni premuta un'area vuota della pagina, quindi seleziona "Ispeziona elemento". Questo aprirà un pannello laterale con il codice HTML per quella pagina.

Come visualizzare il codice HTML di una pagina Web in Chrome sull'app per Android

Quando utilizzi l'app Chrome sul tuo telefono Android, potresti voler visualizzare il codice HTML di una pagina web. Questo può essere utile se stai cercando di risolvere un problema con la pagina o vuoi vedere come è strutturata la pagina. Per visualizzare il codice HTML di una pagina web in Chrome sul tuo telefono Android, procedi nel seguente modo:

1. Apri Chrome sul tuo Android.
   
2. Digita "view-source:" seguito dall'URL della pagina in cui desideri visualizzare il codice sorgente. Ad esempio, se desideri visualizzare il codice sorgente di www.google.com, devi digitare "view-source:www.google.com" nella barra degli indirizzi di Chrome.
   

Questo aprirà il codice HTML per quella pagina nell'interfaccia degli strumenti per sviluppatori incorporata di Chrome. Da lì, puoi visualizzare e modificare il codice come desideri. Tieni presente che questo metodo funzionerà solo se il sito Web che stai tentando di visualizzare consente l'accesso al suo codice sorgente. In caso contrario, non sarai in grado di vedere altro che un messaggio di errore.

Come visualizzare il codice HTML di una pagina Web in Chrome su un iPad

Chrome sull'app per iPad semplifica la visualizzazione del codice HTML di qualsiasi pagina web. Segui semplicemente questi passaggi:

1. Apri Chrome e digita "view-source:" seguito dall'URL della pagina che desideri visualizzare. Ad esempio, se desideri visualizzare il codice sorgente di www.alphr.com, devi digitare "view-source:www.alphr.com" nella barra degli indirizzi di Chrome.
   
2. Premi il pulsante "Vai".
   

Questo dovrebbe caricare il codice sorgente della pagina in una nuova scheda all'interno di Chrome. Da lì, puoi salvare o condividere il codice secondo necessità.

Il codice sorgente è la colla che tiene insieme le pagine

L'HTML è il fondamento di qualsiasi sito web. Fornisce la struttura e il contenuto che i visitatori vedono quando caricano una pagina nel loro browser.

Mentre l'aspetto finale di una pagina può essere determinato dai CSS o da altri linguaggi stilistici, il codice HTML determina la struttura e il contenuto di base della pagina. Alcune modifiche possono potenzialmente interrompere la pagina. Per questo motivo, è importante avere una buona conoscenza dell'HTML quando si visualizza o si apportano modifiche al codice sorgente.

Inoltre, tieni presente che mentre la visualizzazione del codice HTML può essere utile in alcuni casi, le modifiche apportate al codice non si rifletteranno sulla pagina web live. Solo le modifiche pubblicate dall'amministratore del sito saranno visibili ai visitatori.

Hai provato a visualizzare il codice HTML di qualsiasi pagina web utilizzando uno dei metodi discussi in questo tutorial? Com'è andata?

Facci sapere nella sezione commenti.