Chrome Developer Tools Incomplete Guide (I, basic features)

Even if you're not a front-end development engineer, I'm sure you won't be unfamiliar with chrome. According to the latest (2015/06) browser market share report, Chrome is almost half the world's browser. Simple and quick, it has become a new favorite of the people in this era. If you're a web developer, I recommend you use Chrome. As the "IDE" for front-end development, you just need to work with an editor to accomplish almost any development task. About its use and functional analysis are either large or incomplete, or the size of the boring. In this department, we will share some of the chrome (F12 developer Features) experience in more detail, from some basic functions to some of its advanced performance analyzers (Timeline, Profiles), in the end, will recommend a few good plug-ins, I hope that your development work has a bit of effect. If you are already familiar with some of the Panel module functions, you can skip over to read the section you are interested in.

First, Elements

The element is divided into two major parts.
A:html Structure Panel
B: Display panel for manipulating DOM style, structure, and time

1. In a, whenever your mouse moves to any one element, the corresponding HTML view will give the element a blue background.

2. If you click to select an element, at the bottom of part A, the position relationship of the element in the HTML structure is displayed

3. You can then edit the style of the element in the Styles option in section B, and see the HTML structure in real-time updates (great benefits)

4. You can switch to the event listeners option in the B interface to observe the events that the element binds to.

Click is the event name

The. Div1 event is the index name (that is, what is bound by)

Attachment Event Source

Handler contains the contents of the destruction of the event

Usecapture indicates whether the event bubbled up

5. Select an element, right-click, and you will see a pop-up window with several options

Add attribut: Adding attributes to this element
Edit attribute: Modify the attributes of this element
Force element states: Activates a state for an element (mainly used for elements such as a, input, button, etc.) that can be almost
Edit as HTML: edits the element (you can rewrite its entire content) or even modify its label name
The middle is simply passing by ....
Break on: Adds a DOM manipulation event listener for this element. Contains three options (tree structure change, attribute change, node removal). The purpose of this option is to help us monitor and locate the code of the operating element. See examples:

6. Select node removal in the pop-up Options window of the a interface and switch to the DOM breakpoints option in the B interface to see the registration information. We then click the Click me button to trigger the deletion of the Div3 event, and we can see that the browser automatically locates the code portion of the element for us and stops executing the JS code:

7. In the B interface to switch to the Properties option, you can see the various information of the selected elements (the introduction of English words is relatively simple, do not introduce each).

8. Click anywhere in the A interface, press the shortcut key ctrl+f can see the bottom of the input box, enter in the input box you want to find anything, if the match, all back in the a panel highlighted

9. Alternatively, you can click the question mark icon in the upper left corner, then move the mouse to the view interface, the left mouse button is pressed on the element, the corresponding a interface will be positioned to the selected element.

Second, Network

1.Network is a panel that monitors all HTTP requests for the current webpage, and its main body shows each HTTP request, each representing the different properties and states of the request

Name: Request file names
Method: Methods (common is get post)
Status: State of request completion
Type: Types of requests
Initiator: The request source means that the link is sent via what (common is parser, Script)
Size: Download a file or request a resource
Time: Requested or downloaded
Timeline: The link is in the time-state axis of the sending process (we can move the mouse over the delight timeline, which will have its details: Start download time, wait for load time, and time to download itself)

2. Click on any of the HTTP information in the Panel, a new panel appears at the bottom, which records the detailed parameters of the HTTP request header (header information, return information, request basic status---see http1.1 protocol content), Preview (return formatted post-transfer text message), response (original information before transfer), cookies (cookie for the request), Timing (Request time change)

3. At the top of the main panel, there are some buttons from left to right: whether to enable continued HTTP monitoring (highlighted by default), to clear HTTP information in the main panel, to enable filtering information option (to filter HTTP information when enabled), to list multiple properties, List only the name and time properties, preserve log (currently unclear what to use), dishable Cahe (disable caching, all 304 returns and Fromm Cahe are turned back to normal requests ignoring the cache Conctrol setting);

4. Finally, at the bottom of the main panel, there are some basic information that records the status of the overall network request.

Iii. Resources

The resources section is simpler, and he mainly shows us the list of assets loaded in this interface. There are also cookies and local storage information such as storage, SESSION, etc., where we are free to modify, add, and delete local storage.

Chrome Developer Tools Incomplete Guide (I, basic features)