Ce guide vous explique comment utiliser les outils pour les développeurs Chrome afin d'afficher les ressources d'une page Web. Les ressources sont les fichiers dont une page a besoin pour s'afficher correctement. Les fichiers CSS, JavaScript et HTML, ainsi que les images, sont des exemples de ressources.
Ce guide part du principe que vous connaissez les principes de base du développement Web et des outils pour les développeurs Chrome.
Ouvrir les ressources
Lorsque vous connaissez le nom de la ressource que vous souhaitez inspecter, le menu de commandes vous permet de l'ouvrir rapidement.
Appuyez sur les touches Ctrl+P ou Cmd+P (Mac). La boîte de dialogue Open File (Ouvrir un fichier) s'ouvre.
Figure 1 : Boîte de dialogue Open File (Ouvrir un fichier)
Sélectionnez le fichier dans le menu déroulant, ou commencez à saisir le nom du fichier et appuyez sur Entrée une fois que le fichier approprié est mis en surbrillance dans la zone de saisie semi-automatique.
Figure 2 : saisir un nom de fichier dans la boîte de dialogue Ouvrir un fichier ;
Ouvrir les ressources dans le panneau "Network"
Consultez la section Inspecter les détails d'une ressource.
Image 3. Inspecter une ressource dans le panneau Réseau
Afficher les ressources d'autres panneaux dans le panneau "Réseau"
La section Parcourir les ressources ci-dessous explique comment afficher les ressources des différentes parties de l'interface utilisateur des outils de développement. Si vous souhaitez inspecter une ressource dans le panneau Réseau, effectuez un clic droit sur la ressource et sélectionnez Afficher dans le panneau "Réseau".
Figure 4. Option Afficher dans le panneau "Réseau"
Parcourir les ressources
Parcourir les ressources du panneau "Network"
Consultez la section Journaliser l'activité réseau.
Figure 5. Ressources de pages dans le journal réseau
Parcourir par répertoire
Pour afficher les ressources d'une page organisées par répertoire:
- Cliquez sur l'onglet Sources pour ouvrir le panneau Sources.
Cliquez sur l'onglet Page pour afficher les ressources de la page. Le volet Page s'ouvre.
Figure 6. Volet Page
Les éléments qui ne sont pas évidents sont répartis dans la Figure 6:
- top est le contexte de navigation principal des documents.
- airhorner.com représente un domaine. Toutes les ressources imbriquées sous celui-ci proviennent de ce domaine.
Par exemple, l'URL complète du fichier comlink.global.js est probablement
https://airhorner.com/scripts/comlink.global.js. - scripts est un répertoire.
- (index) correspond au document HTML principal.
- iu3 est un autre contexte de navigation. Ce contexte a probablement été créé par un élément
<iframe>intégré dans le code HTML principal du document. - sw.js est un contexte d'exécution de service worker.
Cliquez sur une ressource pour l'afficher dans l'éditeur.
Figure 7 : Afficher un fichier dans l'éditeur
Parcourir par nom de fichier
Par défaut, le volet Page regroupe les ressources par répertoire. Pour désactiver ce regroupement et afficher les ressources de chaque domaine sous forme de liste plate:
- Ouvrez le volet Page. Consultez la section Parcourir par répertoire.
Cliquez sur Plus d'options
et désactivez l'option Grouper par dossier.
Figure 8 : Option Grouper par dossier
Les ressources sont organisées par type de fichier. Dans chaque type de fichier, les ressources sont organisées par ordre alphabétique.
Figure 9. Volet Page après avoir désactivé l'option Grouper par dossier
Parcourir par type de fichier
Pour regrouper des ressources en fonction de leur type de fichier:
Cliquez sur l'onglet Application. Le panneau Application s'ouvre. Par défaut, le volet Manifest (Fichier manifeste) s'ouvre généralement en premier.
Figure 10 : Panneau Application
Faites défiler la page jusqu'au volet Frames.
Figure 11 : Le volet Frames
Développez les sections qui vous intéressent.
Cliquez sur une ressource pour l'afficher.
Figure 11 : Afficher une ressource dans le panneau Application
Parcourir les fichiers par type dans le panneau "Network"
Consultez la section Filtrer par type de ressource.
Figure 12. Filtrer les CSS dans le journal réseau