Comment puis-je afficher le DOM alors que je franchis des points d'arrêt JavaScript dans Chrome?

Question

Dans Chrome DevTools, lors du débogage de JavaScript dans l'onglet Sources (ajout de la ligne "debugger;" dans le code JS et passage du code à l'aide de F10/F11), comment afficher le DOM tout en parcourant le code?

Si mon JS manipule le DOM, il est très courant que je doive passer par le débogueur JS et regarder comment les éléments DOM sont modifiés par mon JS. Par exemple, je devrais voir comment les éléments sont déplacés, s'ils sont retirés quand ils sont supposés le faire, s'ils obtiennent la bonne classe au bon moment, etc.

Avoir à basculer entre l'onglet Sources pour exécuter une seule ligne et ensuite l'onglet Elements pour voir comment le DOM a été modifié pour chaque ligne que j'exécute entrave mon débogage et m'empêche de pouvoir dire comment chaque ligne affecte le DOM.

Comment puis-je voir les éléments tout en parcourant le code simultanément?

Answer 1

Je pense que je pourrais faire à la place taper debugger dans votre js, aller à la vue des éléments dans l'outil de développement, vous pouvez faire un clic droit sur l'élément que vous voulez déboguer, et sélectionnez le sous-menu pour déboguer votre DOM.

En outre, vous pouvez vérifier l'élément que vous voulez déboguer dans la console par $ (« sélecteur »)

Answer 2

Je ne sais pas si je vous ai bien, mais vous pouvez vous référer à l'inspection DOM de l'onglet Sources, sans avoir pour changer d'onglet.

Dans l'onglet Sources, vous pouvez afficher la console (en appuyant sur ÉCHAP a travaillé pour moi), puis se référer aux dernières modifications DOM par $ 0 .. $ 4, ou tout autre DOM par sélecteur. S'il vous plaît se référer à Chrome's Command Line API Reference

Answer 3

MutationObserver

Je ne pense pas DevTools (comme Chrome 59) est équipé pour gérer vos besoins (pour le moment), mais un MutationObserver pourrait aider.

Exécutez le code suivant dans la console DevTools (ou l'enregistrer comme un extrait):

var target = document.querySelector('body'); 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation); 
    });  
}); 
var config = { 
    childList: true, 
    attributes: true, 
    characterData: true, 
    subtree: true, 
    attributeOldValue: true, 
    characterDataOldValue: true 
}; 
observer.observe(target, config); 

Ceci est à peu près aussi bavard qu'il obtient. Il enregistre chaque modification à body ou l'un de ses descendants. Vous pouvez modifier le code pour suivre moins de modifications (par exemple en observant un nœud plus spécifique ou en désactivant les indicateurs de configuration).

Voir MutationObserverInit pour une description de tous les drapeaux de configuration. Il y a aussi un drapeau attributeFilter (non utilisé dans l'exemple de code) qui peut vous être utile.

DOM Breakpoint

Une autre option consiste à définir une "modification sous-arbre" DOM Breakpoint sur un nœud. DevTools s'arrête chaque fois que le noeud ou l'un de ses enfants est ajouté ou supprimé, ou que son contenu est modifié. Cependant, il ne suit pas les modifications d'attributs, ce qui peut ne pas être suffisant pour ce scénario.