Google Browser has several development tools?

Google Browser has several development tools?

Google Chrome Developer Tools I think that is the Web programming programmers will not be unaware of the previous small weave habits using Firefox developer tools, because I think firebug is good, but it is not good to use, but also often stuck to death, online Firebug a master job-hopping to Google, So I switched to Google, and below is a detailed introduction to Google Chrome developer tools.

Google Chrome developer tools, Google Chrome developer tools, are embedded in the browser as long as they are installed.

There are two ways to open: first "press F12", second: shift+ctrl+i

First, Console Introduction

Console can see the Web page after the run prompts the message, error or warning and output, etc., the background can use Console.debug ("Output"), in the console output display, you can do debugging functions, but the general real debugging is not to get console. Console.debug ("Console use Introduction"); console is lowercase, otherwise prompt does not console

Ii. Introduction of resources

Resources can be viewed as a Web program that is loaded with some resource, including pictures or other "values", and cookies

Iii. Introduction of sources

Sources can view the running scripts, debugging is generally in sources debugging, so the program developers need to understand and familiar with the use of sources

Four, sources debugging use

On the left-hand side of the script code number, mouse click can add breakpoints, add breakpoints, refresh the page, the program runs to the breakpoint can see the state of the breakpoint mode, the specific debugging needs in their own want to see if there is a problem, step-by-step exclusion, the effect is very good

V. Introduction of Network

Network can see the time of the scripts and resources loaded on the Web page, and also see some resources that cannot be loaded successfully; Here is a Baidu home demo, Baidu homepage content is very clean so do not need to load what pictures and other resources

Vi. Introduction of elements

Elements this is like every element of the page, such as Baidu Search this picture, you can find through the elements, search box can also, in the bottom of the "magnifying glass" similar to the control, click and then choose their own to see the elements or location, elements will jump to the corresponding implementation code

Note: Google browser recommend the use of Ctrl+r refresh the page, you can modify the JS and the HTML code unmistakable fast update.