Visualizza il codice sorgente di una pagina Web in ogni browser

La pagina web che stai leggendo è composta, tra le altre cose, dal codice sorgente. Queste sono le informazioni che il tuo browser scarica e traduce in ciò che stai leggendo in questo momento.

La maggior parte dei browser Web offre la possibilità di vedere il codice sorgente di una pagina Web senza software aggiuntivo richiesto, indipendentemente dal tipo di dispositivo in uso.

Alcuni offrono anche funzionalità e struttura avanzate, rendendo più facile la lettura di codice HTML e altri codici di programmazione sulla pagina.

Perché vorresti vedere il codice sorgente?

Ci sono diversi motivi per cui potresti voler vedere il codice sorgente di una pagina. Se sei uno sviluppatore web, forse ti piacerebbe dare un'occhiata sotto le copertine a un particolare stile o implementazione di un altro programmatore. Forse sei in garanzia della qualità e stai cercando di capire perché una determinata parte di una pagina web sta facendo o sta comportando in quel modo.

Potresti anche essere un principiante cercando di imparare come codificare le tue pagine e stai cercando alcuni esempi reali. Naturalmente, è possibile che tu non cada in nessuna di queste categorie e vuoi solo vedere la fonte per pura curiosità.

Di seguito sono elencate le istruzioni su come visualizzare il codice sorgente nel browser scelto.

Google Chrome

In esecuzione su: Chrome OS, Linux, macOS, Windows

La versione desktop di Chrome offre tre diversi metodi per visualizzare il codice sorgente di una pagina, il primo e il più semplice utilizzando la seguente scorciatoia da tastiera: CTRL + U (COMANDO + OPZIONE + U su macOS).

Se premuto, questo collegamento apre una nuova scheda del browser che mostra HTML e altro codice per la pagina attiva. Questa fonte è codificata per colore e strutturata in un modo che semplifica la compartimentazione e trova quello che stai cercando. Puoi accedervi anche inserendo il seguente testo nella barra degli indirizzi di Chrome, sul lato sinistro dell'URL della pagina Web, e selezionando il accedere chiave: vedi la fonte: (cioè, view-source: https: //www.Go-Travels.com).

Il terzo metodo è tramite gli strumenti di sviluppo di Chrome, che consentono di approfondire il codice della pagina e di modificarlo al volo per scopi di test e sviluppo. L'interfaccia degli strumenti di sviluppo può essere aperta e chiusa usando questa scorciatoia da tastiera: CTRL + MAIUSCOLO + I (COMANDO + OPZIONE + I su macOS). Puoi anche avviarli seguendo il seguente percorso.

1. Seleziona il pulsante del menu principale di Chrome, situato nell'angolo in alto a destra e rappresentato da tre punti allineati verticalmente.

2. Quando viene visualizzato il menu a discesa, posiziona il cursore del mouse sopra il Più strumenti opzione.

3. Quando viene visualizzato il sottomenu, selezionare Strumenti di sviluppo.

androide

Visualizzare la fonte di una pagina web in Chrome per Android è semplice come aggiungere il seguente testo all'inizio del suo indirizzo (o URL) e inviarlo: vedi la fonte:. Un esempio di questo sarebbe view-source: https: //www.Go-Travels.com . HTML e altro codice dalla pagina in questione verranno visualizzati immediatamente nella finestra attiva.

iOS

Sebbene non esistano metodi nativi per la visualizzazione del codice sorgente tramite Chrome su iPad, iPhone o iPod touch, la soluzione più semplice ed efficace consiste nell'utilizzare una soluzione di terze parti come l'app View Source.

Disponibile per $ 0,99 nell'App Store, View Source ti chiede di inserire l'URL della pagina (o copiarlo / incollarlo dalla barra degli indirizzi di Chrome, che a volte è il percorso più semplice da intraprendere) e il gioco è fatto. Oltre a mostrare HTML e altro codice sorgente, l'app dispone anche di schede che visualizzano le singole risorse della pagina, il Document Object Model (DOM), le dimensioni della pagina, i cookie e altri dettagli interessanti.

Microsoft Edge

Funzionando: Windows

Il browser Edge consente di visualizzare, analizzare e persino manipolare il codice sorgente della pagina corrente tramite l'interfaccia degli Strumenti per sviluppatori. Per accedere a questo pratico set di strumenti è possibile utilizzare una di queste scorciatoie da tastiera: F12 o CTRL + U. Se preferisci il mouse, fai clic sul pulsante del menu Edge (tre punti situati nell'angolo in alto a destra) e scegli Strumenti di sviluppo F12 opzione dalla lista.

Dopo aver eseguito gli strumenti di sviluppo per la prima volta, Edge aggiunge due opzioni aggiuntive al menu di scelta rapida del browser (accessibile facendo clic con il pulsante destro del mouse in qualsiasi punto della pagina Web): Ispeziona elemento e Vedi la fonte, il secondo che apre il Debugger porzione dell'interfaccia strumenti di sviluppo popolata con codice sorgente.

Mozilla Firefox

In esecuzione su: Linux, macOS, Windows

Per visualizzare il codice sorgente di una pagina nella versione desktop di Firefox, puoi premere CTRL + U (COMANDO + U su macOS) sulla tastiera, che aprirà una nuova scheda contenente HTML e altro codice per la pagina Web attiva.

Digitando il seguente testo nella barra degli indirizzi di Firefox, direttamente a sinistra dell'URL della pagina, verrà invece visualizzata la stessa origine nella scheda corrente: vedi la fonte: ( vale a dire, view-source: https: //www.dotdash.com ).

Un altro modo per accedere al codice sorgente di una pagina è attraverso gli strumenti di sviluppo di Firefox, accessibili seguendo i seguenti passi.

1. Seleziona il pulsante del menu principale, situato nell'angolo in alto a destra della finestra del browser e rappresentato da tre linee orizzontali.

2. Quando viene visualizzato il menu a comparsa, fare clic su Sviluppatore icona "chiave inglese".

3. Il menu di scelta del web developer ora dovrebbe essere visibile. Seleziona il Fonte della pagina opzione.

Firefox consente inoltre di visualizzare il codice sorgente per una particolare porzione di una pagina, facilitando l'isolamento dei problemi. Per fare ciò, prima evidenzia l'area che ti interessa con il tuo mouse. Quindi, fare clic con il tasto destro e scegliere Visualizza la fonte di selezione dal menu di scelta rapida del browser.

androide

È possibile visualizzare il codice sorgente nella versione Android di Firefox anteponendo all'URL della pagina Web il seguente testo: vedi la fonte:. Ad esempio, per visualizzare il sorgente HTML per DotDash devi inviare il seguente testo nella barra degli indirizzi del browser: view-source: https: //www.dotdash.com .

iOS

Il nostro metodo consigliato per visualizzare il codice sorgente della pagina Web sul tuo iPad, iPhone o iPod touch è attraverso l'app View Source, disponibile su App Store a $ 0,99. Sebbene non sia integrato direttamente con Firefox, puoi facilmente copiare e incollare un URL dal browser nell'app per svelare l'HTML e altro codice associato alla pagina in questione.

Apple Safari

Funzionante su iOS e macOS

iOS

Sebbene Safari per iOS non includa la possibilità di visualizzare l'origine della pagina per impostazione predefinita, il browser si integra piuttosto perfettamente con l'app View Source, disponibile nell'App Store a $ 0,99.

Dopo aver installato questa app di terze parti, torna al browser Safari e tocca il pulsante Condividi, situato nella parte inferiore dello schermo e rappresentato da un quadrato e una freccia su. Il foglio di condivisione iOS ora dovrebbe essere visibile, sovrapponendo la metà inferiore della finestra di Safari. Scorri a destra e seleziona il Vedi la fonte pulsante.

Ora dovrebbe essere visualizzata una rappresentazione strutturata con codice colore del codice sorgente della pagina attiva, insieme ad altre schede che consentono di visualizzare risorse, script e altro.

Mac OS

Per visualizzare il codice sorgente di una pagina nella versione desktop di Safari, è necessario innanzitutto abilitarne il relativo Sviluppare menu. I passaggi sottostanti ti guidano attraverso l'attivazione di questo menu nascosto e la visualizzazione del codice sorgente HTML di una pagina.

1. Selezionare Safari nel menu del browser, situato nella parte superiore dello schermo.

2. Quando viene visualizzato il menu a discesa, selezionare il Preferenze opzione.

3. Le Preferenze di Safari dovrebbero ora essere visibili. Clicca sul Avanzate icona, situata nell'estrema destra della riga superiore.

4. Verso la parte inferiore della sezione Avanzate è un'opzione etichettata Mostra il menu Sviluppo nella barra dei menu, accompagnato da una casella vuota. Seleziona questa casella una volta per posizionare un segno di spunta e chiudi la finestra delle preferenze facendo clic sulla 'x' rossa trovata nell'angolo in alto a sinistra.

5. Seleziona il Sviluppare menu, situato nella parte superiore dello schermo.

6. Quando viene visualizzato il menu a discesa, selezionare Mostra origine pagina. Puoi anche utilizzare la seguente scorciatoia da tastiera: COMANDO + OPZIONE + U.

musica lirica

In esecuzione su: Linux, macOS, Windows

Per visualizzare il codice sorgente dalla pagina Web attiva nel browser Opera, utilizzare la seguente scorciatoia da tastiera: CTRL + U (COMANDO + OPZIONE + U su macOS). Se preferisci invece caricare il sorgente nella scheda corrente, digita il seguente testo a sinistra dell'URL della pagina nella barra degli indirizzi e premi Inserire: view-source: ( cioè, view-source: https: //www.Go-Travels.com ).

La versione desktop di Opera consente inoltre di visualizzare sorgenti HTML, CSS e altri elementi utilizzando i suoi strumenti di sviluppo integrati. Per avviare questa interfaccia, che di default apparirà sul lato destro della finestra principale del browser, premi la seguente scorciatoia da tastiera: CTRL + MAIUSCOLO + I (COMANDO + OPZIONE + I su macOS).

Il set di strumenti per sviluppatori di Opera è accessibile anche seguendo i seguenti passi.

1. Seleziona il logo di Opera, che si trova nell'angolo in alto a sinistra della finestra del browser.

2. Quando viene visualizzato il menu a discesa, posiziona il cursore del mouse sopra il Più strumenti opzione.

3. Clicca su Mostra il menu degli sviluppatori.

4. Seleziona nuovamente il logo Opera.

5. Quando viene visualizzato il menu a discesa, posiziona il cursore sopra il cursore Sviluppatore.

6. Quando viene visualizzato il sottomenu, selezionare Strumenti di sviluppo.

Vivaldi

Esistono diversi modi per visualizzare l'origine della pagina all'interno del browser Vivaldi. Il più semplice è tramite il CTRL + U scorciatoia da tastiera, che presenta il codice dalla pagina attiva in una nuova scheda.

È inoltre possibile aggiungere il seguente testo all'inizio dell'URL della pagina, che visualizza il codice sorgente nella scheda presente: vedi la fonte:. Un esempio di questo sarebbe view-source: http: //www.dotdash.com .

Un altro metodo è attraverso gli strumenti di sviluppo integrati del browser, accessibili premendo il pulsante CTRL + MAIUSCOLO + I combinazione o attraverso il Strumenti di sviluppo opzione nel browser Utensili menu: trovato selezionando V logo nell'angolo in alto a sinistra. L'utilizzo degli strumenti di sviluppo consente un'analisi molto più approfondita dell'origine della pagina.