DOM breakpoint debugging for javascript debugging using tips sharing

Some students will say, can use the source code search method. Indeed, for a relatively simple page, this method often works. However, for pages that are relatively complex in composition (such as pages that embed many script files and fragments, use large chunks of object-oriented implementation, and hide implementation code), it may not be as smooth to find.

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

Specific usage:

1. In Chrome, open developer tools, select a page element, right-click, and click "Break on..." in the menu. - check the "Attributes modifications". Refresh the page, and when the attributes of the element change, the script is paused and the change is 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, and check "interrupt when property changes" in the menu. This successfully adds an HTML breakpoint. After refreshing the page, firebug also helps us locate the code that changed the element's attributes.

In addition to monitoring attribute changes in the DOM element itself, Chrome and Firebug can also monitor changes in its children and when elements are removed.