The introduction 🏂

As a developer, I usually use Chrome DevTools most of the time, but probably many students like me use the Console and Elements panel most of the time.

I sort out some of my usual use of more debugging tips, I believe to improve your work efficiency can play a small help!

Command (Command) menu 🏈

The Commands menu is one of the most common and will be used many times in this article, so here’s how to open it:

According to theCmd + Shift + P(If usingWindowsAnd then theCtrl + Shift + P) Open the Commands menu.

screenshotsDOMElement 🏉

When you just want a specialDOMYou may need to use other tools to take screenshots of the node, but for now you can simply select the node and open the command (Command) menu and useNode captureThat will do.Intercepting a specific node corresponds to the above command isScreenshot Capture node screenshot.

Interception of a particularDOMExamples of elements:

Not only that, but you can also do a full screen Screenshot in this way: with the Screenshot Capture full size Screenshot command.

❝

Note that this is full screen, not just the visible area of the page, but the entire content of the page, including the scrollbar.

❞

An example of the corresponding full-screen capture:

Use the value 🎃 from the last operation in the console

I only recently discovered this technique. useThe $_You can refer to the return value of the previous operation performed in the console. If you are debugging some in the consoleJavaScriptCode, and you need to refer to the previous return value.

To initiatexhrRequest 🚀

In normal and back – end coordination, we use the most is probablyNetworkThe panel. But every time we want to review a request, we do it by refreshing the page, clicking a button, etcxhrRequest, which is sometimes cumbersome, but we can do itgoogleTo provide theReplay XHRTo initiate a new request, which is helpful for the improvement of our development efficiency.

✍, edit any text on the page

Type in the consoledocument.body.contentEditable="true"ordocument.designMode = 'on'You can edit the page.In fact, this is more practical, if you want to test aDOMIf the node text is too long, if the style is confused, or if the page elements need to be modified directly to meet some business requirement. (I wasElementsPanel to modify one by one,,,)

Network Panel (Network) 🌇

Start theNetworkUnder the panelCapture screenshotsYou can take screenshots as the page loads. A little bitslideFeeling.Click the screenshot of each frame to display the network request that occurred at the corresponding time. This visual representation will give you a better idea of what’s going on at any given moment.

Animation check 🎏

DevTools has an animation panel, which is closed by default, and many people may not be aware of this feature. It allows you to control and manipulate CSS animations and visualize how they work.

To open this panel, you canDevToolsUpper-right menu →More toolsIn the openAnimations ：

By default, DevTools “listens” for animations. Once triggered, they will be added to the list. You can see how these animation blocks are displayed. On the animation itself, DevTools shows us which properties are changing, such as background-color or Transform.

We can then modify the animation by dragging with the mouse or by adjusting the timeline:

Incrementing/decrement the value of the CSS property 🃏

As a front end development, it is often necessary to find an element and its CSS style through the Elements panel. Sometimes it’s a little difficult to adjust the px pixels, but you can use the shortcut keys to do it for you:

* Incremental 0.1 * Mac: Option + up and Option + down * Windows: Alt + Up and Alt + Down * Incremental 1 * Mac: Up + Down * Windows: Up + Down * Incremental 10 * Mac: Up + Down * Windows: Up + Down * Incremental 10 * Mac: Up + Down ⇧+ Up and Down * Windows: ⇧+ up and down * Increment 100 * Mac: ⌘+ up and ⌘+ down * Windows: Ctrl + Up and Ctrl + DownCopy the code

Test on low end devices and weak networks 📱

We usually develop in the office (the wifi speed is faster), and the equipment is generally newer on the market. However, the research and development and promotion of products must consider the situation of low equipment population and weak network.

You can easily adjust CPU functionality and network speed in Chrome DevTools. This allows us to test Web application performance and optimize accordingly.

The specific opening mode is: inChrome DevToolsThrough theCMD/Ctrl + Shift + pOpen the command menu. Then enterShow PerformanceThe performance panel is displayed.

Copying & saving 📜

When debugging, we always copy or save data in Dev Tools, but they also have some tricks!

copy()

You can do it globallycopy() 在 console 里 copyAny resource you can get your hands on

Store as global variable

If theconsoleIf you want to do extra work with the data, you can store it as a global variable. Just right-click on it and select the “Store as Global variable” option.The first time you use it, it creates a name calledtemp1Is created a second timetemp2The third time… . By using these variables to manipulate the corresponding data, you don’t have to worry about affecting their original values.

Customize Devtools 🌈

Most commonly used Chrome themes may be white/black, but for a long time, it is hard to avoid trying to switch themes like an IDE.

Open the way

  • First you need to enable the experimental modeAllow custom UI themes
    • Enter the following in the address boxurl
    chrome://flags/#enable-devtools-experiments
Copy the code
    • Enable the experiment function and restart the browser
    • Use the shortcut keys in the consoleF1Turn on Settings and switch toExperimentsoptions
    • To enable theAllow custom UI themes
  • fromChromeThe shop installedMaterial DevTools Theme Collectionadd-in
  • Just choose whichever theme you like

CSS/JS coverage ✅

The Coverage feature in Chrome DevTools helps you see the Coverage of your code.

Open the way

  • Open the debug panel and use the shortcut keysShift + command + P (MAC)The inputShow CoverageBring up the corresponding panel
  • Click on thereloadButton start detection
  • Click the corresponding file to view the specific coverage (the green code is used, and the red code is not used).

Finally, let’s do the same with a GIF:

Custom Snippets 🌰

In the normal development process, we often have some JavaScript code that we want to debug in Chrome Devtools, it is difficult to write directly in the console, or we often have some code snippets (stabilization, throttling, getting address bar parameters, etc.) that we want to save. These snippets of code are available every time you open Devtools without having to go to Google, which is what Chrome Devtool provides.

As you can see, inSourcesthistabUnder the column, there’s aSnippetsTag, where you can add some commonly used code snippets.

Copy the image as the data URI 🦊

Open the way

  • chooseNetworkpanel
  • Select in the resource panelImg
  • Right-click to copy it to dataURI(Has been coded asbase 64)

Media enquiries 🔭

Media inquiries are an essential part of adaptive web design. inChrome DevtoolsIn theEquipment modelNext, click in the three-dot menuShow Media queriesCan be enabled:DevtoolsMedia queries are detected in the stylesheet and displayed as colored bars in the top ruler:How do you use it? It’s very simple:

  • Click the media query bar to resize the viewport and preview the style to fit the target screen size
  • Right-click on a bar to view the media query inCSSAnd jump to the definition in the source code

Keys/values 🎯

This is aDevtoolsProvides a quick view of an objectkey,valuestheAPI. And it’s easy to use:

❝

You might say that object.keys () and object.values () can also be implemented, but this is much simpler 🤠

❞

Table 🦐

DevtoolsProvided to record an array of objects as a tableAPI: