Excellent Performance of chrome in Web Development

As a beginner in web development, my first use of Chrome is attracted by its outstanding performance!
Before using chrome, I have been using browsers such as window of the world, travel, 360, and so on. These browsers are characterized by powerful functions and simple operations. This is not suitable for normal computer users! However, these powerful and simple operations are redundant during development. During development, we often pay more attention to the speed, compatibility, and convenient and clear Developer Tools of program loading. Chrome has both of these advantages, which undoubtedly brings great convenience to the development of web programs.

Next we will introduce in detail the power of chrome.
1. First, there is a simple interface with nothing to do. We can observe the overall effect of our web pages from the biggest perspective! The unique trapezoid label design makes the interface more chic!

2. Chrome is compatible with HTML5 and css3. For example (Data source: http://www.findmebyip.com/litmus)

3. Incredible chrome update speed: Currently, there will be chrome updates every six weeks. This makes chrome always maintain its advanced nature and keep up with the pace of the times!
4. This is also the most critical-Chrome's excellent Developer Tools (in the words of my friend, I don't know how to develop it without the Chrome browser, haha !)
(1) first, open the developer tool:
There are two main ways to open: Right-click to review elements and click chrome wrench> Tools> Developer Tools (or Javascript console)

(2) After opening the developer tool, we will find that all the tools we need are clearly structured and integrated into a window, so we can easily switch between them! In addition, this window can be dragged based on our needs. Make our development process smoother!

You can also click the button in the lower left corner. The developer tool is displayed as an independent window. The pop-up dialog box then restores the previous status.

Button (dock to main widow) dialog box

Let's take a look at our frequently used browser Developer Tools.
IE8 is not fully functional and detailed (personal opinion)

The Firefox window is too messy and inconvenient to operate.

(3) The switch button is displayed on the console next to the pop-up button ()

Click this button to open the console, which is the same as the console () function on the top. The difference is that the local display can be dragged and the full fill display can be dragged. From this aspect, we can also see that Chrome fully considers the different needs of developers (different effects after clicking ).

Partial display
Show all filling

In addition to viewing error information, printing debugging information (console. Log (), and writing test scripts on the console, you can also use it as a javascript API.

For example, if you want to view the properties of the screen, you can enter "screen" in the console to output the relevant properties of the screen. (For example)

(4) when talking about the console, you have to talk about network (). I personally think it is very powerful. When you enable it, the network dynamically displays the mutual trust of related operations when you perform any operations on the webpage. The "network" tab can be used to analyze the network conditions of website requests, view request headers and Response Headers of a request, and view Ajax requests. Of course, it is updated from time to time. (Network window, for example) is it very powerful!

 
(Network window)

Click each specific option on the left and you will see the specific information corresponding to each option (for example). Here we will not detail how to use it. You can understand it in the development process.

We can also see that there are several other options in the developer tool. Next we will introduce the remaining options to share the strength of chrome.
(5) The first option is elements (), which is the element.
In the element window, we first see the elements of the web page. This is similar to the developer tools of big browsers. However, when you click on each element, you can discover the advantages of chrome. When you click an element, you will find several more tag items (such as) at the bottom)

The last blue background is the tag of your current vertex. The first one is the parent tag, which is then upgraded in sequence. In this way, we can easily find the top layer of the tag. You no longer have to worry about finding a parent tag in a dense tag.
At the same time, if your page is not very satisfactory, right-click or double-click the place you want to modify and directly modify it. Then check the effect. If it is correct, you can copy the modification to your program. This improves our development efficiency. Of course, right-click and other options will not be described here. (Right-click the menu, for example)

Right-click menu

The layout of the webpage is displayed on the right side of the elements window ). You can also edit it. Such a clear structure and convenient operations make our development more efficient.

(6) let's take a look at the resources option (). Here you can see all the elements used on your webpage, including JS files, CSS files, image files, cookies, sessions, datbase, and so on. (Resources window, for example ). Note that both CSS and JS can be modified and take effect immediately.

(7) The profiles option () is mainly used for performance optimization, including viewing the CPU execution time and memory usage. You can click the circular button in the lower right corner to start () and click eye to view performance ()

(8) then the audits option ()
This is used to analyze the page, optimize the page, and increase the page loading speed. This is currently being studied.

First, this is the case.

Click the run button to perform webpage analysis. The analysis result is as follows:

The above analyzes the files used and unused for webpage loading. You can adjust the program based on the results to increase the webpage loading speed.
(9) Finally, I need to mention the search box in the upper right corner, it provides great convenience for us to find the elements we need (it was developed by Goole and you should not question its search performance, huh, huh !)

5. Chrome's powerful translation function is not negligible. It can help Chinese developers to read APIs or articles in foreign languages! It increases the speed of problem handling.

In this way, I will introduce the advantages of chrome for development that I have learned. Of course, it has more than these advantages.
In conclusion, Chrome is the most suitable browser for developers. Let's try it out!
The above is my personal opinion and may have some shortcomings. Thank you for your understanding!