Partager via

Rechercher des fichiers sources pour une page à l’aide de l’outil de recherche

  • Article

Utilisez l’outil de recherche pour rechercher des fichiers sources spécifiques pour une page web, notamment des fichiers HTML, CSS, JavaScript et image.

Une page web est principalement un fichier HTML utilisé par le navigateur pour afficher du contenu. Toutefois, les pages web nécessitent généralement d’autres ressources en plus du fichier HTML, telles que les fichiers CSS, JavaScript ou image, pour fournir un contenu plus riche.

Dans l’outil Sources , l’onglet Page du volet Navigateur affiche toutes les ressources téléchargées par une page web. Mais lorsqu’il y a de nombreuses ressources, il peut devenir utile de les parcourir . Pour effectuer des recherches de texte et d’expression régulière dans toutes les ressources d’une page web, utilisez l’outil De recherche .

Ouvrir l’outil de recherche à l’aide d’un raccourci clavier

Pour ouvrir rapidement l’outil de recherche :

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

  2. Dans DevTools, appuyez sur Échap pour ouvrir le Tiroir, puis dans la barre d’outils Tiroir, sélectionnez l’onglet Rechercher . Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’onglets (icône Autres onglets) ou sur le bouton Plus d’outils (icône Autres outils).

    Vous pouvez également appuyer sur Ctrl+Maj+F (Windows, Linux) ou Cmd+Option+F (macOS).

L’outil de recherche s’ouvre dans le panneau Affichage rapide :

L’outil de recherche, avec la barre d’outils de recherche

Voir aussi Raccourcis clavier globaux.

Ouvrir l’outil de recherche à l’aide du menu Commandes

Pour ouvrir l’outil de recherche à partir du menu Commandes :

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

  2. Ouvrez le menu Commandes en appuyant sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS).

  3. Commencez à taper la recherche, puis sélectionnez Afficher la recherche :

Menu Commandes avec l’élément Afficher la recherche sélectionné

Rechercher du texte

Pour rechercher du texte dans la page web actuelle et ses fichiers de ressources :

  1. Placez le focus sur le champ d’entrée de recherche.
  2. Entrez le texte que vous souhaitez rechercher, puis appuyez sur Entrée.

L’outil de recherche affiche la liste des ressources correspondantes et met en surbrillance les lignes de texte correspondantes. Le nombre de fichiers et de lignes correspondants est également indiqué en bas de l’outil.

Résultats de la recherche affichés dans l’outil de recherche, avec le texte correspondant mis en surbrillance en jaune

Mettre en correspondance la casse (minuscules ou majuscules)

Par défaut, l’outil de recherche ne respecte pas la casse. La recherche d’un terme correspond aux occurrences de ce terme, quels que soient les caractères minuscules ou majuscules.

Pour rechercher uniquement les résultats qui correspondent à une casse particulière (caractères minuscules ou majuscules), cliquez sur le bouton Match Case (Aa) dans la barre d’outils de recherche.

Rechercher des expressions régulières

Vous pouvez utiliser des expressions régulières pour rechercher des résultats correspondants. Pour utiliser une expression régulière, cliquez sur le bouton Utiliser l’expression régulière (.*) dans la barre d’outils et entrez une expression régulière JavaScript valide dans la zone de texte Rechercher :

Recherche d’une expression régulière

Les caractères de barre oblique (/) qui délimitent normalement les modèles d’expressions régulières en JavaScript ne sont pas nécessaires.

De même, les indicateurs qui apparaissent éventuellement après la barre oblique fermante (/) dans les expressions régulières JavaScript ne peuvent pas être utilisés ici. L’outil de recherche met en correspondance les résultats comme si les gindicateurs d’expression régulière , iet m avaient été fournis :

Flag Nom Description
g Global La recherche est globale : l’outil continuera à rechercher des fichiers même après avoir trouvé une première correspondance, comme si l’indicateur d’expression g régulière avait été fourni.
i Ignorer la casse La recherche ignore la casse par défaut, comme si l’indicateur i avait été fourni. Pour désactiver cet indicateur et rechercher uniquement les résultats qui correspondent à un cas particulier, cliquez sur le bouton Match Case (Aa) dans la barre d’outils de recherche.
m Multiligne La recherche est multiligne : l’outil traite chaque ligne des fichiers sources indépendamment et les ^ symboles et correspondent $ respectivement au début et à la fin d’une ligne, comme si l’indicateur m avait été fourni.

Voir aussi :

Ouvrir un fichier trouvé dans l’outil Sources

Après avoir effectué une recherche, cliquez sur une ligne de résultat pour ouvrir le fichier correspondant. L’outil Sources s’ouvre dans le panneau main et charge le fichier de ressources, en faisant défiler jusqu’à la ligne correspondante :

Cliquer sur une ligne de recherche ouvre l’outil Sources et charge la ressource correspondante

Mettre à jour des résultats de recherche

Une page web peut continuer à demander des ressources une fois le chargement terminé, de sorte que les résultats affichés dans le volet de recherche peuvent devenir obsolètes après un certain temps.

Pour mettre à jour les résultats de la recherche, effectuez l’une des opérations suivantes :

  • Cliquez sur le bouton Actualiser (bouton Actualiser la recherche) dans la barre d’outils.
  • Effectuez une nouvelle recherche en tapant un terme dans le champ d’entrée de recherche.

Pour effacer les résultats de la recherche, cliquez sur le bouton Effacer (bouton Effacer la recherche) dans la barre d’outils.