Chrome developer tools is a very powerful thing, I believe programmers are familiar with, but some of the small features may not be known by the public, so, write this article to list the functions you may not know, some of the features may be useful, some of the not necessarily, also welcome you to add to the exchange.

No more words, let’s begin.

Code formatting

A lot of CSS/JS code will be removed by Minify, you can click on the {} TAB in the bottom left corner of the code window and Chrome will format it for you.

Enforcing DOM state

Some HTML DOM is stateful, such as tag, which has active, hover, focus and visited states. Sometimes, our CSS will define the styles of different states. When analyzing the CSS styles of the DOM on the web page, We can force the DOM state by clicking the little hoV button on the CSS style.

animation

Every web page now has some kind of animation. In Chrome’s Developer Tools, call out the associated TAB via the More Tools => Animations menu in the upper right corner. You can then play the animation in slow motion (you can click 25% or 10%), and then Chrome can record the animation for you, you can pull and redraw, and even make some simple changes.

Edit the page directly

Enter the following command in your console:

1
document.designMode =
"on"

You can then modify the content of the web page directly.

P.S. An example of how to empty the console is shown in the screenshot below. You can type Clear () or press Ctrl+L (Windows), CMD + K (Mac).

Call waiting welfare

1. Recently sorted out 20G resources, including product/operation/test/programmer/market, etc., and Internet practitioners [necessary skills for work, professional books on the industry, precious books on interview questions, etc.]. Access:

  • Scan the code of wechat to follow the public account “Atypical Internet”, forward the article to the moments of friends, and send the screenshots to the background of the public account to obtain dry goods resources links;

2. Internet Communication Group:

  • Pay attention to the public account “atypical Internet”, in the background of the public account reply “into the group”, network sharing, communication;

Network speed limit

You can set the access speed of your network to simulate a slow network.

Copying HTTP requests

This is one of my favorite features. You can go to the Network TAB, click XHR to filter the relevant Ajax requests, and then right click on the relevant requests and choose from the menu: CURL => cURL => cURL => cURL => cURL => cURL => cURL This can easily be done with some automated tests.

Note: This operation may copy your private information out, such as your personal login cookies.

Grab a picture of the phone

This might be a little boring, but I think it’s interesting.

In the Device display, first select a phone and then select Show Device Frame in the upper right corner to see what the phone looks like. Then select Capture Snapshot from that menu to Capture a screenshot that looks like a phone.

Here’s what I captured (of course, not all phones have a frame)

To set breakpoints

In addition to setting breakpoints on your Javascript source code, you can also:

Set breakpoints for the DOM

Select a DOM and right-click on the Break on… You can see the following three options:

Set breakpoints for XHR and Event Lisener

In the Sources page, you can see the stack of break points on the right. In addition to setting breakpoints for DOM, you can also set breakpoints for XHR and Event Listener.

Call waiting welfare

1. Recently sorted out 20G resources, including product/operation/test/programmer/market, etc., and Internet practitioners [necessary skills for work, professional books on the industry, precious books on interview questions, etc.]. Access:

  • Scan the code of wechat to follow the public account “Atypical Internet”, forward the article to the moments of friends, and send the screenshots to the background of the public account to obtain dry goods resources links;

2. Internet Communication Group:

  • Pay attention to the public account “atypical Internet”, in the background of the public account reply “into the group”, network sharing, communication;

Tips on Console

DOM manipulation
  • Chrome will help you buffer five DOM objects that you have viewed, which you can access directly from the Console with $0, $1, $2, $3, and $4.
  • You can also use syntax like jQuery to get DOM objects, such as:$("#mydiv")
  • You can still use it? (".class")To select all DOM objects that meet the criteria.
  • You can usegetEventListeners($("selector"))To view events on a DOM object (as shown below).

  • You can still use itmonitorEvents($("selector"))To monitor related events. Such as:
1
monitorEvents(document.body,
"click"
);

Some functions in Console

1) Monitor function

Use the monitor function to monitor a function, as shown in the following example

2) Copy function

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

3) inspect function

Inspect lets you jump to the object you want to view. Such as:

Use the Console/Command Line Reference for more functions

The output of the Console

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

1
console.log(
"%c left ear"
.
"font-size:90px; color:#888"
)

Therefore, 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; '
.
The '-'
, msg,
The '-'
);
}
console.important =
function
( msg){

console.log(
'%c%s %s %s'
.
'font-size:20px; color:brown; font-weight: bold; text-decoration: underline; '
.
The '-'
, msg,
The '-'
);
}

For formatting in console.log, you can see the following table:

indicator The output
%s Format output a string variable.
%i or %d Format outputs the value of an integer variable.
%f Formats output the value of a floating point variable.
%o Formats output a DOM object.
%O Formats output a Javascript object.
%c Apply CSS styles to the strings that follow

In addition to console.log printing an 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 the Console object

  • The console object has many other functions, such as:
  • Console.trace () prints out the js function call stack
  • Console.time () and console.timeend () help you calculate the elapsed time between pieces of code.
  • Console.profile () and console.profileend () allow you to view 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

See the documentation for Google’s Console API for these things.

In fact, there are many more things, you can see the official Google documentation – Chrome DevTools

About shortcut keys

Click on the three solid little dots in the upper right corner of DevTools and you’ll see a menu, click Shortcuts and you’ll see all the Shortcuts

If you know more, welcome to add!

Author: increasingly, blog: https://coolshell.cn/articles/18190.html