Chrome browser debugging tips

Refer to colleagues’ technical sharing

1. $related

1. $0View the currently selected node

elementSelect a node in: View in
Insert image description here
, indicating the currently selected node. You can also use it to view the last selected node; view the last selected node, which can be used untilconsole$0
Insert image description here
$1$2$4

2. $and$$

If there is no $defined as in the web page jquery, $(选择器)the first element that meets the conditions will be returned; $$(选择器)all elements that meet the conditions will be returned
Insert image description here

3、$_

$_ is a reference to the result of the last execution.

Insert image description here

2. Console related

1、console.assert

Insert image description here
The picture comes from MDN assert.
When the first parameter we pass in is false, console.assert prints the value that follows this parameter. ifYou can know which variable has the problem without using judgment.
Insert image description here

2、console.table

Elements can be converted into table form. Parameter one is the target element; parameter two is the attributes of the target element that need to be printed. If not passed, all attributes will be printed.
Insert image description here

3、console.dir

Convert the target element to object output, so you can easily view the properties of the target element.
Insert image description here

4. Console combined with await

3000msThen the results of asynchronous processing are printed directly.
Insert image description here

5. Monitor execution time

console.time(name) starts the timer; console.timeEnd(name) ends the timer and prints the time it takes
Insert image description here
Insert image description here

3. Command menu

Command menu entry:
Insert image description here

1. Topic switching

Insert image description here

2. Add timestamp to logs

Insert image description here

4. Others

1. Shadow debugging

Insert image description here

2. Conditional breakpoint

Right-click on the breakpoint and edit the breakpoint to set the conditions under which the breakpoint will be executed.
Insert image description here

3. queryObject(class)

Get all objects of a class
Insert image description here

4. replay XHR requests (resend XHR requests)

When the request fails, you can directly right-click replayand try again.
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_45855469/article/details/131411524