Tips for chrome developer tools (Reprint)

Time:2019-12-2

Original address: https://coolshell.cn/articles/17634.html/comment-page-1 “comments”
Chrome’s developer tool is a very powerful thing. I believe that programmers are not unfamiliar with it. However, some small functions may not be known by the public. So, write down this article to list the functions you may not know. Some functions may be more practical, some may not be. You are welcome to add and exchange.

If you don’t talk much, let’s start.

Code formatting
A lot of CSS / JS code will be minify dropped. You can click the {} tag in the lower left corner of the code window, and chrome will help you format it.
Tips for chrome developer tools (Reprint)

Force DOM state
Some HTML DOM is stateful, such as tags, which will have active, hover, focus, visited states. Sometimes, our CSS will turn off the styles of different states. When analyzing the CSS styles of DOM on Web pages, we can click the: HOV button on CSS style to force the state of DOM.
Tips for chrome developer tools (Reprint)

animation
Now there are some animation effects on the web page. In Chrome’s developer tools, call out the related tabs through more tools = > animations in the upper right menu. So you can play the animation in slow motion (you can click 25% or 10%), and then chrome can help you record the animation, you can pull the process of moving and painting again, and even make some simple modifications.

Tips for chrome developer tools (Reprint)

Edit web page directly
Enter the following command in your console:

1
document.designMode = “on”
So you can directly modify the content of the web page.

An example of how to clear the console is also shown in the following screenshot of P.S. You can type clear () or press Ctrl + L (under Windows), CMD + K (under MAC)
Tips for chrome developer tools (Reprint)

Network speed limit
You can set the access speed of your network to simulate a slow network.
Tips for chrome developer tools (Reprint)

Copy HTTP request
This is a function I like very much. You can click XHR in the network tab to filter the relevant Ajax requests, then right-click the relevant requests, and select Copy = > copy as curl in the menu. Then you can go to your command line to execute the curl command. It’s easy to do some automated testing.

Tips for chrome developer tools (Reprint)

Friendly tip: this operation may copy your personal privacy information, such as the cookie after your personal login.

Grab a picture with a mobile phone
This may be a bit boring, but I think it’s interesting.
Tips for chrome developer tools (Reprint)

In the device display, first select a mobile phone, then select Show device frame in the upper right corner, then you will see the appearance of the mobile phone, and then select capture snapshot in that dish, and you can grab the next screenshot with the appearance of the mobile phone.

The picture I grabbed is as follows (of course, not all mobile phones have frame)

Set breakpoints
In addition to setting breakpoint debugging on javascript source code, you can also:

Set breakpoints for DOM
Select a DOM and choose break on from the right-click menu You can see the following three options:
Tips for chrome developer tools (Reprint)

Set breakpoints for XHR and event lisener
On the sources page, you can see the batch of break points on the right. In addition to setting breakpoints for DOM as mentioned above, you can also set breakpoints for XHR and event listener, as shown below:
Tips for chrome developer tools (Reprint)

Tips on console
DOM operation
Chrome will help you buffer 5 DOM objects you have viewed. You can access them directly in console with $0, $1, $2, $3, $4.
You can also use syntax like jQuery to get DOM objects, such as $(“ාmydiv”)
You can also use $$(“. Class”) to select all DOM objects that meet the criteria.
You can use geteventlisteners ($(“selector”) to view events on a DOM object (as shown in the following figure).
Tips for chrome developer tools (Reprint)

You can also use monitor events ($(“selector”) to monitor related events. For example:
1
monitorEvents(document.body, “click”);

Tips for chrome developer tools (Reprint)
Some functions in console
1) monitor function

Use the monitor function to monitor a function, as shown in the following example
Tips for chrome developer tools (Reprint)

2) copy function

The copy function copies the value of a variable to the clipboard.

3) inspection function

The inspect function allows your console to jump to the object you want to view. Such as:
Tips for chrome developer tools (Reprint)

For more functions, please refer to the official document – using the console / command line reference

Output from console
We know that in addition to console.log, there are also console.debug, console.info, console.warn, console.error, which are different levels of output. Another little-known function is that in console.log, you can also add CSS style to the output text, as shown below:

1
Console.log (“% C left ear”, “font size: 90px; color:”)

Then, you can define some related log functions, such as:

1
2
3
4
5
6
console.todo = function( msg){
console.log( ‘%c%s %s %s’, ‘font-size:20px; color:yellow; background-color: blue;’, ‘–‘, msg, ‘–‘);
}
console.important = function( msg){
console.log( ‘%c%s %s %s’, ‘font-size:20px; color:brown; font-weight: bold; text-decoration: underline;’, ‘–‘, msg, ‘–‘);
}

For formatting in console.log, please refer to the following table:

Indicator output
%S format outputs a string variable.
%I or% d formats the value of an integer variable.
%F formats the value of a floating-point variable.
%O format to output a DOM object.
%O format to output a JavaScript object.
%C add CSS style to the following string

In addition to console.log printing the array of JS, you can also use console.table to print, as shown below:

1
2
3
4
5
6
7
var pets = [
{ animal: ‘Horse’, name: ‘Pony’, age: 23 },
{ animal: ‘Dog’, name: ‘Snoopy’, age: 13 },
{ animal: ‘Cat’, name: ‘Tom’, age: 18 },
{ animal: ‘Mouse’, name: ‘Jerry’, age: 12}
];
console.table(pets)

About console objects
In addition to the log function above, the console object has many functions, such as:
Console. Trace() can print the function call stack of JS
Console. Time () and console. Timeend () can help you calculate the time spent between pieces of code.
Console. Profile () and console. Profileend () let you see the CPU consumption.
Console. Count () lets you see how many times the same log is currently printed.
Console.assert (expression, object) allows you to assert an expression
All of these can be seen in the documentation of Google’s console API.

In fact, there are many other things, you can refer to Google’s official document – chrome devtools

About shortcuts
Click the three rigid dots in the top right corner of devtools, and you will see a menu. Click shortcut, and you will see all shortcut keys
Tips for chrome developer tools (Reprint)

If you know more, please add!

(end of the paper)

Recommended Today

Manjaro uses SS method (requires nodejs environment)

Just installed manjaro, need to installshadowsocks-qt5+Proxy SwitchyOmega, but the latest Chrome has long blocked the installation of non Google store CRX channels. Here is my solution, which is troublesome but usable. If you are familiar with NPM commands in nodejs, you won’t find it troublesome, because nodejs is used for compilation. Preparation environment: A VPS […]