title: how to set DOM Breakpoints in chrome
body: <p>I'm trying to follow the tutorial <a href="https://developers.google.com/chrome-developer-tools/docs/elements" rel="noreferrer">here</a>.</p>
  
  <p>I'm stuck on the section <strong>DOM Breakpoints</strong> (near the bottom).</p>
  
  <p>I went to the <a href="https://github.com/google/closure-library/blob/master/closure/goog/demos/hovercard.html" rel="noreferrer">example site</a> they are talking about. I pressed <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>i</kbd> and navigated to "elements" tab. In the elements tab I found the following html section:</p>
  
  <pre><code>&lt;div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I'm stuck trying to find the context menu:</p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>Here is a screenshot to show where I am:</p>
  
  <p><img src="https://i.stack.imgur.com/LdOKl.jpg" alt="ss"></p>