0

I am a beginner 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 can I 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.

halfer
  • 19,824
  • 17
  • 99
  • 186
user1559625
  • 2,583
  • 5
  • 37
  • 75

1 Answers1

1

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

Brian
  • 665
  • 6
  • 14
  • my question is how to make the webpage stop at this break point. Sorry my title may be confusing. I'll update it. – user1559625 Jun 14 '17 at 04:43
  • If you set the breakpoint and click the "Alert Me" button on the link, it should hit the breakpoint. – Brian Jun 14 '17 at 04:44
  • that's the question i asked in this post. the page has two frames, if i start dev tool, i can not see the frame with 'alert me' any more. if i close dev tool and click 'alert me', it does not stop either. – user1559625 Jun 14 '17 at 04:47
  • Oh, you have to either shrink the dev tools (just drag over the section) or make them display in a separate window like here: https://stackoverflow.com/questions/23668827/how-to-open-the-chrome-developer-tools-in-a-new-window – Brian Jun 14 '17 at 04:48