Questa guida ti insegna 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 includono file CSS, JavaScript e HTML, nonché immagini.
Questa guida presuppone che tu abbia familiarità con le nozioni di base sullo sviluppo web e con Chrome DevTools.
Risorse aperte
Quando conosci il nome della risorsa che vuoi controllare, il menu dei comandi offre un modo rapido per aprire la risorsa.
Premi Ctrl+P o Comando+P (Mac). Si apre 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 dopo che il file corretto viene evidenziato nella casella del completamento automatico.
Figura 2. Digita un nome file nella finestra di dialogo Apri file
Apri le risorse nel riquadro Rete
Consulta Esaminare 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 ispezionare 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
Consulta Registrare attività di rete.
Figura 5. Risorse delle pagine nel log di rete
Sfogliare per directory
Per visualizzare le risorse di una pagina organizzate in base alla directory:
- Fai clic sulla scheda Origini per aprire il riquadro Origini.
Fai clic sulla scheda Pagina per visualizzare le risorse della pagina. Si apre il riquadro Pagina.
Figura 6. Riquadro Pagina
Ecco una suddivisione degli elementi non ovvi nella Figura 6:
- top è il contesto di navigazione del documento principale.
- 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 del documento principale. - sw.js è un contesto di esecuzione di un service worker.
Fai clic su una risorsa per visualizzarla nell'Editor.
Figura 7. Visualizzazione di un file nell'Editor
Cerca per nome file
Per impostazione predefinita, il riquadro Pagina raggruppa le risorse per directory. Per disabilitare il 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 per tipo di file. All'interno di ogni tipo di file le risorse sono organizzate in ordine alfabetico.
Figura 9. Riquadro Pagina dopo la disattivazione di Raggruppa per cartella
Sfogliare 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 si apre per primo.
Figura 10. 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
Sfoglia i file per tipo nel riquadro Rete
Vedi Filtrare per tipo di risorsa.
Figura 12. Applicazione di filtri per CSS nel log di rete