Utilisation du débogueur JavaScript de Chrome / Comment se casser sur les événements de chargement de page

Question

J'utilise le débogueur de chrome et je suis bon lorsqu'il s'agit de définir des points d'arrêt une fois qu'une page est en cours d'exécution. Mon problème est que lorsque je fais f5 ou que j'appuie sur la touche Entrée de la ligne URL, mes points d'arrêt disparaissent. Comment puis-je définir un point d'arrêt dans le code qui se produit lors du premier chargement de la page ?

Answer 1

Dans les outils du développeur de Chrome, allez dans l'onglet Sources onglet. À droite, ouvrez Points d'arrêt de l'écouteur d'événements et vous pouvez définir des points d'arrêt sur les événements.

Il semble que tu veuilles placer ton point d'arrêt sur DOMContentLoaded qui est sous la Mutation DOM section.

Après avoir fait cela, rechargez la page et vous vous retrouverez dans le débogueur.

Answer 2

Essayez de mettre debugger; dans votre code. Cela fonctionne également dans Firebug de FF.

Answer 3

Les versions ultérieures de Safari et de Firefox devraient fonctionner correctement avec des points d'arrêt lors des rechargements, mais il faut s'assurer que la requête est exactement la même entre les demandes. ExtJS 4, par exemple, ajoute une fonction _dc=<epoch> qui désactivera le cache.

Pour arrêter ce comportement, ajoutez ce qui suit :

Ext.Loader.setConfig({
    disableCaching: false,
    enabled: true
});

J'espère que cela vous aidera !

Answer 4

J'utilise l'approche suivante qui convient pour Chrome , Safari en utilisant Charles Proxy [À propos] y Rewrite Tool

debugger;

ou si vous devez faire attendre une console de navigateur

setTimeout(function(){ 
    debugger; 
    console.log('gets printed only once after timeout');
}, 7000);

setTimeout est une fonction qui se déclenche après un délai pour donner à l'utilisateur le temps d'attacher la console.

Answer 5

Le débogueur peut également être défini en utilisant Point d'arrêt XHR/fetch

En développeur chromé outils -> onglet sources, dans le volet de droite vous pouvez voir Point d'arrêt XHR/fetch En utilisant cela, vous pouvez définir un point d'arrêt.

1. Ajouter un point d'arrêt
2. Entrez la chaîne de caractères sur laquelle vous voulez faire une pause. DevTools s'arrête lorsque cette chaîne est présente n'importe où dans l'URL d'une requête XHR.

Si le point d'arrêt doit être défini pour tous les XHR ou fetch, veuillez cocher l'option Tout XHR ou fetch

En développeur firefox En plus de la fonctionnalité ci-dessus, nous pouvons définir le débogueur en fonction des méthodes de demande.