Chrome Development Tools Learning notes (2)

Use the Devtools elements tool to debug the page Dom

The Elements tool is the first tab of the Chrome Devtools interface, and today many Web pages use JavaScript to dynamically modify the DOM and CSS, and traditional viewing of HTML and CSS source code to debug the page, not to see the dynamic content, Refresh the page over and over again. Viewing the effects of modifying HTML and CSS is inefficient for development. The Elements tool is a tool that helps us to view and edit dom trees and CSS styles in real time.

Open Devtools Switch to the Elements tab to see the Elements tool, the left half view is the HTML code of the current page, the right half view is the currently selected Dom CSS style, the display is the current Web page real-time, Changes to the page through JavaScript are instantly reflected in the elements tool. To make better use of the screen space, you can drag the left and right two view area to adjust the size and shrink some temporarily unwanted content by clicking on the triangular small icon.

We will find that the HTML code seen in the DOM view on the left side of the elements tool is somewhat different from the original web page source code, for a number of reasons:

• Perhaps the JavaScript code referenced on the page modifies the DOM tree, and JavaScript libraries like jquery provide a lot of ways to modify the DOM tree, such as append (), remove (), HTML (), and so on. These JavaScript code to change the DOM, which is not visible in the source code.
• The browser corrects some errors in HTML writing. Many people will miss

In other words, the HTML code we see from the elements tool is actually parsed by the current browser. In the face of some bugs need to debug the page HTML code, through the Elements tool view, allows us to look at the browser view of the HTML code, than directly read the source code is more direct and effective.

Once in a project, you need to redesign the style of the entire site, by modifying the CSS and then add the class attribute on the original label to do, when the page is running, found that some of the elements on the page display is not normal, see the source code class attribute has been added there seems to be no problem, When you open the Elements tool, you quickly discover the problem: The class attribute of each tag in the HTML can only be defined once, and the class that is defined more than once will not be parsed by the browser. , the first class=class1 was successfully parsed by the browser, while the CLASS=CLASS2 was ignored by the browser directly.

There are a lot of things like that, such as accidentally adding full-width spaces to HTML tags to cause some properties not to be parsed (everyone should have been entered into the hole) and so on, these problems, maybe we just look at the source code, it is difficult to find out where the problem. And under the elements tools of devtools, the weird bugs that we see in the code are all at once.

Select HTML element

There are several ways to navigate to the HTML elements that we need to see in the Elements tool:

1. As we look at the code in the editor, navigate to the HTML element that needs to be viewed through ctrl+f lookup, or a click of a layer of the mouse.
2. Right-click on the element above the HTML page that you want to view, and select the review element.
3. Press Ctrl+shift+c (under Mac Cmd+shift+c), or click the Magnifier button on the left side of the Devtools switch device mode to go to the Review element mode and click on the HTML element you want to view.
4. Execute the Inspect () method in Devtools's console command-line tool, such as inspect (document.body), about inspect () and the console command-line tool specific use can refer to the Learning Notes related content (first left to write to there will be added to the link:)).

You can quickly select, collapse, and expand HTML nodes by using the left and right buttons on the keyboard. At the bottom of the elements tool, the current level of viewing HTML elements is displayed, and you can quickly switch levels by clicking on the elements above.

The selected HTML element is highlighted on the page and is followed by a floating tooltip. When the selected HTML element is not within the currently displayed range, the tooltip prompts the user that the current HTML element is not in the display range, so you can right-click the selected node in the Elements tool and select "scroll into view"to let the selected HTML element appear.

Edit HTML nodes and properties

You can modify it by double-clicking the HTML node, which automatically selects the appropriate label, property name, or property value, depending on where you double-clicked. You can also add and modify properties by using the function in the right-click menu, or you can select "edit as html" to modify the entire selected node.

In the process of modification, press ESC to discard the current changes, click the left mouse button in the blank space, you can make the current changes in the page in real-time effect.

We can also adjust the position of the element in the page by dragging the HTML node.

When the selected node presses the Delete button on the keyboard, the current HTML node is deleted, or it can be done through "delete node" in the right-click menu, and CTRL + Z (Cmd+z under Mac) can undo the delete operation.

It is important to note that all the HTML modifications just mentioned are temporary and will not affect any source code files, and once the page is refreshed, all changes will be restored. When we debug the page HTML code through the Elements tool, we need to manually modify the source code file to save the changes.

Force set element State

In web development, we often use the state of hover or visited to achieve some effects, such as the mouse Hover navigation menu, in the Elements tool, we can right-click the HTML node to force the setting of the element's state. For example, a hover navigation is forced to be set to a hover state so that the hover-displayed menu is displayed for easy debugging.

Set DOM breakpoints

The DOM breakpoint is similar to the JavaScript code breakpoint below the sources tool to pause the execution of JavaScript under certain conditions. A JavaScript code breakpoint is associated with a line in a JavaScript file that triggers a breakpoint to pause the remaining code execution when it executes to this line of code. A DOM breakpoint is associated with a DOM element that is triggered when the DOM element is modified.

Breakpoints for JavaScript code are generally used in situations where we understand the approximate code-running process. For example, I want to debug a button is set to disabled this part of the code, may need to read the code in advance, look like attr (' disabled ', ' disabled ') code, there may be some complex pages, there are several places set this property, We need a code breakpoint to debug. With Dom breakpoints, we don't have to know the contents of the code beforehand, we just need to set the "Pause execution when the button's property changes" condition, and automatically pause the JavaScript execution at the corresponding code when the condition is met.

Devtools gives us three kinds of DOM breakpoints:

• Subtree Modifications

Subtree modifications is triggered when the child node is added, deleted, and moved. For example, if you set the subtree modifications breakpoint on the "main-content" element, the subtree modifications breakpoint will be triggered when the code executes.

var element = document.getElementById (' main-content ');//modify the element ' s subtreevar myspan = document.createelement (' span '); Element.appendchild (MySpan);

• Attributes Modifications

Attributes modifications breakpoints are triggered when the state of the current element (ID, class, disabled, and so on) changes.

var element = document.getElementById (' main-content ');//class attribute of element has been modifiedelement.classname = ' Active ';

• Node Removal

The Node removal breakpoint is triggered when the current element is removed.

document.getElementById (' main-content '). Remove ();

Dom Breakpoint settings are very simple, right-click the element to set the breakpoint, select "break on..." in the menu to set three Dom breakpoints in the level two menu.

There is a "dom in the CSS area on the right side of the elements tool breakpoints"tab can see the DOM breakpoints that have been set, the cursor moves up to show the DOM element corresponding to the breakpoint, the right-click menu can remove the current or all DOM breakpoints, the previous checkbox can be used to temporarily cancel the DOM breakpoint.

Reprinted self-Technical blog http://www.cc-lab.cn/chrome-dev-tools-2/

Finish

Chrome Development Tools Learning notes (2)