Chrome Developer Tools Adds 'Break on UI and Network Events'

Chrome Developer Tools' Scripts panel provides a graphical JavaScript debugger and allows you to set breakpoints in the JavaScript source code. However, setting breakpoints in the source code doesn't always work well, especially when the application is large and you aren't familiar with the entire code base.To better support this use case, Google has introduced […]

Chrome Developer Tools' Scripts panel provides a graphical JavaScript debugger and allows you to set breakpoints in the JavaScript source code. However, setting breakpoints in the source code doesn't always work well, especially when the application is large and you aren't familiar with the entire code base.

To better support this use case, Google has introduced a new set of breakpoints that allow you to break on UI and network events.

"Suppose you need to find the piece of code that modifies a specific node in a document. Right-click on that node in the Elements panel and select the appropriate "Break on..." context menu option and you are all set. The debugger will pause JavaScript execution right before the node gets modified next time," explains Google.

Learn more about DOM breakpoints and other new kinds of breakpoints, at Breakpoints Tutorial page.

[Source]