web-dev-qa-db-fra.com

comment définir les points d'arrêt DOM dans chrome

J'essaie de suivre le tutoriel ici .

Je suis coincé sur la section Points d'arrêt DOM (près du bas).

Je suis allé sur le site d'exemple dont ils parlent. J'ai pressé ctrl+shift+i et accédez à l'onglet "Éléments". Dans l'onglet éléments, j'ai trouvé la section html suivante:

<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>

Maintenant, je suis coincé à essayer de trouver le menu contextuel:

Affichez un menu contextuel sur l'élément #profileCard et sélectionnez les événements sur lesquels vous souhaitez vous interrompre: modifications de sous-arborescence, modifications d'attributs et suppression de nœud

Voici une capture d'écran pour montrer où je suis:

ss

javascriptdebugginggoogle-chromegoogle-chrome-devtools
42
robert king

Pour définir des points d'arrêt dans Chrome affichez l'inspecteur comme vous l'avez montré ci-dessus et cliquez sur l'option de scripts en haut. Cela vous permettra de regarder les scripts utilisés sur la page et de insérer des points d'arrêt sur cette page, ainsi que les parcourir et découvrir d'autres options de débogage utiles.

Ce qui précède est pour javascript, pour casser les éléments dom, faites un clic droit sur l'élément (à l'intérieur de l'inspecteur) que vous souhaitez casser et cela fera apparaître le menu contextuel qui vous permet de casser les modifications de sous-arborescence et des trucs comme ça.

40
Ryan

Je voulais juste ajouter que vous pouvez simplement cliquer avec le bouton droit sur un élément dans le panneau des éléments et aller à:

Break On... et sélectionnez Subtree modifications, Attributes modifications, ou Node removal

enter image description here

25
Hanna
  1. ouvrir le panneau des éléments sur devTools.
  2. inspecter ou découvrir l'élément DOM.
  3. faites un clic droit dessus et sélectionnez pause sur ...

Modifications de sous-arbre Un point d'arrêt de modification de sous-arbre est déclenché lorsqu'un élément enfant est ajouté, supprimé ou déplacé.

Modifications d'attributs Une modification d'attribut se produit lorsque l'attribut d'un élément (classe, id, nom) est changé dynamiquement.

Suppression de noeud Une modification de suppression de noeud est déclenchée lorsque le noeud en question est supprimé du DOM.

Fournissez un lien d'exercice ici, profitez-en :) exercice de points d'arrêt DOM

9
Shawn Wu