Front End Chrome Browser Debugging summary

Introduction

"工欲善其事, its prerequisite" Well, I think this sentence is particularly reasonable, for example, the strong makeup artist has a very professional brush, paint is responsible for setting makeup, eye shadow brush is responsible for the drill shadow, each job, with professional tools to do professional things, this inspiration to come from before I want to buy cosmetics, The store's poster slogan, it is thought that if you want to do something good, and do the professional, then you must put your tools well, so as to be more effective, I have seen a lot of seniors, they write a lot of code, they can quickly finish work, can handle a lot of complex business logic, But for the browser debugging mastery is not comprehensive and familiar with, say I myself, my programming debugging originated from self-study front-end course, because the learning time to see is the basic teaching video, for debugging also only mastered the alert and console, please do not joke, carefully read, Ask who is the first time not to walk this road, when you stop to do static page, the old debugging way certainly can not help you to complete your daily debugging, then I entered the company to practice, began to contact the real development business, began to follow senior and master together on the road, then I had the "JS Breakpoint debugging" consciousness, Start Step by step debugging my JS code

Here is a summary of my common debugging methods, these methods to make my work a lot more smoothly, at the same time to take out a summary, and share with you

First, come and meet the functions of these buttons.

First of all, let's look at the top line of the graph is a function menu, each menu has its corresponding function and use, in turn from left to right to see

1. Arrow button : Used to select an element in the page to review and view information about it, when we click on a DOM element under the Elements button page, the arrow button will become a selection state

2. Device icon : Click it can switch to different terminal for the development mode, mobile and PC side of a switch, you can choose different mobile devices, while you can choose a different size ratio, Chrome browser's analog mobile device and the real device is not big difference, It's a very good choice.

Selectable adaptation

3.Elements features tab: Used to view, modify the elements on the page, including the DOM tag, as well as the CSS style of view, modification, and the relevant box model of the graphic information, we can see when my mouse to select the id lg_tar div element, The CSS style on the right shows the style information for this ID, which can be modified on the right, and the changes will take effect on the page. The gray Element.style style can also be added and written, the only difference is that the style added here is added to the inside of the element, the implementation method is: The div element's style property, this page is very powerful, after we have made the relevant page, modify the style is a very important work, the small gap will need to To adjust, but it is impossible to say that every modification is compiled once the code, and then refresh the browser to see the effect, this is very inefficient, once in the browser to modify, and then to the code to modify

The corresponding style
Box model information

At the same time, when we browse the site to see some special cool effects and difficult to do the style, open this feature, we can see how others are realized, learn it this knowledge is yours, careful study will also have unexpected harvest

4.Console Console : For printing and output related command information, in fact console console in addition to our well-known error, print console.log information, there are many related functions, the following brief introduction of several

A: Some instructions to the page data operation, such as the break point just execute to get the data, because the data are layered nested objects, this time to view the inside of the key/value is not very convenient, you can use this command to open the view, obj JSON string format key/value, What fields and attributes do we have in the data?

Other features

B: Besides Console.log, there are other relevant instructions available

The console also has a related API

5.Sources JS Resources page: This page we can find the browser page of course JS source files, convenient for us to view and debugging, I have not come out of the campus, I often see some major station JS code, at that time, in fact, basically do not understand, But at the very least can look at people's code style, people's name, all the code is compressed after the code, we can click the following {} Brace button to turn the code into a readable format

The left side of the Sources Panel is Sources and Content scripts and snippets, respectively.

The corresponding source code

Formatted code

About the interruption point debugging content, the following introduction, first of all, other people usually do not use but very useful small points, such as when we can not think of a method of the specific use of time, will open the console to write some test code, or want to test how the method you just wrote will appear look like, But the console a dozen return to want to change line but did just write half of the code, so recommended to use Sources below the left of the Sinppets Code snippet button, this time click to create a new fragment file, after writing the test code, put the mouse on the new file run, Combine the console to see the information ( a new fragment code named: App.js, which executes the method within the project's environment page )

Your own piece of writing

Content scripts is an extension of Chrome, which is organized according to the extended ID, these files are embedded in the pages of resources, such files can read and write our resources, need to debug these extension files, you can open the relevant file debugging in this directory, But almost our project does not have the relevant extension files, so we can not see anything, usually do not need to care about this piece

No results

6.Network Network Request tab: Can see all the resource requests, including network requests, picture resources, HTML,CSS,JS files and other requests, can filter request items according to requirements, generally used for viewing and analysis of network requests, analysis of the back-end interface is correctly transmitted, Gets the data is accurate, the request header, the request parameter's view

All the resources

The above I chose all, will be the page all the resource files down, if only select XHR asynchronous request resources, we can analyze the relevant request information

Information about the request

Open an AJAX asynchronous request, you can see its request header information, is a POST request, what parameters, you can also preview its return results data, the use and view of the data in favor of our good and back-end engineers to tune data, but also facilitate our front-end more intuitive analysis of data

Previewing the requested data

7.Timeline tab can display JS execution time, page element rendering time, do not introduce too much

8.Profiles tab to see CPU execution time and memory consumption, not too much introduction

9.Resources tab will list all the resources, as well as HTML5 database and Localstore etc., you can edit and delete the contents of the store do not do too much introduction

10.Security tab can tell you the security of this website, check the valid certificate, etc.

11.Audits tabs can help you analyze page performance, help optimize front-end pages, and analyze the resulting reports

Analysis results Two. Breakpoint debugging on the Sources resource page

1. How to debug :

Debugging JS code, is certainly our common function, then how to break the point, find the file to debug, and then the content source code on the left side of the code mark line to hit the last breakpoint

2. Breakpoints and JS Code modification

Looking at this picture below, I hit two breakpoints in a method named Toggletab, when we start to execute our Click toggle tab Behavior, the code will stop at the execution of the breakpoint and show the relevant data part, at this time can be executed in the code place, put the mouse up, To see the relevant data information, and we can use the function keys on the right to debug, the right of the top row is: Pause/resume, Stepping (F10 shortcut ), stepping into the execution block (F11 shortcut ), stepping out of this block, disable/ Enable all breakpoints. Here are a variety of specific functional areas

Break points in code

In the current code execution area, in the debugging if you find the need to modify the place, it can be modified immediately, after the change to save to take effect, so that you do not have to write in the code, and then refresh back to look at the

Temporary modification

3. Quick access to the commissioning method

When our code executes to a block method, this method may you do not set the relevant breakpoint, at this time you can F11 into this program block, but often our project is a lot of source code encapsulated good method, sometimes enter after, will go a lot of low-level encapsulation method, Need a lot of steps to really enter this function block, at this point, put the mouse on this function, there will be a hint, will tell you in the file in which line of code, click to see this function, and then temporarily hit the breakpoint, press F10 or click the second button in the upper right corner to go directly to the breakpoint at this function

4. Functional area of debugging

Each functional area, has its related to the left and right, first look at a picture, it has what features

Call stack calls stack : When a breakpoint executes to a block, the call stack on the right side of the debug area displays the method stack at which the current breakpoint is located, from top to bottom in descending order from the latest call, and the scope The variables list allows you to see the values of local and global variables at this time. As can be seen, we first walked toggletab this method, and then went to a method of updating the object, where the current call, the arrow will help you point to where, and we can click on the list of the call stack any place, can go back to see the code

But if you want to start from a new calling method, you can right-restart Frame, the breakpoint will jump to the beginning of the execution, the value of the variable inScope will be changed according to the code, so you can roll back to the new debugging, missed debugging can also go back to view repeatedly

breakpoints about breakpoints: All current JS breakpoints will be displayed in this area, you can click the button to "remove/add" Here breakpoint, you can also click on the code expression below, to the corresponding program code, to see

XHR Breakpoints

At XHR breakpoints, click on the + sign on the right to add the requested URL, and once the XHR call is triggered, it will be interrupted at Request.send ().

DOM Breakpoints:

You can set breakpoints for your DOM elements, and sometimes you really need to listen and see the changes of an element, assigning a value, but we don't care about which piece of code changes it, just to see how it's changing, then you can give it a listen event, this time Dom breakpoints

When you want to add a breakpoint to the DOM, the selections are as follows three modifications 1. Child node modification 2. Self Property Modification 3. The node itself is deleted. When selected, the DOM breakpoint appears in the DOM breakpoints list on the right side of the Sources Panel. The code stops there as soon as it is executed to make the appropriate modifications to the DOM.

Event Listener Breakpoints

The last event Listener list, which lists the various possible event types. Tick the corresponding event type and automatically break when the JavaScript code that triggered the event of that type

Three. Post man you deserve the Web request artifact

In our development process, the backend interface is the relevant data obtained by initiating the AJAX request, but in many cases, our business has not yet done that block, the back end of the classmate interface is ready, but in order to facilitate the later work, the interface request data simulation access, and then the interface is important, is also very convenient, because we can not write each request code is compiled in the file and then go to the browser to view, this time to install a post man network request plugin, download in the Google App Store, need FQ

The extension is very simple to use, the function is also very powerful, input your request, choose a good request method, need to fill in the request parameters, send, you can see the returned data, this gadget is conducive to our development

End

Write here This summary is over, perhaps there are a lot of writing not in place, there are some professional words are not rigorous place, I hope to see the reader can communicate with me, I am also very happy to my summary can just learn programming need to debug students to enjoy, before this I have been looking for an article from beginning to end debugging teaching articles , I have not found, or is a little bit of explanation, or is dedicated to the JS breakpoint debugging, so simply to see the Chrome Developer Tools in English official documents, and combined with some of their own small use of experience summed up this article, hope to be pointed and amended Also hope to help some students

Description: The pictures used in the text, some from the temporary debugging, some from the network, the text is original, reproduced please indicate the source

Cayley a literary and artistic female programmer who keeps on studying hard

The way of programming of Wen/cayley (Jane book author)
Original link: http://www.jianshu.com/p/b25c5b88baf5
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Front End Chrome Browser Debugging summary