Comment trouver avec DevTools dans quel fichier js se trouver une fonction javascript en particulière

L’outil de développement de Google (aussi appelé Google DevTools) permet d’analyser à peu près tout ce qui est affiché sur une page par votre navigateur Chrome

Je partage une petite astuce qui permet de repérer et trouver dans quel fichier javascript se trouve une fonction js particulière.

En fait, cette astuce vous permettra de rechercher n’importe quel bout de code, du HTML, CSS, JS, ..

Imaginons que vous travaillez sur le site d’un client (ou concurrent), et que la page utilise une fonction javascript. Et disons que la page internet charge plusieurs fichiers javascript, genre 10 (ce qui est facilement atteignable avec un thème WordPress)

Et vous souhaitez analyser cette fonction javascript, mais vous ne savez pas dans quel fichier cette fonction js est définie.

Alors au lieu de vérifier fichier javascript par fichier, voici une petite astuce qui vous permettra de rechercher la fonction javascript dans tous les fichiers.

Google Chrome est requis

Méthode n°1

  1. Ouvrez Google Chrome, puis l’outil de développement (F12)
  2. Allez dans l’onglet « Sources »
  3. Ouvrir la fonction « Search » en cliquant sur CTRL + SHIFT + F ( ou CMD + OPTION + F sur Mac)
  4. Spécifiez les mots clés (ou la fonction javascript) que vous souhaitez rechercher

astuce devtools outils inspection chrome

Méthode n°2

  1. Ouvrez Google Chrome, puis l’outil de développement (F12)
  2. Tout à droite, cliquez sur les 3 petits points verticales
  3. Puis sur More tools > Search
  4. La boite de recherche s’ouvre alors, et vous pouvez spécifiez les mots clés (ou la fonction javascript) que vous souhaitez rechercher

astuce devtools outil inspection chrome