EDITORIAL:
Jane read a book in a very comprehensive blog https://www.jianshu.com/p/b25c5b88baf5 , almost all the original text content, images plus my own, but also incidentally review under the summer internship.
Last semester zero-based learning front end April and May, when the console is no concept for Google browser, honor summer internship for two months in the company, to share my use Google browser debugging experience.
Debugging tools:
First, the arrow button and the device icon
Arrow buttons: used to select an element in the page to review and see the information about it, select the arrow button will change state.
After clicking you can select the elements you want on the page, as shown below:
Device icons: click it to switch to a different terminal develop mode, a handover of the mobile terminal and pc end, can select a different mobile terminal device, and can select a different size ratios, Chrome browser simulated moving device and the real device or less, it is a very good choice. Seen below:
二、Elements
To view, modify elements on the page, including the DOM tab, and css style view, modify graphical information, as well as the relevant box model.
The figure below we can see that when I mouse to select the page id is the main element div, css styles on the right side will show the corresponding id of this style information, then you can be a modification on the right, you can modify the effect. Because every time modify the code in the editor to refresh the page is too inefficient and inconvenient.
Box model of graphical information
Three, Console
Command for printing and output related information, in fact, console console in addition to our well-known error, print console.log information, there are many related functions, following a brief few:
(1) to the page number of the data operation instruction, such as break points just to be performed on the acquired data, because the data objects are nested layers, this time to see the inside of the key / value is not very convenient to use this command open view, key / value obj the json string format, we can have a glance what fields and attributes for the data inside.
(2) In addition to other related console.log instructions are available (console.error, console.warn etc.)
Three, Sources
js resource page : In this page we can find the source of course js file browser page, to help us see and debugging. You can look at some of the major stations js code, although basically can not read, but at least you can look at other people's code style, they are named. All the code is compressed code after, we can click on the button braces {} to a transcoder readable format.
Sinppets: when we want to write some random test code in the console, or just want to test whether the write method will look like, but wanted to console a carriage return line feed dozen but perform just wrote half of the code ( in fact, console write code wrap is also possible, according to the shift + enter key to wrap it, but still a little trouble, mac and windows systems are applicable ), it is recommended to use the left side of the Sources following Sinppets snippet button, this time click create a new clip file, after writing test code the mouse on a new file or run on the right 
, combined with the console to view information (a new name: test segment code in your project environment page the process within the executable program segment)
Scripts Content: Chrome is an extension program that is extended in accordance with the ID to organize these files are also embedded in the page's resources, such documents can be read and write operations and our resources, we need to debug these extensions files, you can open related files in this directory debugging, but our project has almost no relevant file extension, so what can not see, usually you do not need to care about this.
Breakpoint debugging:
(1) How to break point
Locate the file you want to debug the code on the left and then the contents of the source code tag line marked with a breakpoint at the click away.
(2) js with breakpoint code modification
Look at this picture below, I'm under a method called toggleTab hit two breakpoints, when we started clicking switching tab behavior, the code will be out to stop execution at the breakpoint, and the relevant data show part, then you can place the code has been executed flies, put up the mouse, you can view the specific data, we can use the function keys on the right side debugging on the right top row are: pause / continue, single-step execution (F10 shortcut key), step into this block execution (F11 shortcut key), single-step execution out of this block, disable / enable all breakpoints. The following are specific to the various functional areas
In the current region code execution, if it is found during commissioning place needs to be modified, but also can be modified immediately, save to take effect after the modification.
Four, Network
Network requests tab, you can see all resource requests, including network requests, picture resources, html, css, js files request, may request entry screening on demand, generally used for viewing and analyzing network request, analyze backend interface transmission is correct, whether to obtain accurate data, request headers, request parameters to view.
You can also see some specific information, and a request header:
Written on the back:
Stupid blog just introduced several commonly used, in fact, there are several less frequently used, such as Memory, Audits, etc., can use to re-time access to information.