Questa guida spiega come utilizzare Chrome DevTools per visualizzare le risorse di una pagina web. Le risorse sono i file necessari a una pagina per essere visualizzata correttamente. Esempi di risorse sono i file CSS, JavaScript, HTML e le immagini.
Questa guida presuppone che tu conosca le nozioni di base dello sviluppo web e di Chrome DevTools.
Apri risorse
Quando conosci il nome della risorsa da ispezionare, il menu Comando consente di aprirla rapidamente.
Premi Ctrl+P o Comando+P (Mac). Viene visualizzata la finestra di dialogo Apri file.
Figura 1. La finestra di dialogo Apri file
Seleziona il file dal menu a discesa o inizia a digitare il nome del file e premi Invio quando il file corretto viene evidenziato nella casella di completamento automatico.
Figura 2. Digita un nome file nella finestra di dialogo Apri file.
Apri le risorse nel riquadro Rete
Vedi Controllare i dettagli di una risorsa.
Figura 3. Ispezione di una risorsa nel riquadro Rete
Mostra le risorse nel riquadro Rete da altri riquadri
La sezione Sfoglia risorse di seguito mostra come visualizzare le risorse da varie parti dell'interfaccia utente di DevTools. Se vuoi esaminare una risorsa nel riquadro Rete, fai clic con il tasto destro del mouse sulla risorsa e seleziona Mostra nel riquadro Rete.
Figura 4. L'opzione Mostra nel riquadro Rete
Sfoglia risorse
Sfoglia le risorse nel riquadro Rete
Vedi Registrare attività di rete.
Figura 5. Risorse di pagina nel log di rete
Sfoglia per directory
Per visualizzare le risorse di una pagina organizzate per directory:
- Fai clic sulla scheda Origini per aprire il riquadro Origini.
Fai clic sulla scheda Pagina per mostrare le risorse della pagina. Si apre il riquadro Pagina.
Figura 6. Il riquadro Pagina
Ecco un'analisi degli elementi non evidenti nella Figura 6:
- top è il contesto di navigazione principale del documento.
- airhorner.com rappresenta un dominio. Tutte le risorse nidificate al di sotto 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.
- (indice) è il documento HTML principale.
- iu3 è un altro contesto di navigazione. Questo contesto è stato probabilmente creato da un elemento
<iframe>incorporato nel codice HTML principale del documento. - sw.js è un contesto di esecuzione del service worker.
Fai clic su una risorsa per visualizzarla nell'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 disabilitare questo raggruppamento e visualizzare le risorse di ogni dominio come elenco semplice:
- Apri il riquadro Pagina. Vedi Sfogliare per directory.
Fai clic su Altre opzioni
e disabilita Raggruppa per cartella.
Figura 8. L'opzione Raggruppa per cartella
Le risorse sono organizzate in base al tipo di file. All'interno di ogni tipo di file, le risorse sono organizzate in ordine alfabetico.
Figura 9. Il riquadro Pagina dopo aver disattivato Raggruppa per cartella
Sfoglia per tipo di file
Per raggruppare le risorse in base al tipo di file:
Fai clic sulla scheda Applicazione. Si apre il riquadro Applicazione. Per impostazione predefinita, il riquadro Manifest di solito viene aperto per primo.
Figura 10. Il riquadro Applicazione
Scorri verso il basso fino al riquadro Frame.
Figura 11. Il riquadro Frame
Espandi le sezioni che ti interessano.
Fai clic su una risorsa per visualizzarla.
Figura 11. Visualizzazione di una risorsa nel riquadro Applicazione
Sfogliare i file per tipo nel riquadro Rete
Vedi Filtrare per tipo di risorsa.
Figura 12. Filtrare per CSS nel log di rete