Come visualizzare il codice HTML in Chrome

Collegamenti del dispositivo

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.

Come visualizzare il codice HTML in Chrome

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.
    Come visualizzare il codice HTML in Chrome
  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.
    Come visualizzare il codice HTML in Chrome

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.
    Come visualizzare il codice HTML in Chrome
  2. Premi Ctrl + Maiusc + I sulla tastiera. Il riquadro Strumenti per sviluppatori si aprirà in un dock accanto alla pagina Web che stai visualizzando.
    Come visualizzare il codice HTML in Chrome
  3. Fare clic sulla scheda "Elementi" nella parte superiore del riquadro. Questo visualizzerà il codice sorgente HTML per la pagina web.
    Come visualizzare il codice HTML in Chrome
  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".
    Come visualizzare il codice HTML in Chrome

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.
    Come visualizzare il codice HTML in Chrome
  2. Fai clic con il pulsante destro del mouse sulla pagina e seleziona "Ispeziona".
    Come visualizzare il codice HTML in Chrome
  3. Si aprirà un nuovo riquadro nella parte inferiore dello schermo che mostra il codice HTML.
    Come visualizzare il codice HTML in Chrome
  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.
    Come visualizzare il codice HTML in Chrome
  5. Per chiudere il riquadro, fare clic sulla "X" nell'angolo in alto a destra.
    Come visualizzare il codice HTML in Chrome

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.
    Come visualizzare il codice HTML in Chrome
  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.
    Come visualizzare il codice HTML in Chrome
  3. Il pannello Strumenti per sviluppatori si aprirà nella parte inferiore dello schermo. Seleziona gli "Elementi" nella parte superiore del riquadro.
    Come visualizzare il codice HTML in Chrome
  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à.
    Come visualizzare il codice HTML in Chrome

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.
    Come visualizzare il codice HTML in Chrome
  2. Tocca una volta nella barra degli indirizzi per avviare la modalità di modifica.
    Come visualizzare il codice HTML in Chrome
  3. Sposta il cursore davanti all'URL.
    Come visualizzare il codice HTML in Chrome
  4. Digita "Visualizza-sorgente" e poi premi il pulsante "Vai". Il codice HTML per la pagina Web verrà visualizzato in Chrome.
    Come visualizzare il codice HTML 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.
    Come visualizzare il codice HTML in Chrome
  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.
    Come visualizzare il codice HTML in 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.
    Come visualizzare il codice HTML in Chrome
  2. Premi il pulsante "Vai".
    Come visualizzare il codice HTML in Chrome

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.

Sign up and earn $1000 a day ⋙

Come correggere lerrore di non riuscire a installare il software su Windows

Come correggere lerrore di non riuscire a installare il software su Windows

Come correggere l'errore di non riuscire a installare il software su Windows, Perché non puoi installare app o software su Windows 10/11? Ecco tutto quello che devi sapere su come risolverlo

Istruzioni per eliminare o modificare il PIN su Windows 11

Istruzioni per eliminare o modificare il PIN su Windows 11

Istruzioni per eliminare o modificare il codice PIN su Windows 11, In Windows 11, il codice PIN è uno strumento di sicurezza molto utile e conveniente per gli utenti. Tuttavia alcune persone

Come risolvere lerrore Attualmente non sono disponibili opzioni di risparmio energia in Windows 10

Come risolvere lerrore Attualmente non sono disponibili opzioni di risparmio energia in Windows 10

Come risolvere l'errore Attualmente non sono disponibili opzioni di risparmio energia in Windows 10, Impossibile selezionare la modalità di risparmio energia in Windows 10, cosa devo fare? Ecco come correggere l'errore

Il modo più semplice per correggere gli errori dellapplicazione Foto su Windows 10

Il modo più semplice per correggere gli errori dellapplicazione Foto su Windows 10

Il modo più semplice per correggere gli errori dell'app Foto su Windows 10: cosa devo fare se Microsoft Foto non funziona? Non preoccuparti dei modi per correggere gli errori dell'app Foto su Windows

Istruzioni per linstallazione delle scorciatoie da tastiera per cambiare la lingua di input su Windows 11

Istruzioni per linstallazione delle scorciatoie da tastiera per cambiare la lingua di input su Windows 11

Istruzioni per l'installazione di scorciatoie per cambiare lingua di input su Windows 11. Durante il processo di utilizzo di Windows, gli utenti dovranno spesso passare da un metodo all'altro.

Come verificare lo stato di alimentazione supportato su Windows 11

Come verificare lo stato di alimentazione supportato su Windows 11

La modalità di controllo dello stato di alimentazione è supportata su Windows 11, Windows 11 può gestire molti stati di alimentazione diversi. Ecco come controllare lo stato di alimentazione

Come passare da 2,4 GHz a 5 GHz in Windows 10

Come passare da 2,4 GHz a 5 GHz in Windows 10

Come passare da 2,4 GHz a 5 GHz in Windows 10, Se desideri trovare un modo semplice e veloce per velocizzare Internet, cambiare la banda WiFi da 2,4 GHz a 5 GHz può essere d'aiuto.

Come risolvere lerrore Memoria insufficiente per eseguire Microsoft Excel su Windows

Come risolvere lerrore Memoria insufficiente per eseguire Microsoft Excel su Windows

Come risolvere l'errore Memoria insufficiente per eseguire Microsoft Excel su Windows, riscontri un errore di memoria insufficiente per eseguire Microsoft Excel? Quindi, come correggere l'errore di memoria insufficiente

Modi per trovare tutti i file video su Windows

Modi per trovare tutti i file video su Windows

Modi per trovare tutti i file video su Windows. Impossibile trovare video registrati e salvati su PC. Di seguito sono riportati i modi per aiutarti a trovare tutti i clip su Windows.

Come correggere lerrore 0xa00f4288 nellapp Fotocamera su Windows 10 e 11

Come correggere lerrore 0xa00f4288 nellapp Fotocamera su Windows 10 e 11

Come correggere l'errore 0xa00f4288 nell'app Fotocamera su Windows 10 e 11. L'app Fotocamera predefinita di Windows è lo strumento principale per scattare foto. Questo è il caso delle fotocamere Win 10 e 11

Come aprire più programmi con un collegamento su Windows 10

Come aprire più programmi con un collegamento su Windows 10

Come aprire più programmi con un collegamento su Windows 10, puoi effettivamente aprire più programmi contemporaneamente con un solo tasto. Ecco come usarne uno

Come eliminare le vecchie opzioni del menu di avvio su Windows

Come eliminare le vecchie opzioni del menu di avvio su Windows

Come rimuovere le vecchie opzioni del menu di avvio su Windows, il dual boot di Windows 10 è utile ma può lasciare opzioni di avvio ridondanti nel menu. Ecco come rimuovere il menu

Istruzioni per correggere gli errori dello Strumento di cattura su Windows 11

Istruzioni per correggere gli errori dello Strumento di cattura su Windows 11

Istruzioni per correggere gli errori dello Strumento di cattura su Windows 11. Windows 11 è stato rilasciato ufficialmente da un po', ma durante l'uso si notano ancora molti errori

Istruzioni per inserire testo tramite voce su Windows 11

Istruzioni per inserire testo tramite voce su Windows 11

Istruzioni per l'immissione di testo con la voce su Windows 11, L'immissione di testo con la voce su Windows 11 ti aiuta a migliorare significativamente l'efficienza del tuo lavoro. Ecco come

Come attivare/disattivare il tasto permanente su Windows 11

Come attivare/disattivare il tasto permanente su Windows 11

Come attivare/disattivare Sticky Key su Windows 11, Sticky Key semplifica l'utilizzo della tastiera del PC. Ecco come attivare e disattivare il tasto permanente su Windows 11.

Cosè il programma di installazione dei moduli Windows?

Cosè il programma di installazione dei moduli Windows?

Che cos'è il programma di installazione dei moduli di Windows? Il programma di installazione dei moduli di Windows a volte occupa molte risorse di sistema. Il programma di installazione dei moduli Windows è importante o no?

Come aumentare il volume in Windows 10

Come aumentare il volume in Windows 10

Come aumentare il volume in Windows 10, Come aumentare il volume del computer al livello massimo? Impariamo con WebTech360 come aumentare il volume del computer Windows 10

Come utilizzare lAssistente allinstallazione di Windows 11 per installare Windows 11

Come utilizzare lAssistente allinstallazione di Windows 11 per installare Windows 11

Come utilizzare l'Assistente all'installazione di Windows 11 per installare Windows 11, l'Assistente all'installazione di Windows 11 è uno dei modi migliori per aggiornare il tuo computer a Windows 11.

Come disattivare il suono di avvio in Windows 11

Come disattivare il suono di avvio in Windows 11

Come disattivare il suono di avvio in Windows 11, il suono di avvio del PC ti dà fastidio? Quindi fai riferimento a come disattivare il suono di avvio per PC con Windows 11 di seguito

Istruzioni per modificare il timeout del blocco schermo su Windows 11

Istruzioni per modificare il timeout del blocco schermo su Windows 11

Istruzioni per modificare il timeout del blocco schermo su Windows 11. Durante l'utilizzo di Windows 11, ci sono momenti in cui gli utenti dovranno lasciare il computer per un periodo di tempo.