how to set DOM Breakpoints in chrome

Question

I'm trying to follow the tutorial here.

I'm stuck on the section DOM Breakpoints (near the bottom).

I went to the example site they are talking about. I pressed ctrl+shift+i and navigated to "elements" tab. In the elements tab I found the following html section:

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

Now I'm stuck trying to find the context menu:

Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal

Here is a screenshot to show where I am:

Solution 1

To set break points in Chrome bring up the inspector like you have shown above and click on the scripts option at the top. This will allow you to look at the scripts being used on the page and to insert break points on that page. As well as step through them and other useful debugging options.

The above is for javascript, to break on dom elements right click on the element (inside of the inspector) that you want to break on and it will bring up the context menu that allows you to break on subtree modifications and stuff like that.

Solution 2

Just wanted to add that you can simply right-click on an element in the elements panel and go to:

Break On... and select Subtree modifications, Attributes modifications, or Node removal

Solution 3

1. open element panel on devTools.
2. inspect or find out the DOM element.
3. right click on it and select break on...

Subtree Modifications A subtree modification breakpoint is triggered when a child element is added, removed, or moved.

Attributes Modifications An attribute modification occurs when the attribute of an element (class, id, name) is changed dynamically.

Node Removal A node removal modification is triggered when the node in question is removed from the DOM.

Provide a exercise link here, Enjoy :) DOM Breakpoints Exercise‎

Comments

[James]

How would you add a breakpoint to an element that is only present while clicking and dragging? Right clicking or tabbing to the Inspector window removes the element I'm trying to work with.

[Ryan]

@James chrome now has an option to force element state. I don't work with draggables much, but you might want to look into that.

[Legends]

When I click on an element and activate "Attributes modifications", it doesn't break when the class attribute is modified by a script

[Hanna]

Sounds like you got that figured out