Some tips for chrome console JS debugging

$

The $_ command Returns the result of the most recent expression execution, with the same function as pressing the UP ARROW key again, but it can be used as a variable in your next expression.

$ ~$4 represents the last 5 DOM nodes you have chosen. Right-click on the page to select 审查元素 , and then in the pop-up DOM node tree above the random click, these points are the point of the nodes will be recorded, and $0 will return the most recent point selected DOM node, and so on, and so on, returned the last point selected DOM nodes, up to 5 saved, if not enough 5, is returned undefined .

The Chrome console natively supports jquery-like selectors, meaning you can $ select DOM nodes with a familiar CSS selector

$ (selector) returns the first DOM element that satisfies the selection criteria. Stripping off her hypocritical cloak is in fact $(selector) a native JavaScript document.querySelector() wrapper.
At the same time, another command $$(selector) returns a collection of all elements that satisfy the selection criteria, which is the encapsulation of the pair document.querySelectorAll() .

Copy

This command allows you to copy the contents obtained from the console to the Clipboard

Because I just used the console to select an element ID, so I use $_, although the console output is undefined, but you create a new Notepad, CTRL + C try it, it's amazing.

Keys&values

Keys returns data that consists of all the property names of the passed-in object

Values returns an array of all property values

Monitor&unmonitor

Monitor (function), which receives a function name as a parameter, each time the function is executed, it outputs a message in the console that contains the name of the function and the parameters passed in when it was executed.

and Unmonitor (function) is used to stop this monitoring.


Some tips for chrome console JS debugging