Most of the content tools for the chrome developer tools are described earlier, and the last two features audits and Console panels are now covered.
First, audits
Audits panel will put forward several optimization suggestions for the current Web page, these suggestions are divided into two categories, one is the network load performance, the other is the interface performance. First, open its main interface.
The audits panel's network optimization recommendations refer to the 14 gold recommendations of Yahoo front-end engineers. To verify this, we can do a simple test. Based on one of the 14 Web performance recommendations: Put the CSS file at the top of the HTML document and avoid flashing the page after rendering the DOM. We write the following non-canonical code
XHTML| 1234567891011 | <! DOCTYPE Html>, <HTML> <HEAD> Span class= "Crayon-r" ><title></TITLE> <BODY> </body> <!--put the CSS file in the bottom--> <link rel= "stylesheet" type= "text/css" Span class= "CRAYON-E" >href= "xuu.css" > |
Then we started the run. You can see that it gives us what we expect, and in the Web Page performance it gives the red dot, and the following advice: Put the CSS in the head:
Improving interface performance is important for the user experience. If you follow the 14 recommendations to optimize your Web interface, the information that appears in audits becomes very small. If you do not know these 14 suggestions, I recommend you to read the "Web high-performance building station" this book. I believe it will be helpful to you.
Second, Console
Console panel can output your own code. It can be used in conjunction with other panels. Click on the >_ in the upper right corner to enable or close it. It also has four options:
Console: For output and realistic debugging information
Search: Find files and content under a domain name
Emulation : Enable mobile development mode
Rendering: Display various monitoring information in the interface
There has been a great God in detail about how the Console is played. I'm not going to introduce you here. Click here to read the article of the Great God. Search is also relatively simple, dew will not be wordy. Now let's focus on mobile development in Emulation mode. Mobile development has undoubtedly become the mainstay of web development. So, Chrome has built a tool that fits our development and testing.
1. Enter Mobile development mode
Mobile phone Development Mode My suggestion is to put the control Panel right. This is convenient for mobile phone development. Long press the Type label (IMG4) in the upper right corner of the control Panel to toggle where the control panel appears. After adjusting the position of the control Panel. Click Emulation and then click the text that appears in the Options panel. Or you could go directly to developer mode by tapping the phone icon in the top left corner of the developer tools interface. You can see that when you switch to mobile development mode, the mouse has turned into a small black circle.
2. Commissioning the device
Select a different phone mode from the device drop-down menu. It includes popular machines for Android and Apple systems. Tick the emulate mobile option to fit the screen. Resolution This allows you to adjust the height and width of your phone's screen.
3. Simulating network conditions
Select the simulated network condition in the netword . including mainstream and non-mainstream networks. (wifi,3g,2g, etc.) to customize the latitude and longitude of the mobile end in the sensors option. The 3D view angle can be set in the model. Put the mouse on the direct rotation model. This feature has not found any eggs for the time being.
A lot of debugging can be done in the interface, which is also the dewdrop usually do. The options that are actually applied to Chrome are all listed in the main interface. When the mobile development mode is selected, the interface becomes this way:
It is important to note that the Chrome browser simulates just the interface, and many of the features of the kernel and native are not simulated, but this is enough for HTML5 mobile development.
Iii. concluding remarks
This article mainly introduces the tools section of mobile development testing. Chrome has a bit of a lack of performance when it comes to simulating mobile development. If you need real-machine debugging, you can consider the development version of UC Rangers (Android only), Chrome's mobile version (Android only), or buy a Mac (Dewdrops can not afford to buy) and then buy an iphone (Dew is millet hanging dead AH) with the combination. Weinre that thing can only adjust the style, but also have to add code suggestions do not use it. Well, the chrome developer tools are all about it, and the next one is the end of this series. Introduction of several plug-in use (including the tall developer tools Skin OH), please pay attention!
Chrome developer Tools Not a complete guide (V, mobile article)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
