The introduction

Since you have to open the console every day, why not make it cool?

Watch carefully, there must be debugging tricks you don’t know, there must be you want to install X operation.

Cool Chrome DevTools tips and tricks you wish you knew already

Browser debugging is something you don’t know about. “At first,” That’s it “? After reading, “really sweet”!

1. Drag and drop Elements from the Elements panel

In the Elements panel, you can drag and drop any HTML element and change its position on the page.


Drag-and-drop in the Elements panel

2. In Console, the selected element is displayed

Select a node in the Elements panel, and then enter $0 in the Console to invoke the display.


Reference the currently selected element in the Console

3. Use the value of the previous operation in Console

Use $_ to refer to the return value of the last operation performed in Console.


Use the value of the last operation in the Console

4. Add CSS and edit element states

In the Elements panel, there are two extremely useful buttons.

First, you can add new CSS attributes using any selectors you want, but the currently selected element cannot be empty:


Add CSS rules

Second, you can trigger the state of the selected element so that you can see its style when it is active, hovering, or on time.


Edit the element state

5. Save the modified CSS file

Click the name of the CSS file you edited. The inspector opens it to the Sources panel, where you can save it along with the style application you are editing in real time.


Save to file the modified CSS

6. Screenshot of a single element

Select an element, then press cmd-shift-p (or Ctrl-shift-p in Windows) to open the Command menu, and then select Capture node Screenshot from the Screen


Screenshot a single element

7. Use CSS selectors to find elements

Press CMD-f (Ctrl-f in Windows) to open the search box in the Elements panel.

You can enter any string in there to match the source code, or you can use the CSS selector to redirect Chrome to the corresponding image:


Find an element using CSS selectors

8. On the Console screen, press Shift-Enter

To write cross-line commands in the Console panel, press shift-Enter.

Press Enter at the end of the script to execute the script:


Shift-enter in the Console to write multiline commands

Jump to…

In the Sources panel:

  • cmd-o(On Windowsctrl-o) to display all the files loaded by your page.
  • cmd-shift-o(On Windowsctrl-shift-oDisplays symbols (attributes, functions, classes) in the current file.
  • ctrl-gGo to a particular row.

Go to file

10. Listen for expressions

Instead of writing a variable name or an expression over and over again during debugging, you add it to the list of listening Expressions.


Watch Expression

11. XHR/Fetch debugging

In the debugger, open the XHR/Fetch Breakpoints panel.

You can set breakpoints on XHR/Fetch calls, or on specific calls:


XHR/Fetch debugging

12. Debug DOM modifications

Right-click on an element, then select “Break on Subtree Modifications.” Every time the script iterates through and makes changes to the child elements of the element, the debugger stops automatically so you can check the tests.


Debug on DOM modifications

This article is formatted using MDNICE