Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the operations in Chrome DevTools". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the operations in Chrome DevTools"?

Command (Command) menu

The Command menu is the most commonly used, and will be used many times in this article, so let's talk about how to open it first:

Press Cmd + Shift + P (or Ctrl + Shift + P if you use Windows) to open the commands menu.

Screenshot DOM element

When you only want to take a screenshot of a particular DOM node, you may need to use other tools for half a day, but now you just select that node, open the Command menu and use the node screenshot.

The command to intercept a specific node is Screenshot Capture node screenshot.

Example of intercepting specific DOM elements:

Not only that, but you can also take full-screen screenshots in this way: through the Screenshot Capture full size screenshot command.

❝, please note that we are talking about full screen, not just the visible area of the page, but all the content of the page, including the scroll bar. ❞

Example of capturing full screen:

Use the value of the last operation in the console

I only recently discovered this technique. Use $_ to refer to the return value of the previous operation performed on the console. This may be convenient if you are debugging some JavaScript code in the console and need to refer to the previous return value.

Re-initiate the xhr request

In the usual and back-end joint call, we may use the most is the Network panel. But every time we want to re-view a request, we often trigger the xhr request by refreshing the page and clicking the button, which is sometimes troublesome. We can initiate a new request through the Replay XHR provided by google, which is helpful for the improvement of our development efficiency.

Edit any text on the page

Type document.body.contentEditable= "true" or document.designMode = 'on' in the console to edit the web page.

In fact, this is quite practical, such as when you want to test whether the style will be confused when the text of a DOM node is too long, or if you want to directly modify the page elements to meet some business requirements. (I used to modify it one by one in the Elements panel.)

Slide mode of the network panel (Network)

Start Capture screenshots under the Network panel to capture screenshots when the page is loaded. It feels like a slide show. Click the screenshot of each frame to show the network request that occurred at the corresponding time. This visual presentation will give you a better understanding of the network requests that occur at every moment.

Animation check

There is an animation panel in DevTools, which is turned off 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 the panel, open Animations in the menu → More tools in the upper right corner of DevTools:

By default, DevTools "listens" for animations. Once triggered, they are 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 or adjusting the timeline with the mouse.

Increasing / decreasing CSS attribute value

As a front-end developer, it is necessary to find the element and its css style through the Elements panel. Sometimes it's a bit troublesome to adjust the pixel px, so you can use shortcut keys to do it for you:

* Increment 0.1 * Mac:Option + up and Option + Down * Windows:Alt + up and Alt + Down * Increment 1 * Mac: up + Down * Windows: up + Down * Increment 10 * Mac: ⇧ + up and ⇧ + Down * Windows: ⇧ + up and ⇧ + Down * Increment Mac: ⌘ + up and ⌘ + Down * Windows:Ctrl + up and Ctrl + Down

Test in low-end equipment and weak network

We usually develop in the office (wifi network speed is accelerated), and the equipment is generally relatively new on the market. However, in the development and promotion of products, we must consider the situation of low-equipment people and weak networks.

CPU function and network speed can be easily adjusted in Chrome DevTools. In this way, we can test the performance of Web applications and optimize them accordingly.

The specific way to open it is to open the command menu through CMD/Ctrl + Shift + p in Chrome DevTools. Then type Show Performance to open the performance panel.

Copying & saving

In the process of debugging, we always have the operation of copying or saving the data in Dev Tools, in fact, they also have some tips!

Copy ()

You can use the global method copy () to copy any resource you can get in console.

Store as global variable

If you print a pile of data in console and want to do extra work with it, you can store it as a global variable. Just right-click it and select the "Store as global variable" option. The first time it is used, it creates a variable named temp1, the second time it creates temp2, and the third time it creates... By using these variables to manipulate the corresponding data, you no longer have to worry about affecting their original values.

Custom devtools

The most commonly used Chrome themes are probably white / black, but after using them for a long time, you will inevitably want to try to switch themes like IDE.

Open mode

First, you need to enable Allow custom UI themes in experimental mode.

Enter the following url in the address bar

Chrome://flags/#enable-devtools-experiments # enables the lab feature

Enable the lab function and restart the browser

Use the shortcut F1 to open the settings in the console and switch to the Experiments option

Enable Allow custom UI themes

Install the Material DevTools Theme Collection extension from the Chrome Store

Just choose the theme you like.

CSS/JS coverage

The Coverage feature in Chrome DevTools can help us view code coverage.

Open mode

Open the debug panel and use the shortcut key shift+command+P (mac) to enter Show Coverage to bring up the corresponding panel

Click the reload button to start the detection

Click on the appropriate file to view the specific coverage (green is the used code, red indicates the unused code)

Custom code snippet Snippets

In the normal development process, we often have some JavaScript code that we want to debug in Chrome Devtools, but it is more troublesome to write directly under console, or we often have some code snippets (anti-shake, throttling, access to address bar parameters, etc.) that we want to save. Every time we open Devtools, we can get these code fragments instead of going to google, which happens to be provided by Chrome Devtool.

As shown in the figure, under the tab bar of Sources, there is a Snippets tag in which you can add some commonly used code snippets.

Copy the picture to data URI

Open mode

Select the Network panel

Select Img in the assets panel

Right-click to copy it to data URI (encoded as base64)

Media inquiry

Media query is a basic part of adaptive web design. In device mode in Chrome Devtools, click Show Media queries in the three-dot menu to enable:

Devtools detects media queries in the stylesheet and displays them as colored bars in the top ruler:

How do you use it? In fact, it is also very simple:

Click the media to query the bar, resize the viewport and preview the style that fits the target screen size

Right-click on a bar to see where the media query is defined in CSS and jump to the definition in the source code

Keys/values

This is a quick view of an object's key and values's API provided by Devtools. It's also easy to use:

❝you might say that Object.keys () and Object.values () can also be implemented, but isn't this a little easier? ❞

Table

The API provided by Devtools for recording an array of objects as a table:

Thank you for your reading, the above is the content of "what are the operations in Chrome DevTools". After the study of this article, I believe you have a deeper understanding of the operation of Chrome DevTools, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.