Come visualizzare il codice sorgente del sito Web in Microsoft Edge?

Pubblicato: 2021-09-20

In Windows 11, Microsoft finalmente si sbarazza del suo famigerato e iconico browser Internet Explorer. Avrai solo Edge che si basa sul codebase di Google Chromium. Pertanto, sentirai che il browser Edge è simile a Google Chrome in molti modi. Quando vuoi analizzare il codice sorgente della pagina web, puoi farlo facilmente in Edge senza cercare Chrome o Firefox. In questo articolo, spiegheremo come visualizzare il codice sorgente del sito Web come HTML, CSS e JavaScript nel browser Microsoft Edge.

Visualizza sorgente in Chrome

Visualizza sorgente in Safari

Codice sorgente del sito web

Generalmente, le pagine Web sono scritte in HTML e utilizzano diversi tipi di file come CSS, JavaScript, immagini, video, ecc. I browser come Edge elaboreranno questi HTML / CSS / JavaScript e mostreranno solo il testo leggibile e il contenuto multimediale ai lettori. Tuttavia, in molte situazioni potrebbe essere necessario analizzare il codice sorgente per ottenere maggiori dettagli.

Sei uno sviluppatore o un blogger e desideri controllare il codice sorgente per la risoluzione dei problemi.
La pagina web che stai visualizzando è attraente e volevi trovare il colore e i caratteri utilizzati nella pagina.
Vuoi modificare la fonte e testare i risultati in un browser live senza modificare effettivamente il codice originale. Ad esempio, vuoi applicare colori diversi alle tue intestazioni o controllare la dimensione del carattere.
Testa la reattività mobile della pagina o trova gli elementi caricati sulla pagina.

In alcuni casi, puoi anche trovare il tema e i plugin utilizzati sul sito guardando il codice sorgente. Qualunque sia la ragione, puoi analizzare il codice sorgente in due modi.

Visualizzando direttamente il codice sorgente completo
Utilizzo dell'opzione Ispeziona elemento con Microsoft Edge DevTools

Spieghiamo entrambi i metodi in dettaglio.

Visualizzazione del codice sorgente completo

Diciamo che vuoi trovare i file CSS e JS utilizzati nella pagina. Puoi farlo facilmente visualizzando il codice sorgente completo. Apri la pagina in Edge, fai clic con il pulsante destro del mouse su qualsiasi area vuota e seleziona "Visualizza origine pagina" dal menu di scelta rapida.

Si aprirà una nuova pagina che mostra il codice sorgente completo della pagina che stai visualizzando come di seguito.

Puoi trovare il codice HTML di ogni elemento, file CSS collegati tra le sezioni <head> e </head>, meta tag, script collegati prima di chiudere il tag body </body>. Anche se questo sarà utile in molte situazioni, non troverai i dettagli di quali stili CSS sono applicati a quali elementi HTML nella pagina. Ad esempio, non puoi trovare la famiglia di caratteri di un elemento del titolo guardando il codice sorgente completo. Devi fare clic sul collegamento al file .css o .min.css e cercare in quel file per trovare lo stile utilizzato per le intestazioni. È un compito difficile in quanto non si conosce il titolo a cui appartiene il tag di intestazione HTML da H1 a H6. Inoltre, potrebbero essere applicate classi CSS personalizzate per il tag title che non puoi trovare cercando il CSS in modo indipendente.

Al giorno d'oggi, molti siti Web combinano tutti i file CSS insieme per ridurre il numero di richieste HTTP e migliorare la memorizzazione nella cache. Pertanto, la visualizzazione del codice sorgente completo non aiuta quando i file CSS della pagina vengono combinati come un singolo file. La soluzione è visualizzare l'HTML dell'elemento e il CSS insieme in modo da ottenere un'immagine completa di quell'elemento specifico.

Opzione Ispeziona elemento in Edge

Puoi analizzare qualsiasi elemento su una pagina web per ottenere il suo HTML e CSS usando questa opzione. Per utilizzarlo, avvia il browser Edge e apri la pagina Web che desideri analizzare. Devi aprire Microsoft Edge DevTools (o Edge Developer Tools) per iniziare ad analizzare gli elementi nella pagina web. Esistono diversi modi per aprire Edge DevTools.

Semplicemente, fai clic con il pulsante destro del mouse su qualsiasi area vuota e seleziona "Ispeziona" dal menu di scelta rapida.
Puoi premere F11 in Windows che funzionerà nella maggior parte dei modelli desktop e laptop. In alternativa, premere i tasti "Ctrl + Maiusc + I" per aprire la sezione degli strumenti per sviluppatori di Edge.
Premi "Alt + F" per aprire il menu e vai su "Altri strumenti> Strumenti per sviluppatori".

Apri Strumenti per sviluppatori da Impostazioni Edge

Per impostazione predefinita, Edge aprirà la sezione degli strumenti per sviluppatori nella parte inferiore del browser come mostrato di seguito.

Puoi regolare l'altezza trascinando e facendo clic sull'icona orizzontale dei tre punti nella barra dei menu degli strumenti di sviluppo per modificare la posizione in alto/basso o aprirla in una nuova finestra.

Posizione degli strumenti di sviluppo del dock

Sebbene DevTools abbia molte voci di menu, è necessario utilizzarne solo alcune per analizzare il codice sorgente del sito Web in Edge. Ci sarà una scheda "Benvenuto" quando apri per la prima volta DevTools che puoi semplicemente chiuderla.

Visualizzazione del codice HTML e CSS sorgente

Come accennato, ogni elemento della pagina web contiene codice HTML sorgente con stili CSS. Per visualizzare l'HTML e il CSS sorgente, devi selezionare l'elemento.

La prima icona nel menu DevTools è lo strumento di selezione degli elementi.
Fare clic sull'icona e passare con il mouse sull'elemento in cui si desidera trovare l'HTML di origine. Ad esempio, troviamo i dettagli per l'intestazione che dice "I nostri servizi premium".

Quando passi con il mouse su quell'elemento di intestazione, Edge ti mostrerà un pop-up mobile con la maggior parte dei dettagli richiesti. Puoi trovare l'intestazione h3, la dimensione del carattere come 26px, usando la famiglia di caratteri come Museo500Regular e il colore come #0875c9. Puoi anche fare clic sull'elemento visualizzato nella scheda "Elementi" e visualizzare dettagli CSS simili nella sezione "Stili" nel riquadro di destra. Utilizzando gli strumenti di selezione degli elementi, puoi ottenere i dettagli completi di HTML e CSS per qualsiasi elemento.

Nella sezione "Stili", puoi vedere un collegamento al file CSS per ogni stile. Puoi fare clic sul collegamento del file per aprirlo nella scheda "Sorgenti" che spiegheremo nella sezione seguente.

Modifica dal vivo del contenuto della pagina Web

Ora che vuoi applicare alcune modifiche all'intestazione e vedere come appare sul sito live. Per fare ciò, devi accedere al pannello di amministrazione del tuo sito Web e aggiornare il contenuto di origine. Tuttavia, avrai problemi come la visualizzazione dell'elemento con colori o dimensioni dei caratteri diversi. Il modo più semplice è modificare l'HTML di origine nella sezione "Elementi" o gli stili CSS nella sezione "Stili".

Per modificare l'HTML, seleziona prima l'elemento nella scheda "Elementi" e fai clic con il pulsante destro del mouse su di esso. Oppure puoi fare clic sull'icona dei tre punti mostrata all'estrema sinistra dell'elemento selezionato. Puoi semplicemente eliminare o nascondere l'elemento selezionando quell'opzione dal menu di scelta rapida. Se vuoi modificare, seleziona l'opzione "Modifica come HTML".

Questo aprirà la modifica del testo e potrai modificare i tag HTML nell'editor o aggiungere una classe CSS aggiuntiva all'elemento. Dopo la modifica, fai clic su un'area vuota in DevTools per uscire dalla modifica. L'editor convaliderà e correggerà automaticamente i tag. Ad esempio, se cambi il tag iniziale come <h4> e hai dimenticato di cambiare il tag finale e lo hai lasciato come </h3>, tornerà automaticamente ai tag originali <h3>…</h3>.

Allo stesso modo, puoi modificare gli stili CSS nella scheda "Stili". Ad esempio, aumenta il carattere dell'intestazione h3 a 40 px e cambia il colore in # c94608.

Puoi vedere l'anteprima istantanea sulla pagina per darti un'idea di come apparirà con il CSS e l'HTML modificati. Tuttavia, le modifiche sono temporanee e l'aggiornamento o il ricaricamento della pagina ripristinerà il contenuto originale. Puoi apportare le modifiche nel backend per applicarle in modo permanente alla pagina web.

Risoluzione dei problemi relativi agli errori delle pagine Web

Uno degli scopi principali di DevTools è trovare i problemi del browser che impediscono la corretta visualizzazione della pagina. Come puoi vedere negli screenshot sopra, Edge mostra due numeri (34 e 33) nella barra dei menu di DevTools.

La prima icona del numero mostra gli errori e gli avvisi della console del browser che puoi vedere nella scheda "Console".
Il secondo numero ti mostrerà i problemi aperti, se presenti, in una finestra separata all'interno di DevTools che puoi chiudere indipendentemente.

Errori, avvisi e suggerimenti vengono visualizzati con etichette per aiutarti a comprendere il problema. Fai clic su ciascun elemento per ottenere maggiori dettagli sul problema e sulla risorsa interessata nella tua pagina. Devi modificare il codice e ripetere il test per verificare se gli errori sono stati corretti.

Visualizza i file di origine in modo indipendente

La scheda "Sorgenti" in Edge DevTools è qualcosa di simile alla visualizzazione del codice sorgente completo. Tuttavia, mostra le risorse caricate da ciascuna parte del dominio e da domini esterni separatamente in una struttura. Puoi selezionare qualsiasi file e visualizzare in anteprima il contenuto all'interno di DevTools.

Quando selezioni un file minimizzato, Edge ti chiederà "Stampa bene questo file minimizzato?". La minimizzazione rimuoverà tutti gli spazi e le interruzioni di riga nel file e lo renderà illeggibile per gli utenti. Puoi usare una bella stampa per convertire i file minimizzati in una modalità leggibile con interruzioni di riga e spazi. È possibile fare clic sul pulsante "Pretty-print" o fare clic sul { } visualizzato nella barra di stato.

Tutti gli altri elementi come Rete, Prestazioni, ecc. sono utili per l'analisi avanzata del tempo di caricamento della pagina, il controllo delle intestazioni HTTP, la ricerca di problemi di sicurezza e il test del punteggio delle prestazioni SEO. Puoi chiudere i DevTools una volta che hai finito con l'analisi.

Parole finali

L'ultima versione di Edge Chromium è potente rispetto a qualsiasi altro browser. È possibile utilizzare Microsoft Edge DevTools per visualizzare il codice sorgente della pagina Web per la risoluzione dei problemi e la progettazione. È anche possibile ottenere il codice sorgente completo visualizzando i file utilizzati nella pagina.