Tips for using DOM breakpoint debugging method in javascript debugging_javascript tips

Some students will say that you can use source code search. Indeed, for a relatively simple page, this approach often works. However, for pages with a relatively complex composition (for example, the page embeds many script files and fragments, uses a large section of object-oriented implementation, and hides the implementation code), it may not be so smooth to find.

In Javascript debugging, we often use breakpoint debugging. In fact, in debugging the DOM structure, we can also use the breakpoint method, which is DOM Breakpoint.

Specific usage:

1. In the Chrome browser, open the developer tools, first select a page element, then right-click the mouse, click "Break on..." in the menu - and check "Attributes modifications". Refresh the page. When the attribute of the element changes, the execution of the script will be paused and the location of the change will be located.

2. In the Firefox browser with firebug installed, open firebug, switch to the "HTML" tab, select the DOM element that needs to be monitored, right-click the mouse, and check "Break when attributes change" in the menu. This successfully adds an HTML breakpoint. After refreshing the page, firebug will also help us locate the code that changes the attribute of the element.

In addition to monitoring the property changes of the DOM element itself, Chrome and Firebug can also monitor changes to its child elements and when the element is deleted.