Chrome development tools learning notes (1), chrome learning notes

Chrome development tools learning notes (1), chrome learning notes
Preface

Debug is a skill that every programmer must develop. It is also a missing course in university programming education. Teachers tend to care more about making the program run correctly, but it may be true for students to run the program directly when only 10% of the time, 90%, the program may fail to run or the running result may be incorrect. Many of my colleagues gradually lost their interest in programming in the Process of program errors. I think if the school can teach programming, it will also teach the debug method, so that students can find Bugs step by step, more people should like programming skills.

In college, we may only know that debug can run programs, and never use breakpoints to monitor variables, when I was in school, I usually encountered bugs that were alert or the value of the print variable for debugging. After work, I got access to Chrome Developer tools (Chrome development tools), which opened a new door for using DevTools, this allows me to better understand the program running process and solve many problems encountered during development. If alert is a primitive society, the use of DevTools gives me the feeling of stepping into the industrial society.

In the course of bringing interns, I used dev tools as part of the training course. During the course preparation, we found that DevTools documentation and materials in China are still quite scarce. The introduction on many websites is too general. We often finish the DevTools tab function in just a few words, which is difficult for beginners to learn. Chrome itself is not friendly to Chinese developers. Even if I use chrome to set the language to Chinese, the DevTools language is still in English. At the same time, the official documents of Chinese versions have not been provided for so many years, the English version of the document is not very easy to access as google leaves China. Therefore, I came up with the idea of organizing a chinese copy of chrome development tools. As a learning note, I can help you better use this tool for development.

Description

This article is based on my current chrome version (360 speed browser chromium39.0.2171.99). DevTools may be slightly different in different versions, and some shortcut keys are also on windows, mac and linux users can refer to their own systems.

Refer to the chrome official documentation https://developer.chrome.com/devtools access please bring your own ladder.

If any omission is incorrect, leave a message or email to indicate it to me.

Open DevTools

You can open DevTools in the following ways when browsing a webpage:

Press 「F12

Right-click the page and select audit elements 」

Go 「Tool --- developerTools 」

DevTools Interface

The DevTools interface is as follows:

The top tab bar lists the main functions of DevTools.

DevTools Device Simulation

Click the cell phone icon in front of the Element tag to allow the browser to simulate various devices to confirm the access to the page at different resolutions and network conditions, at this time, DevTools automatically maps the mouse to the touch screen click action ., In this case, the browser simulates the access to the Baidu homepage by iPhone 6 in the 3G Network. In addition to the changes in the page layout, different Network connections are set in the Network, the speed of opening the page is also affected.

(End)

Reposted self-Technical blog http://www.cc-lab.cn/chrome-dev-tools-1/