Chrome Débogage JavaScript - comment enregistrer les points d'arrêt entre l'actualisation de la page ou la rupture via le code?
Lorsque j'utilise Chrome et son débogueur JavaScript, chaque fois que je recharge ma page/mes scripts, mes points d'arrêt sont perdus et je dois aller chercher le fichier de script dans la fenêtre contextuelle, trouver la ligne de code pour mon point d'arrêt, cliquez pour l'ajouter, etc.
Existe-t-il un moyen de sauvegarder ces points d'arrêt afin qu'il casse même après une actualisation de page (les autres débogueurs que j'ai utilisés le font)?
Sinon, y a-t-il un moyen propre dans mon code JavaScript de taper quelque chose à dire chrome pour commencer le traçage (pour faire une pause sur une ligne)?
Vous pouvez mettre un
debugger;
pour casser dans la plupart des environnements JavaScript. Ils persisteront à coup sûr. Il est bon d'avoir un minificateur qui débarrasse le débogueur et les appels console.log de l'environnement de production, si vous les utilisez.
Dans les versions récentes de Chrome, il existe une option "Conserver le journal" en haut du panneau de la console, à côté des filtres. Dans les anciennes versions, cliquez avec le bouton droit sur la fenêtre de console vide apportera cette option ("Conserver le journal lors de la navigation"). C'est pratique lorsque vous n'avez pas d'instructions console.log ou d'appels de débogueur codés en dur.
mise à jour: J'ai trouvé un outil sur github, appelé chimney , qui prend un fichier et supprime tous les appels console.log. cela donne une bonne idée sur la façon de supprimer les appels du débogueur.
Définissez vos points d'arrêt, basculez vers l'onglet Réseau et sélectionnez le bouton à bascule Conserver le journal lors de la navigation. Maintenant, les points d'arrêt devraient être là lorsque vous actualisez.
Ou la manière JavaScript consiste à utiliser
debugger;
De plus, envoyez-vous vos fichiers JavaScript du serveur au client avec n paramètre de requête attaché à l'URL avec l'heure Epoch actuelle ? Ceci est utilisé pour empêcher la mise en cache des fichiers JavaScript.
Dans ce cas, il semble que les outils de développement Chrome Chrome interprètent le fichier comme étant différent après l'actualisation, ce qui supprimera (correctement) les points d'arrêt.
Pour moi, la suppression du paramètre de requête a permis au CDT de conserver les points d'arrêt après l'actualisation.
Cela se produit-il probablement pour les scripts que vous chargez ou évaluez dynamiquement à partir d'autres scripts? Je peux dire par moi-même que ce scénario m'a vraiment énervé jusqu'à ce que je découvre la propriété sourceURL. Le fait de placer le commentaire spécialement formaté suivant sur la dernière ligne du script que vous souhaitez déboguer le "fixera" dans Chrome afin qu'il ait un cadre de référence pour cela:
// # sourceURL = nom_fichier.js
Vos points d'arrêt placés manuellement persisteront désormais entre les chargements de page! La convention provient en fait de la spécification sourcemap, mais Chrome l'honore au moins comme une technique autonome. Voici un référence .
Pour les personnes utilisant ExtJs 6.x:
au lieu de disableCaching dans Ext.Loader, vous pouvez ajouter un paramètre de requête "cache" ou "disableCacheBuster" à l'URL de la page. Cela supprimera le paramètre "_dc" du fichier et activera chrome débogueur pour conserver le point d'arrêt.
Voir bootstrap.js dans votre application (paramètre de configuration disableCaching).
Vous pouvez mettre le débogueur; avant le code où vous souhaitez commencer le débogage. Une fois que la page commence à se charger, elle s'arrête au débogueur; déclaration. Ensuite, vous pouvez facilement appliquer le point de débogage selon vos besoins.
Vous pouvez utiliser le debugger; instruction dans votre source pour que le débogueur s'arrête là.
Les outils de développement Chrome doivent se comporter comme vous le souhaitez, mais vous pouvez mettre debugger; instructions dans votre (développement!) code pour suspendre l'exécution.