web-dev-qa-db-fra.com

Chrome DevTools rechercher tous les fichiers javascript dans le site Web

Je travaille sur le site Web d'un nouveau client qui charge le code Javascript à partir d'un CDN afin que celui-ci ne soit pas intégré ou en ligne avec la source de la page Web. Je voudrais faire une pause à chaque fois que getCurrentPosition() est exécuté afin de déterminer le fichier JS externe dans lequel il est contenu. 

Je réalise que je pourrais utiliser d'autres outils pour effectuer une recherche de chaîne dans le contenu des fichiers JS, mais je préférerais m'en tenir aux outils de débogage de Chrome. 

Devrais-je essayer de créer une expression de montre ou existe-t-il un autre moyen de déterminer quand et où une certaine fonction JS est activée?

javascriptgoogle-chromedebugginggoogle-chrome-devtools
16
sparecycle

Vous pouvez rechercher dans tous les fichiers à l'aide de Chrome DevTools. Trouvez votre fonction et déboguez-la:

  1. Outils de développement ouverts (F12)
  2. Aller à l'onglet sources
  3. Ouvrez la recherche dans tous les fichiers en appuyant sur ctrl + shift + f (Win) ou cmd + option + f (Mac).
  4. Rechercher getCurrentPosition
  5. Placez un point d'arrêt (en cliquant sur le numéro de la ligne à gauche de la ligne)

 enter image description here

38
Jaqen H'ghar
  1. Ouvrir les outils Google Dev (F12)
  2. Appuyez sur Ctrl + p

Dans la zone ouverte, recherchez tous les fichiers (JS, CSS, ...).

 search all files in javascript

Dans la boîte, vous avez 5 options:

 enter image description here

  1. Tapez 'nomfichier' et sélectionnez-le.
  2. Tapez ': linumber' pour aller au numéro de ligne spécifique (': 10' allez à la ligne 10).

  3. Tapez '@symbol' pour aller au symbole spécifique ('@ TestSymbol' au symbole TestSymbol).

    Dans cette option, si vous écrivez @JSFunctionName ou @CSSClassName, le curseur Naviguera jusqu'au nom JSFunctionName ou CSSClassName.

  4. Tapez '! Snippet' pour aller à l'extrait spécifique ('! SnippetTest' aller à l'extrait snippetTest).

  5. Tapez '> googleCommand' pour aller à une commande spécifique ('> Clear console' efface la console).

Pour utiliser les options 2 à 5, sélectionnez un fichier.

8
Iman Bahrampour

Vous trouverez toutes les informations dont vous avez besoin sur la page Web: https://developer.chrome.com/devtools/docs/javascript-debugging

 enter image description here

En le mettant simplement (copié de la page Web)

Ouvrez un site tel que la page de démonstration Google Closure hovercard ou TodoMVC.

  1. Ouvrez un site tel que la page de démonstration Google Closure hovercard ou l'application TodoMVC Angular.

  2. Ouvrez la fenêtre de DevTools.

  3. S'il n'est pas déjà sélectionné, sélectionnez Sources.

Débogage avec points d'arrêt

Un point d'arrêt est un arrêt ou une pause intentionnel dans un script. Utilisez les points d'arrêt dans DevTools pour déboguer le code JavaScript, les mises à jour DOM et les appels réseau.

Ajouter et supprimer des points d'arrêt Dans le panneau Sources, ouvrez un fichier JavaScript pour le débogage. Dans l'exemple ci-dessous, nous déboguons le fichier todoCtrl.js à partir de la version AngularJS de TodoMVC.

Cliquez sur la ligne Gutter pour définir un point d'arrêt pour cette ligne de code. Une balise bleue indique si un point d'arrêt a été défini:

 enter image description here

Avec l'exemple simple ci-dessus, vous pouvez réellement "arrêter" la fonction getCurrentPosition() et la déboguer.

0
John Skoumbourdis

Une solution consisterait à remplacer la méthode Geolocation.getCurrentPosition par une fonction wrapper afin de pouvoir définir un point d'arrêt à l'intérieur de celle-ci, puis d'examiner la pile pour voir qui l'appelle.

0
Evan Wise

Si vous savez où la méthode est appelée dans le code, vous pouvez définir des points d'arrêt . Cela mettra en pause l'exécution de javascript pendant l'exécution et vous permettra d'obtenir une trace de la pile.

0
Daniel Lizik