user1559625 user1559625 -4 years ago 55
Javascript Question

How to run the webpage after setting the breakpoint in a multi-frame webpage?

I am a newbie who starts using chrome dev tool to do some debugging. I run into this page:

http://blittle.github.io/chrome-dev-tools/elements/event-listeners.html

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:


  1. 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

  2. in 'sources' tab, goto 'event listener breakpoints', goto 'mouse'->'click', and check it to set the breakpoint



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 am i suppose to click the 'alert me' and trigger the break point?

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. Any help?

Thanks a lot.

Answer Source

If you close the dev tools, you can't hit the breakpoints.

On the link you've supplied, the section of the page with the "Alert Me" link will not display if the dev tools are too wide.

Your best option is to change the docking of the dev tools. This is explained in this post:
How to open the Chrome Developer Tools in a new window?.

Currently this looks like this:

dock side

You want either the first option (separate window) or the third option (dock to bottom).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download