The DOM breakpoint debugging method of JavaScript debugging using tips to share _javascript skills

Some students will say that you can use the source code search method. Indeed, for a relatively simple page, this method often works. However, for pages that make up a relatively complex page, such as a page that embeds many script files and fragments, uses a large object-oriented implementation, and hides the implementation code, it may not be as smooth as it might look.

In JavaScript debugging, we often use breakpoint debugging. In fact, in the debugging of the DOM structure, we can also use the breakpoint method, which is the DOM Breakpoint (Dom breakpoint).

Specific methods of use:

1. In the Chrome browser, open the Developer tool, first select a page element, then click the right mouse button, click on the menu "Break on ..."-Tick "Attributes modifications". Refreshes the page and, when the attributes of that element change, pauses the execution of the script and locates where the change occurred.

2. In the Firefox browser where Firebug is installed, open firebug, switch to the HTML tab, select the DOM elements you want to monitor, right-click, and check the "Break when property changes" in the menu. This succeeds in adding an HTML breakpoint. After refreshing the page, Firebug also helps us navigate to the code that changes the element's properties.

In addition to monitoring the property changes of the DOM elements themselves, Chrome and Firebug can also monitor the changes in their child elements and when the elements are deleted.