title: How to run the webpage after setting the breakpoint in a multi-frame webpage?
body: <p>I am a beginner who starts using Chrome dev tool to do some debugging. I run into this page:</p>
  
  <p><a href="http://blittle.github.io/chrome-dev-tools/elements/event-listeners.html" rel="nofollow noreferrer">http://blittle.github.io/chrome-dev-tools/elements/event-listeners.html</a></p>
  
  <p>and I would like to set a break point inside the 'alert me' script. I was able to do it via either of the two ways:</p>
  
  <ol>
  <li><p>inspect 'alert me' element, in 'elements' tab, in 'event listeners' find the 'button#click-example' handler, then 'show function definition' to see the code, and set breakpoint there</p></li>
  <li><p>in 'sources' tab, goto 'event listener breakpoints', goto 'mouse'->'click', and check it to set the breakpoint</p></li>
  </ol>
  
  <p>However by doing either way above, after I hit F12 to invoke Dev tool, the webpage itself (which consist of two frames) will not show the 'Event Listeners' frame no more. So how can I click the 'alert me' and trigger the break point?</p>
  
  <p>In general, to trigger a break point, I either do a page reload(F5), or click the UI element on the page while Dev tool is open. But in this case, I am stuck. </p>