The elements of Chrome development tools

Friendly tips: full-text pictures of high-energy, such as using mobile phones to read, please ensure that in the WiFi situation or sufficient traffic. Picture a bit of slag, also is hard to do out, please don't abandon ~

Elements panel mainly shows the current page of the organization structure, in today's application, HTML page initialization load is not necessarily after the DOM tree, there is a page structure of the real-time debugging tools to help developers debugging development and debugging bugs, Below you begin to recognize the next elements panel.

Open Development tools

1. Right click on the page and click "Check" (Mac && window)

2. Control+command+j (Mac) and F12 (window)

What does this panel look like?

Explain what the following numbers refer to:

#1 is used to select an element on the page and view the element

#2 switching between analog devices, mainly pc/mobile (including mobile phones, tablets)

#3 HTML element structure display and real-time editing

#4 the location of the currently selected element (in Div.test in the body of the HTML)

#5 shows the style of the currently selected element, the box model

#6 Displays the box model for the currently selected element, and the style property calculation

#7 shows the events that are bound on the currently selected element

#8 display a list of Dom breakpoints

#9 display the properties of the currently selected element

Here's how to use the above 9 points

#1 element Selector

Tap the icon, and then tap the element you want to select.

#2 Device Switching

The default is the PC-side display, click on the mobile format display, click again to return to the PC-side display format.

#3 HTML element structure display and real-time editing

Let's take a look at the display of the element structure

Add/Modify/delete of HTML element attributes

Explanation of operation steps:

1. Remove/Modify the class attribute of the first div (this property is removed directly here)

2. Add the test class to the first div (right-click the element and select Add Attribute, you can also double-click the element tag)

3. Add the attribute index to the first div with a value of 0 (IBID.)

4. Edit the text content within the element (right-click the element and select "Edit Text")

5. Fully edit the element (right-click the element and select "Edit as HTML")

Copy/paste and hide/delete of HTML elements

Explanation of operation steps:

1. Copy the element (select the element to copy, right-click the element, select "Copy=>copy element")

2. Paste the element (select a location to paste, right-click the element, select "Copy=>paste element")

3. Hide/Delete copied elements (right-click the element, select "Hide element" or "delete element".) Here to do the delete operation)

Cut elements Ibid.

#4 where the currently selected element is located

Notice the change in the position ...

#5 shows the style of the currently selected element, the box model

#1 the selected element
#2 the CSS style of the selected element
#3 box model of this element

CSS style editing

Explanation of operation steps:

1. Add a style (left-click in the blank space of the style line)

2. Modify the style (click the style name or style value)

3. Show/Hide the style (click the selection box in front of the style)

4. Choose a color (click on the color's logo)

#6 Displays the box model for the currently selected element, and the style property calculation

is the box model and calculated style attribute values.

#7 shows the events that are bound on the currently selected element

Explanation of operation steps:

1. Track to the event definition (click on the file and the number of rows displayed on the right, or right-click the event handler, select "Show Function definition" and select the former action)

2. Store as a global variable (this function can be accessed in global variables)

#8 display a list of Dom breakpoints

Similar to breakpoints in the sources panel. Adds a breakpoint to the DOM, triggers a breakpoint when the specified condition is reached, truncates the execution of the JavaScript, and navigates to the breakpoint.

Dom breakpoints have the following main conditions:

1.Subtree modefications = triggers when the DOM structure changes

2.Attributes modefications = triggers when the DOM's properties change

3.Node removal = Fires When the DOM is removed from the DOM structure

Explanation of operation steps:

1. Add subtree modifications breakpoint to the first element of Div.test (right-click the element, select "Break on ..." and "Subtree Modefications")

2. Add Attributes modefications Breakpoint to the second element of Div.test (right-click the element, select "Break on ..." and "Attributes modefications")

3. Add the breakpoint of Node removal to the third element of Div.test (right-click the element, select "Break on ..." and "Node removal")

4. Remove breakpoints from subtree modefications

5. Delete all breakpoints

#9 display the properties of the currently selected element

The DOM property that contains the element.

No wonder do not like to do gif, do a picture than write trouble many Oh ~ welcome all the small partners to exchange discussion technology ...

The elements of Chrome development tools