Ce guide 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 d'ouvrir rapidement la ressource.
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 le fichier correct 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 Inspecter les détails d'une ressource.
Image 3. Inspecter une ressource dans le panneau Network (Réseau)
Afficher les ressources des autres panneaux dans le panneau "Network" (Réseau)
La section Parcourir les ressources ci-dessous montre comment afficher les ressources à partir de différentes parties de l'interface utilisateur des outils de développement. Si vous souhaitez inspecter une ressource dans le panneau Network (Réseau), effectuez un clic droit sur la ressource, puis sélectionnez Reveal in Network (Afficher dans le panneau "Network").
Figure 4. L'option Afficher dans le panneau "Réseau"
Parcourir les ressources
Parcourir les ressources dans le panneau "Network" (Réseau)
Consultez la section Enregistrer l'activité réseau.
Figure 5. Ressources de la page 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. Le volet Page
Voici le détail des éléments qui ne sont pas évidents dans la Figure 6:
- top est le principal contexte de navigation dans le document.
- 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) est le 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 du document principal. - 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 Parcourir par répertoire.
Cliquez sur Plus d'options
et désactivez l'option Grouper par dossier.
Figure 8 : L'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 la désactivation de l'option Group by Folder (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 s'ouvre généralement en premier.
Figure 10 : Le panneau Application
Faites défiler la page jusqu'au volet Frames.
Figure 11 : Le volet Frames (Images)
Développez les sections qui vous intéressent.
Cliquez sur une ressource pour l'afficher.
Figure 11 : Afficher une ressource dans le panneau Application
Parcourez les fichiers par type dans le panneau "Network" (Réseau).
Consultez la section Filtrer par type de ressource.
Figure 12. Filtrer les CSS dans le journal réseau