[Debug] Set and remove DOM breakpoints

本小妞迷上赌 提交于 2020-02-16 22:43:57

When building a web app, sometimes we need to approach it top-down. Modern browser devtools allow us to set breakpoints not only on the JS code but also on the DOM as well, so we can easily pin down which lines of code are to be executed deep inside the code base, by pausing the execution based on DOM changes.

In this lesson, we will learn how to set and remove DOM breakpoints in Chrome DevTools.

 

If you want to find out which part of code updating the DOM, you can use "subtree modifications":

 

Next time when code try to udpate the DOM, it will pause execution, and open the debugger.

 

To remove the breakpoints, in devtool -- "Elements" -- "DOM Breakpoints", remove all breakpoints.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!