Have to say Google developer mode: Google debug mode debugging JS Code summary

Google Chrome is a great tool for developers, and it does give developers a lot of convenience, a feeling that has been working for more than a year. Google Chrome can be passed on the front-end tracking value, just as we use MyEclipse for debug, Google Chrome provides powerful features that allow developers to track values in front-end delivery.

As long as the Google browser installed, we can use the Google Developer mode for code debugging, press F12 to enter the developer mode.

1, first of all, let's take a look at the console console of Google Chrome

After entering the Google developer mode, we click on Console to enter the console, where we can easily debug the JS code. In general, we need to use alert in our program to see the results of the program's execution, which can become inefficient once the code is large. At this point, the advantages of Google console is reflected. We can just run the line of code we need, and then enter, it can be executed, is not very convenient.

For example, we need to know that $ (' #id ') has not acquired an object, we just need to enter $ (' #id ') in the console, and then enter to see the result.

Google's developer model is a must-have tool for front-end engineers. Even for Java background developers like me, it's a good choice, making it easier to debug the front end.

When the breakpoint is triggered and enters debug mode, we can copy the current variable or method to the console and press ENTER, the console will return the corresponding result. This feature is too useful for developers.

2, next talk about the Google browser breakpoint debugging mode

Google's breakpoint debugging mode, for Java developers, is definitely a boon. For a large project, because the business logic is complex, the association between the various tables is also very complex, the value passed to the front-end may be a few layers of map, if these values can not be traced, the front-end debugging can become very difficult.

So, how do you debug breakpoints?

First of all, press F12, enter the Google development mode, and then in the file structure directory, find the code we need to debug, find we need to add a breakpoint line, stand-alone left border, add a breakpoint (note, here we are click, and MyEclipse break point is different). Finally refresh the page, just OK. Once the program executes here, it pauses and waits for us to operate. We can do the following:

A, press F10 to enter the next line;

B, if you need to see the value of an object, you can see the value by moving the mouse cursor over the object and hovering over it.

C, on the right side of the code, in the scope variables area, you can view the values of the current code snippet objects more specifically.

D, breakpoint on/off button, on the right side of the code, there is a breakpoint debugging control area, inside a pencil-like icon, is the breakpoint on/off button, we can use this button to close the breakpoint or open a breakpoint. What is the use of this, in fact, a lot of useful, such as circular paging, if we want to see whether the bug appears on the second page, then we need to skip the first page, at this time, you can pass this button, first close the breakpoint, and then, when the program executes to the second page, then open breakpoint, is not very convenient.

3, what does Google developer mode contain?

Different versions of browsers may differ:

A,element, here is the page element, in the form of Web pages to show code, can be real-time editing, real-time view of the effect, without writing to the code, save the refresh to see the effect.

B,network, as the name implies, is to view network requests, which are HTTP requests

C,source, here is our source code, can see the current page reference all the code files, we do breakpoint debugging, is here to break point. Very powerful feature.

D,console, console, can write code directly, enter run to view the results, very convenient.

E,timeline, view the execution time of the JS script.

F,profiles, which is used to view the parameters of the CPU when the JS code executes.

There are several other features, mainly for performance and speed testing, the general developers do not use, the Web page performance and loading speed of the high-demand site, very useful.

Next, talk about the features and tricks that Java program apes often use.

4. Modify JavaScript code in real time

When we enter source, the JS code in source is modified, saved (saved in the browser, not saved in MyEclipse), and then when the program executes to the modified script, it executes the latest modified script directly. At this time, Google Chrome browser features, can effectively improve the development efficiency. Because we don't have to modify the source code in the MyEclipse, and we don't have to refresh the page to clean up the cache. How does chrome implement this feature, in fact, Chrome is to save the modified script in the browser cache.

5, set conditional breakpoints

When using Chrome for breakpoint debugging, we set the conditional breakpoint to be set. What is a conditional breakpoint, that is, when a certain condition is met, the breakpoint is triggered.

Here is the Google Browser encyclopedia:

Google Chrome, a Web browser developed by Goole, has gradually risen in market share since the first beta release in September 2008, and Chrome has overtaken Firefox as the second-largest global market share in May 2014. Chrome's popularity is inextricably linked to its excellent performance and compatibility, and a growing number of Web applications are adding support for Chrome, which is enough to reflect the recognition and favor of chrome by developers of Web applications, one of the most important of which is the fact that Chrome The powerful developer tools that are available. The Chrome Developer tool contains a number of powerful functional modules that can be adapted to the needs of many different situations. This article introduces the various modules of the chrome Developer tool and its basic functions, and then focuses on the debugging of Web page script, and expounds how to use the Chrome Developer tool to locate and debug the problem skillfully.

Have to say Google developer mode: Google debug mode debugging JS Code summary