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:
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.
Just wanted to add that you can simply right-click on an element in the elements panel and go to:
Break On... and select
Attributes modifications, or
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?
©2020 All rights reserved.