1. Introduction

Chrome is a browser that is familiar to web developers, whether they are working on the front end, back end or testing! Its simplicity, speed, and power make it popular with many developers! Chrome is the most popular browser ranking and accounts for half of all browsers. That’s how popular it is. As a front end developer, I also focus on the skills of using Chrome. Today to share with you, I hope to help you, if you still have some useful skills, welcome to add in the comments, let everyone exchange opinions, progress together!

1. Today’s guide about Chrome, I also write with the attitude of learning, is not complete, hope you pay attention and understand! To learn more about Chrome, it’s up to you to study on your own! 2. If there is any mistake or bad writing today, or there is any recommendation, I sincerely hope and welcome your comments and recommendations, so that we can exchange opinions, learn from each other and make progress together! 3. Give you a mention is, Chrome debugging optimization. Generally speaking, in the daily development, often use the developer tools panel is: element, the console, sources, the network, the performance (timeline). These five, I feel like the panacea five! Other than these five, the other panels may not be used very often, but you should be familiar with them.

2.element



This must be often used, especially when cutting diagram to adjust the style, this I according to the number on the diagram briefly say! One: is the element on the page, the mouse put above, on the page will appear (two) changes, convenient to find the element! Three: Click on this arrow and you can quickly select elements on the page! Four: browse and enter the mobile terminal adaptation mode, as shown in the figure below. You can change various models, or click ‘Edit’ to add another model or customize your model! The ‘Online’ next to it is to simulate the various situations of the network, and the icon next to the ‘Online’ is to switch between portrait and landscape! Here is a brief mention, you need to use! online

Five: all the involved styles of the selected elements, the page style can be modified at will here! Six: all the calculated styles of the selected element (some styles will repeat, overwrite, here is the overridden style) and the box model! 7: The event of the selected element (at least I haven’t used this one)

Other Common Functions

1. Color picker

2. Change the color display mode

3. Element status filtering

Pay attention to the page “China Merchants Bank”

4. HTML layout debugging

Pay attention to “vipshop” on the page.

Of course, if you want to change HTML elements, you can also change them here! This step is usually used when debugging styles!

5. Css3 animation curve debugging

As shown in the figure, without changing the curve, the purple ball above will move according to the curve, providing a reference for the developer to animate, and the code for the curve will also be generated below. This is also an important step to make beautiful CSS3 animation!

3.console



The console interface, common development is used very much, debugging JS code, often need to output variables or nodes in the console. For personal use, apart from writing jS in the control panel, the most frequently used button is the one shown in the figure above. Click the button to clear the panel. This feels faster than console.clear(). Here’s a quick word about how I normally use Console.

console.log

This is probably the most used feature of Console. In many cases, the output variable console.log is much easier to use than alert and displays more information. For example, output an object and node

alert({1:1});
console.log({1:1})
alert(document.getElementById("attribute-box"));
console.log(document.getElementById("attribute-box"))
Copy the code

alert

console

Many people think console.log only takes one parameter, but it doesn’t, such as output with styles

Many of you know how to use console.log. But the console. The info, the console. Warn, the console. The error, the three people is not very common, the following simple demo!

console.log('This is general information! ');
console.info('This is general information! ');
console.warn('This is a warning message! ');
console.error('That's the wrong message! ');
Copy the code

PS: This version is a bit strange beforeconsole.infoThis API has a blue flag in front of it, and I’m using this version andconsole.logIs exactly the same

The console. The time and the console. TimeEnd

Console. time and console.timeEnd are the second most used APIS to check the execution time of a piece of code

console.time();
for(leti=0; i<10000; i++){ } console.timeEnd();Copy the code

console.table

Console. table is usually used to display objects or arrays more intuitively

let arr=[
    {a:1,b:2,c:3},
{a:1,b:4,c:3},
{a:3,b:2,c:3},
{a:4,b:2,c:3},
{a:1,b:5,c:3},
{a:1,b:9,c:3},
{a:1,b:2,c:7}
];
console.table(arr)
Copy the code

letArr1 = [1, 2, 3, 4, 5]. The console table (arr1)Copy the code

let obj2={a:1,b:2,c:3}
console.table(obj2)Copy the code

console.count

Console. Count usage is a bit abstract, do not know how to say, look at the picture! Read and understand! When debugging code, judge the number of times a function is executed, the use of the scene is not too many!

console.assert

Console. assert receives two arguments. The first argument is the condition and the second argument is an error message. If the condition is false, an error message is displayed.

The console. The group and the console. GroupEnd

Console. group and console.groupEnd are also more intuitive to display data, but don’t seem to have many scenarios. I know that too, but I didn’t use it in development!

console.group("1");
console.log("Module 1 information 11111111...");
console.log("Module 1 information 11111111...");
console.log("Module 1 information 11111111...");
console.groupEnd();
console.group("2");
console.log("2 module information 22222222...");
console.log("2 module information 22222222...");
console.groupEnd();
Copy the code

$

When you see $, you should not think it is jquery. In fact, it is some API that comes with the browser. This is more convenient in debugging!

$: returns the first matching element, equivalent to Document.querySelector

? : return all eligible element, equivalent to the document. The querySelectorAll



Find and monitor events

GetEventListeners find and retrieve events for selected elements. Use the following

MonitorEvents monitors all events associated with your selected element and prints them in the console when they are triggered.

GetEventListeners and monitorEvents don’t seem to be used very much in development anymore, at least not by me. But feel will be useful, just mention!

4.network

A network is where every time a request is sent, whether it’s a request file or an Ajax request, it’s logged. The use of a lot of scenes, the following is the panel, everyone look, you know how to use, very good understanding!



Click on a request and display the requested resources and other information on the right. You can see the following picture!

The first is some information requested, the main concerns are the following!



Then request the returned information

Returns as JSON

Cookie and timeing are also requested information, but I usually do not pay much attention to, here is not much to say! For more information on Timing, see this article: Timing details in Chrome

5.Sources

1. Debug breakpoints

This step is to open the file, in any line number, click will appear a breakpoint!



2. The debugger to debug





As you can see, the button in the red box in the figure above, I will simply say by the number: 1, stop the current breakpoint debugging 2, continue to execute the next line of code, (1). 3. Jump into the function (f11) 4. Jump out of the current function 5. Disable all breakpoints and stop any debugging 6

3. View the value during debugging

Don’t talk, look at the picture



As for the side of these, I usually did not pay attention to, the need to find information on the Internet, I do not expand here!

3. Find and switch files

This feature is simply the use of CTRL + P and Enter shortcuts

4. Format the code

This is even less important, just a click, right

6.performance(timeline)

This panel may not be used much in the early stage, but the later optimization time, will often use, this panel is also a lot of functions, we all spend more attention!



So let me explain, first of all, the four regions

1. Controls

Enabled, stopped, and configured records. Analog network mode, mobile phone core number and other functions! This is nothing, everyone look at the panel is clear!

The Overview is as follows.

An overview of page presentation (behavior). The summary area consists of the following three graphic records:

The higher the green bar, the higher the FPS, the smoother the user will look and the better the experience will be. If it’s too small, the user will feel stuck

The area chart shows which events consume CPU resources.

Net a moment of the page form (in a moment of the screen display)! Moving the mouse over any position in the FPS, CPU, or NET area will show a screenshot of the time node plane. By moving the mouse left or right, you can re-send the screen video of the time, which can be used to analyze the details of each animation, or how fast the page loads!

3. Flame Chart

This panel, the Internet is called: visualization OF THE CPU stack (stack) information record. This is an area that I haven’t touched, and it’s still a bit of a fog, so you can go online and find information, tutorials. My personal feeling is generally not used, so temporarily did not pay attention to this piece!

4. Details

This panel shows more details about the currently selected time period! When a specific event is selected, this panel displays more details about the event.

Blue Loading: Web request and HTML parsing Yellow Scripting: JavaScript compilation and execution Purple Rendering: style parsing, calculation, Rendering Gray (other) : Time taken by other resources to load white (Idle) : Idle waiting time

This diagram is one of the intuitive ways to catch bottlenecks! For example, in the picture above, I can see that Scripting takes up most of my time, which is to implement JS, and probably needs to be optimized!

7.application

In common development, this panel is not very likely to be used, but must know!

1.cookie



2. The localstorage and localsession





3. The cache



4.IndexedDB



5.Frames

Frames organizes the resources on a page into frame categories. The top is a master document, and under the top are the resources of Fonts, Images, Scripts, Stylesheets, and so on for the master document. The last one is the main file itself.

This I personally think it is ok to know the next, the basic rarely used.



8. Plug-in recommendations

There are only a few plugins or extensions I use for ChoreM, here are some simple ones to use as needed, or if not, you can find them in the Google Store.

HostAdmin

A tool for managing hosts

JSON Editor

Json formatting tool

QR code generator

Is the url of the current page into a TWO-DIMENSIONAL code, the use of the scene is when you want to use the mobile phone test, too lazy to input the entire url on the phone, directly scan the code can be accessed in the mobile phone! The following figure

vue-devtools

With this you can see the following extension, using vUE development of a magic, debugging will become very convenient! (Don’t stay in the panel for too long with this plugin, the page may crash)



WEB Front-end Helper (FeHelper)

Performance-Analyser

Web performance analysis tool. This is useful, but I use less, maybe the current project is not so strict, professional! In embarrassment…





The picture is too big, also a little too much, I put these two! If you find it useful, just download it

Cross word translation

English this is a lot of programmers, underlined word translation this can be very good to help everyone!

Nugget Chrome plugin

With this plugin, the Nuggets will push articles and projects daily according to their own Settings! (In the last few days before the publication, this plug-in has been revised, there will be different from the picture, the picture will not be cut, everyone pay attention to it)

9. Reference links

Devtool Performance is a new series of Chrome developer tools that will help you to use Your Console Chrome.

Nodule 10.

Ok, so much for the incomplete guide to Chrome, which is probably about 20-40% of Chrome’s functionality, but about 80% of its day-to-day use. And sometimes, development efficiency is not only editor proficiency, code proficiency, browser use is also an indispensable part of efficiency! Skilled use of Chrome and writing code is the same truth, is to rely on their own more practice, to be familiar with the use, practice makes perfect! Finally, if you think I have written something wrong, write bad, what other suggestions, recommended tools! You are very welcome to add. I hope we can exchange ideas, learn from each other and make progress together!



— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet