1. Use of $0 in the console
In the console, get the selected element,
-
General JS operations: document.getelementById and so on to get elements;
-
In Chrome: $0 gets the selected element; $1 gets the last selected element
2. Right-click a DOM element and select break_ON to set breakpoints for different DOM operations
- Subtree modifications: When a byte changes, it enters a breakpoint
- Attribute modifications: A breakpoint is entered when a node property changes
- Node removal: A breakpoint is entered when a node is removed
3. Fetch the element information in $. Cache
- Find the location of the element in the $. Cache array, the subscript
In the Element panel, go to the Properties panel and find the element; When expanded, the value of jQueryXXXXXXX (jq followed by a string of numbers) is the element’s location in $. Cache
Data, events and handle information of elements can be obtained through cache. Events holds the events bound to that element, right-click the event, and you can choose to jump to the location of the event declaration
4. Use of Sources panel
-
Breakpoint steps: Run to the next breakpoint; Skip to the next line of code; If the line has code to call the method, it goes to the code where the method is located. If not, it jumps to the next line. Jump out of the method body of the current method. Step by step; Disable breakpoints
-
Watch: Watch changes to variables in the code during debugging
-
Breakpoints: Breakpoints set
-
Scope: scope of the current breakpoint
-
Call stack: call stack; When a breakpoint is executed, all method call stacks can trace who called the method where the breakpoint is currently located.
-
Event Listener Breakpoints: can hit Event listening Breakpoints; If you don’t know which methods are called when you click, you can check mouse/click here so that when you click, you enter the Click breakpoint
5. Conditional breakpoint: it will stop at the breakpoint only when the condition is satisfied
- You can write conditions that make breakpoints stop