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

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. Appuyez sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools, puis dans la barre d’outils Affichage rapide , sélectionnez l’onglet Recherche . Si cet onglet n’est pas visible, cliquez sur le bouton 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 :

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 :

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.

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 :

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 :

• Expressions régulières sur MDN.

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 volet principal et charge le fichier de ressources, en faisant défiler jusqu’à la ligne 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 () dans la barre d’outils.
• Effectuez une nouvelle recherche en tapant un terme dans le champ d’entrée de recherche.

Effacer une recherche

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