Visualizza risorse della pagina

Questa guida spiega come utilizzare Chrome DevTools per visualizzare le risorse di una pagina web. Le risorse sono i file di cui una pagina ha bisogno per essere visualizzata correttamente. Alcuni esempi di risorse sono file CSS, JavaScript e HTML, nonché immagini.

Questa guida presuppone che tu abbia familiarità con le nozioni di base dello sviluppo web e di Chrome DevTools.

Risorse aperte

Se conosci il nome della risorsa che vuoi ispezionare, il menu dei comandi offre un modo rapido per aprirla.

  1. Premi Ctrl+P o Comando+P (Mac). Viene visualizzata la finestra di dialogo Apri file.

    La finestra di dialogo Apri file

    Figura 1. La finestra di dialogo Apri file

  2. Seleziona il file dal menu a discesa oppure inizia a digitare il nome del file e premi Invio quando il file corretto è evidenziato nella casella di completamento automatico.

    Digitare un nome file nella finestra di dialogo Apri file

    Figura 2. Digitare un nome file nella finestra di dialogo Apri file

Aprire le risorse nel riquadro Rete

Consulta Esaminare i dettagli di una risorsa.

Ispezione di una risorsa nel riquadro Rete

Figura 3. Ispezione di una risorsa nel riquadro Rete

Mostrare le risorse nel riquadro Rete da altri riquadri

La sezione Esplora risorse di seguito mostra come visualizzare le risorse da varie parti dell'interfaccia utente di DevTools. Se vuoi ispezionare una risorsa nel riquadro Rete, fai clic con il tasto destro del mouse sulla risorsa e seleziona Mostra nel riquadro Rete.

Mostra nel riquadro Rete

Figura 4. L'opzione Mostra nel riquadro Rete

Sfoglia risorse

Sfogliare le risorse nel riquadro Rete

Consulta Log attività di rete.

Risorse della pagina nel log di rete

Figura 5. Risorse della pagina nel log di rete

Sfogliare per directory

Per visualizzare le risorse di una pagina organizzate per directory:

  1. Fai clic sulla scheda Origini per aprire il riquadro Origini.
  2. Fai clic sulla scheda Pagina per visualizzare le risorse della pagina. Viene visualizzato il riquadro Pagina.

    Riquadro Pagina

    Figura 6. Riquadro Pagina

    Di seguito è riportata una suddivisione degli elementi non evidenti nella Figura 6:

    • top è il contesto di navigazione del documento principale.
    • airhorner.com rappresenta un dominio. Tutte le risorse nidificate al suo interno provengono da quel dominio. Ad esempio, l'URL completo del file comlink.global.js è probabilmente https://airhorner.com/scripts/comlink.global.js.
    • scripts è una directory.
    • (index) è il documento HTML principale.
    • iu3 è un altro contesto di navigazione. Questo contesto è stato probabilmente creato da un elemento <iframe> incorporato nel documento HTML principale.
    • sw.js è un contesto di esecuzione di un worker di servizio.
  3. Fai clic su una risorsa per visualizzarla nell'editor.

    Visualizzazione di un file nell&#39;editor

    Figura 7. Visualizzazione di un file nell'editor

Sfoglia per nome file

Per impostazione predefinita, il riquadro Pagina raggruppa le risorse per directory. Per disattivare questo raggruppamento e visualizzare le risorse di ciascun dominio come elenco piatto:

  1. Apri il riquadro Pagina. Consulta Sfogliare per directory.
  2. Fai clic su Altre opzioni Altre opzioni e disattiva Raggruppa per cartella.

    Raggruppa per cartella

    Figura 8. L'opzione Raggruppa per cartella

    Le risorse sono organizzate per tipo di file. All'interno di ogni tipo di file, le risorse sono organizzate alfabeticamente.

    Il riquadro Pagina dopo aver disattivato Raggruppa per cartella

    Figura 9. Il riquadro Pagina dopo la disattivazione di Raggruppa per cartella

Sfogliare i contenuti per tipo di file

Per raggruppare le risorse in base al tipo di file:

  1. Fai clic sulla scheda Richiesta. Viene visualizzato il riquadro Richiesta. Per impostazione predefinita, il riquadro Manifest si apre solitamente per primo.

    Il riquadro Applicazione

    Figura 10. Il riquadro Richiesta

  2. Scorri verso il basso fino al riquadro Frame.

    Riquadro Cornici

    Figura 11. Riquadro Cornici

  3. Espandi le sezioni che ti interessano.

  4. Fai clic su una risorsa per visualizzarla.

    Visualizzazione di una risorsa nel riquadro Applicazione

    Figura 11. Visualizzazione di una risorsa nel riquadro Applicazione

Sfogliare i file per tipo nel riquadro Rete

Consulta Filtra per tipo di risorsa.

Filtrare per CSS nel log di rete

Figura 12. Filtrare per CSS nel log di rete