Come visualizzare il sorgente della pagina in Chrome, Firefox, Safari | We.Inc
Scorciatoie da tastiera per vedere il sorgente HTML di una pagina in Chrome, Firefox e Safari, la differenza con Ispeziona, cosa puoi riusare e un visualizzatore che riassume l'HTML incollato.
Come visualizzare il sorgente di una pagina
In Chrome e Firefox premi Ctrl+U su Windows o Linux. Su Mac, Chrome usa Command+Option+U e Firefox usa Command+U. Puoi anche cliccare con il tasto destro su una parte vuota della pagina e scegliere Visualizza sorgente pagina. Safari richiede prima di attivare le funzionalità per sviluppatori in Impostazioni, sotto Avanzate.
Scorciatoie per il sorgente per browser (pagine di aiuto dei produttori)
Browser
Windows o Linux
Mac
Chrome
Ctrl+U
Command+Option+U
Firefox
Ctrl+U
Command+U
Safari
Non disponibile
Attiva prima Mostra funzionalità per sviluppatori web (Impostazioni, Avanzate)
Tutti quelli sopra
Clic destro sulla pagina, poi Visualizza sorgente pagina
Clic destro (o Control-clic) sulla pagina
Il sorgente della pagina è il file HTML inviato dal server prima che girassero gli script. Ti dice quale titolo e descrizione usa una pagina, quali tag di tracciamento carica e dove si trovano le sue immagini. Per questo è il modo più rapido per controllare il tuo sito dopo una modifica, o per vedere come è costruita una pagina che ammiri.
Apri la pagina che vuoi leggere e premi la scorciatoia del tuo browser.
Usa la ricerca del browser (Ctrl+F o Command+F) per saltare a ciò che ti serve, come <title o og:image.
Per studiarlo più comodamente, copia tutto e incollalo nel visualizzatore qui sopra.
Per vedere la pagina com'è dopo l'esecuzione degli script, usa invece Ispeziona.
Firefox ti permette di linkare una singola riga: aggiungi #line100 alla fine di un indirizzo view-source:.
In Firefox, seleziona del testo, clicca con il tasto destro e scegli Visualizza sorgente selezione per vedere solo quella parte.
Le pagine costruite con un framework JavaScript spesso mostrano un sorgente quasi vuoto. Ispeziona mostra cosa hanno costruito gli script.
Controlla le tue pagine dopo ogni redesign: un titolo o una descrizione mancanti si vedono subito nel sorgente.
Domande frequenti
Qual è la differenza tra Visualizza sorgente pagina e Ispeziona?
Visualizza sorgente pagina mostra il file originale del server. Ispeziona apre gli strumenti per sviluppatori del browser, dove, come spiega la documentazione di Chrome, l'albero DOM mostra lo stato attuale della pagina, che differisce dall'HTML quando JavaScript ne aggiunge, rimuove o modifica delle parti.
Posso copiare il codice HTML da un sito web?
Puoi leggerlo e impararci. Riutilizzarlo è un'altra questione: lo US Copyright Office dice che testi originali, grafiche e fotografie su un sito web possono essere protetti. Il diritto d'autore non copre idee, sistemi o metodi, quindi impara la tecnica e scrivi una tua versione. Questa è un'informazione generale, non una consulenza legale.
Perché manca l'opzione per vedere il sorgente?
In Safari resta nascosta finché non spunti Mostra funzionalità per sviluppatori web in Impostazioni, Avanzate. Su un computer gestito di lavoro o di scuola, un amministratore potrebbe aver disattivato gli strumenti per sviluppatori; chiedi a lui.
Posso vedere il codice lato server di un sito, come PHP o le query al database?
No. Il server esegue quel codice e invia solo l'HTML, il CSS e il JavaScript risultanti. Niente nel sorgente della pagina rivela cosa li ha prodotti.
Cosa cercare nel sorgente delle tue pagine
In alto, dentro <head>, trovi <title> e <meta name="description">, il testo che mostrano i risultati di ricerca. Più in basso ci sono i tag og: che controllano le anteprime dei link sui social media, e gli script di analytics o dei tag manager.
Se una modifica fatta nell'editor del sito non compare qui, la pagina potrebbe essere in cache. Ricarica una volta, poi controlla di nuovo.
Riutilizzare ciò che trovi
Il diritto d'autore protegge il modo in cui qualcosa è espresso, non l'idea che c'è dietro. L'idea di un layout o una tecnica comune si possono usare liberamente; le foto, i testi e le illustrazioni di qualcun altro no, a meno che la loro licenza non lo consenta.
Visualizza sorgente, Ispeziona e view-source: a confronto
Tre modi per leggere il codice di una pagina
Metodo
Mostra
Si può modificare
Ideale per
Visualizza sorgente pagina
L'HTML inviato dal server
No
Controllare titoli, meta tag e script di tracciamento
Ispeziona (strumenti per sviluppatori)
La pagina dal vivo dopo l'esecuzione degli script
Sì, temporaneamente
Trovare quale codice disegna un pulsante o un'immagine
view-source: nella barra degli indirizzi (Firefox)
Lo stesso di Visualizza sorgente pagina
No
Linkare una riga, come #line100
Ricerche utili nel sorgente della pagina
Premi Ctrl+F (Command+F su Mac) nella scheda del sorgente e cerca questi termini per trovare le parti più importanti.
Cosa cercare
Ogni riga è qualcosa da scrivere nella ricerca, seguita da ciò che individua.
Visualizzatore del sorgente
Incolla l'HTML copiato da Visualizza sorgente pagina. Resta nel tuo browser; non viene caricato né scaricato nulla.