Partager via

Afficher les fichiers de ressources qui composent une page web

  • Article

Vous pouvez afficher les ressources qui composent une page web à partir de plusieurs outils (ou panneaux) dans Microsoft Edge DevTools, notamment :

  • Outil réseau
  • Outil Sources
  • Outil d’application

Les ressources sont les fichiers qui composent une page web. Voici quelques exemples de ressources :

  • Fichiers CSS
  • Fichiers JavaScript
  • Fichiers HTML
  • Fichiers image

Voir aussi :

Ouvrir les fichiers de ressources à partir du menu commandes

Lorsque vous connaissez le nom du fichier de ressources d’une page web que vous souhaitez inspecter, le menu Commandes dans DevTools offre un moyen rapide de rechercher et d’ouvrir cette ressource.

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page web, telle que la démonstration des fonctionnalités de test d’accessibilité. (Les fichiers sources de cette page web se trouvent dans MicrosoftEdge / Demos > devtools-a11y-testing.)

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Sur Cmd+Option+I (macOS).

  3. Lorsque DevTools a le focus, appuyez sur Ctrl+P (Windows, Linux) ou Cmd+P (macOS). Vous pouvez également cliquer sur le bouton Personnaliser et contrôler DevTools (icône Personnaliser) dans DevTools, puis sélectionner Ouvrir le fichier. Le menu Commande s’ouvre et affiche la liste Ouvrir un fichier :

    Menu Commandes, affichant la liste Ouvrir un fichier

  4. S’il existe une invite supérieure à (>), appuyez sur Retour arrière pour accéder à l’invite Ouvrir un fichier .

  5. Commencez à taper le nom du fichier, puis appuyez sur Entrée lorsque le fichier correct est mis en surbrillance dans la zone de saisie semi-automatique, ou sélectionnez le fichier dans la liste déroulante :

    Saisie d’une partie d’un nom de fichier dans la liste Ouvrir un fichier du menu Commandes

Parcourir les fichiers de ressources dans l’outil Réseau

Dans l’outil Réseau , vous pouvez inspecter les fichiers de ressources qui composent la page web actuelle, tels que .htmlles fichiers image , .css, .jset . Pour savoir comment obtenir les détails d’une ressource spécifique, consultez Inspecter les détails de la ressource dans Inspecter l’activité réseau.

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page web, telle que la démonstration Inspecter l’activité réseau. (Les fichiers sources de cette page web se trouvent dans MicrosoftEdge / Demos > network-tutorial.)

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Réseau . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône « Autres outils ») .

  4. Vérifiez que le bouton Enregistrer le journal réseau en haut à gauche est sélectionné (rouge).

  5. Actualisez la page. Par défaut, le bouton Tout filtrer est sélectionné, de sorte que tous les fichiers de ressources de la page web sont répertoriés dans l’outil Réseau , une ligne par fichier de ressources :

    Fichiers de ressources de page web répertoriés dans le journal réseau, un fichier de ressources par ligne

  6. Sélectionnez une ressource pour l’afficher. Par exemple, sélectionnez le chemin d’accès network-tutorial à afficher index.html:

    Inspecter une ressource dans l’outil Réseau

Pour en savoir plus sur la façon d’afficher l’activité réseau générée par les ressources de la page, consultez Journaliser l’activité réseau dans l’article Inspecter l’activité réseau.

Parcourir les fichiers de ressources par type de fichier en filtrant dans l’outil Réseau

Dans l’outil Réseau , lorsque vous affichez la liste des fichiers de ressources qui composent la page web actuelle, vous pouvez filtrer le type de ressources à répertorier, par exemple afficher uniquement .css les fichiers ou .js .

Par exemple, pour afficher uniquement les fichiers CSS :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page web, telle que la démonstration Inspecter l’activité réseau. (Les fichiers sources de cette page web se trouvent dans MicrosoftEdge / Demos > network-tutorial.)

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Réseau . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône « Autres outils ») .

  4. Actualisez la page. Par défaut, le bouton Tout filtrer est sélectionné, de sorte que tous les fichiers de ressources de la page web sont répertoriés dans l’outil Réseau .

  5. Cliquez sur CSS pour filtrer et afficher uniquement les fichiers CSS. Seul le main.css fichier est répertorié :

    Filtrage pour répertorier uniquement les fichiers de ressources CSS dans le journal réseau

Pour plus d’informations, consultez Filtrer par type de ressource dans Inspecter l’activité réseau.

Afficher les fichiers de ressources dans l’outil Réseau à partir d’autres outils

Dans différents outils qui répertorient les fichiers de ressources de la page web, pour inspecter un fichier de ressources dans l’outil Réseau , cliquez avec le bouton droit sur le fichier de ressources, puis sélectionnez Révéler dans le panneau Réseau. Vous devrez peut-être d’abord actualiser la page web lorsque l’outil Réseau est ouvert.

Par exemple, pour passer de la liste des ressources de l’onglet Page de l’outil Sources à l’outil Réseau :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page web, telle que la démonstration Inspecter l’activité réseau. (Les fichiers sources de cette page web se trouvent dans MicrosoftEdge / Demos > network-tutorial.)

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Réseau . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône Autres outils).

  4. Appuyez sur Ctrl+R pour actualiser la page. Les fichiers de ressources reçus qui composent la page web sont désormais ajoutés en tant que lignes sous l’onglet Réseau . La ligne network-tutorial/ folder représente la page HTML , dans ce cas, index.html.

  5. Dans DevTools, dans la barre d’activité, cliquez sur l’onglet Sources .

  6. Dans l’onglet Page en haut à gauche, cliquez avec le bouton droit sur un fichier de ressources, puis sélectionnez Révéler dans le panneau Réseau :

    L’élément de menu contextuel « Révéler dans le réseau » dans un fichier de ressources sous l’onglet Page de l’outil Sources

    Si l’élément de menu Révéler dans le panneau réseau n’est pas répertorié, accédez à l’outil Réseau , vérifiez que le bouton Enregistrer le journal réseau en haut à gauche est sélectionné (rouge), puis actualisez la page.

Parcourir les fichiers de ressources par dossier sous l’onglet Page de l’outil Sources

Vous pouvez utiliser l’outil Sources pour afficher les fichiers de ressources de la page web organisés par répertoire, comme suit :

  1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  2. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Sources . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône Autres outils).

  3. Dans le volet Navigateur en haut à gauche, sélectionnez l’onglet Page .

  4. Par défaut, les fichiers de ressources sont regroupés par dossier. Si les ressources sont toutes répertoriées par ordre alphabétique par nom de fichier, cliquez sur le bouton Plus d’options (icône Plus d’options) à droite de l’onglet Page , puis sélectionnez Regrouper par dossier :

    Fichiers de ressources de la page web regroupés par dossier sous l’onglet Page de l’outil Sources

    L’onglet Page contient différents types de nœuds, notamment :

    Élément de page Description
    top Le main contexte de navigation de document, tel qu’un onglet de navigateur, une fenêtre de navigateur ou un cadre. Consultez Contexte de navigation ou <iframe> : élément Frame inline.
    microsoftedge.github.io Domaine. Toutes les ressources imbriquées en dessous proviennent de ce domaine. Par exemple, l’URL complète du buttons.js fichier est https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js.
    Demos/devtools-a11y-testing, css, photos Téléphonique.
    devtools-a11y-testing/ Document HTML main.
    buttons.js Script pour gérer les appuis sur le bouton sur la page.

  5. Sélectionnez un fichier de ressources pour l’afficher dans la Rédacteur de l’outil Sources :

    Affichage d’un fichier de ressources dans le Rédacteur de l’outil Sources

Parcourir les fichiers de ressources triés par nom de fichier sous l’onglet Page de l’outil Sources

Par défaut, l’onglet Page de l’outil Sources regroupe les fichiers de ressources par dossier. Pour afficher à la place tous les fichiers de ressources pour chaque domaine regroupés dans une liste alphabétique unique :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page web, telle que la démonstration des fonctionnalités de test d’accessibilité. (Les fichiers sources de cette page web se trouvent dans MicrosoftEdge / Demos > devtools-a11y-testing.)

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Sources . Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’outils (icône Plus d’outils).

  4. Dans le volet Navigateur en haut à gauche, sélectionnez l’onglet Page .

  5. Cliquez sur Autres options (icône Plus d’options), puis désactivez l’option Regrouper par dossier :

    Option Regrouper par dossier sous l’onglet Page de l’outil Sources

    Tous les fichiers de ressources pour chaque domaine (par exemple , Top) sont regroupés dans une liste alphabétique unique :

    Onglet Page de l’outil Sources lorsque l’option « Grouper par dossier » est désactivée

Parcourir les fichiers de ressources par type de fichier dans l’arborescence Frames de l’outil Application

L’une des façons d’afficher les ressources de page web regroupées par type de fichier consiste à utiliser l’arborescence Frames dans l’outil Application :

  1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  2. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Application . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône Autres outils).

    L’outil Application s’ouvre et affiche d’abord le volet Manifeste par défaut :

    L’outil Application

  3. Faites défiler jusqu’au volet Cadres , puis développez le dossier qui vous intéresse :

    Arborescence frames dans l’outil Application

  4. Sélectionnez une ressource pour l’afficher dans l’outil Application :

    Affichage d’une ressource dans l’outil Application

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.