This article uses free translation, this is the original

1. Element drag and drop

In the Elements panel, you can drag and drop Elements as much as you want

2. Get the currently selected element

After you select an element in the Elements panel, type $0 in Console to get a reference to the selected element

If you use jQuery, type $($0) to get the current element’s jQuery object and use the API

In 3.ConsoleThe value of the last operation is used in the panel

In the Console panel, use the $_ variable to refer to the return value of the last operation

4. Add styles and change states

In the Styles panel of the Elemetns panel, there are two useful buttons

First, you can add new styles to the elements of your choice

Second, if the selected element style has a pseudo-class, you can trigger its pseudo-class style at will

5. Change the style and save

In the Styles pane of the Elemetns pane, you can modify the selected element style and save it by clicking on the file name

This technique does not apply to content with + selectors and element.style styles

6. Take a screenshot of the selected element

In the Elements TAB, select an element, press cmd-shift-p (in Windows, ctrl-shift-p), search for and select Capture node Screenshot from the Shortcut menu

7. Use CSS selectors to find elements

In the Elements panel, press cmD-f (Ctrl-P for Windows) to display the query box

You can either type in a string to find it across the page, or type in a CSS selector to find it

8.ConsoleCode wrap

When debugging multiple lines of code in the Console panel, use the shift-Enter key combination to wrap the line, and the Enter key will execute the code directly

9. Positioning

In the debugger panel:

  • cmd-o(windowsFor thectrl-o), will list the current page loaded resources, select to locate the resources
  • cmd-shift-o(windowsFor thectrl-shift-o), which lists the symbols of the currently selected file (properties, methods, classes, etc.)
  • ctrl-gLocate the line of code for the currently selected file

10. Listen for expressions

Add the variable to the list of listener expressions to avoid repeatedly debugging the same variable in the program console.log

11.XRH/Fetchdebugging

Locate and open the XHR/Fetch Breakpoints panel to add the request URL that you want to intercept

12DOMdebugging

In the Elements panel, right-click on the selected element and enable Break ON -> Subtree Modifications. Any JS operations that change the contents of the element’s children will be intercepted