JavaScript breakpoint settings and debugging tips in Chrome

Console: This function is analog JS console, write code directly, view the results. Advanced features open breakpoints when used, to see how variables change. You can also use the bar function.

Resources: The secondary function is to view the loading page of the resource used, linked to the database, the domain name stored under the cookie information can be viewed, click on the left column, and then click to view.

Audits: Sub-function is also a performance test, click Run to perform, see efficiency

Timeline: The second function is to see the page performance, page rendering speed, is generally not used. The tester can view some of the performance parameters shown in the figure for reference

Profile: Secondary function main test load file speed reference, you can upload our files here for testing purposes.

Elements: page elements, can be edited, save real-time View page effect

Network: View the JS analog HTTP request, for example, in the modified shopping cart in the number of items, you can see the request address in real time, directly. Click on the request address, will be the request header information and response information, such as data display, here is very convenient, display style than firebug more intuitive, direct, you can click to view the header information, preview, response information, cookie,timeline useful to us. Note that preview is the sending data that simulates the HTTP request here and previews it directly.

JavaScript breakpoint settings and debugging tips in Chrome