Do you know the debugging skills of the most commonly used Chrome browser console.

Console printing vue example $ Selected elements Output $0 It's the current element

Get elements quickly and concisely $

Add a class name to the element

Expand all elements at once , Not at the point one by one

Take a screenshot of the whole web page , Not visual area , Intercept the specified Dom Elements

How to give the interface and parameters that need to be reported by the back-end to the front-end and back-end joint debugging

Console copy Data can be formatted json data , You can also copy the data output by variables, which is very fragrant .

Copy the data structure of the response

Search for events

Network request network Some basic information of

Preserve log （ Retain ） The log is used to record the changes before and after the page is refreshed log Or before and after the page Jump log For comparison and debugging

Disable catch Don't cache

Online You can switch the network speed test

Hide data Urls Hide data

Url All View all requests xhr see xml Of http Of request

Introduction of header information

Access-Control-Allow-Origin: The request method allowed to be set in the request header

content-type:   The type and encoding method sent by the client
Date:   The time when the client requests the server
keep-alive: A long connection
Last-Modified:   The last modification time of the resource by the server
Server:   Server side web Server name
Content-Encoding:  gzip Compression coding type
Transfer-Encoding:chunked:   Block data to the client
Accept: The types of resources the client can receive
Accept-Encoding:   The type of compressed data the client can receive
Accept-Language:   The type of language the client receives
Authorization:  To configure token Field
Cache-Control: no-cache The server forbids the client to cache page data
Connection: keep-alive Maintain the connection between client and server
Cookie: The client stores the information of the server
Host:   The target host and port number of the connection
Pragma: no-cache The server forbids the client to cache page data
Referer:   Where did you come from ( That is, which page to jump from )
User-Agent:   The name of the client version number

Let the Internet speed slow down

Resend request , Do you know ,（ The console sends a request   2,3 A picture ）

And the part of the break point , The frame doesn't work well , pure js Code OK

It will be updated later …