Chrome development tools learning notes (2), chrome learning notes

Chrome development tools learning notes (2), chrome learning notes
Use the DevTools Elements tool to debug the page DOM

The Elements tool is the first tag on the Chrome DevTools interface. Today, many web pages use JavaScript to dynamically modify DOM and CSS, and traditionally view HTML and CSS source code to debug pages, the dynamic content cannot be seen. Refresh the page once and again to view the effect of modifying HTML and CSS is inefficient for development. Elements is a tool that can help us view and edit DOM trees and CSS styles in real time.

Switch DevTools to the Elements tab and you will see the Elements tool. The left half-side view is the HTML code of the current page, and the right half-side view is the CSS style of the selected DOM, the displayed content is real-time on the current Web page. Modifications to the page through JavaScript are immediately reflected in the Elements tool. To make better use of the screen space, you can drag the left and right view areas to adjust the size, and click the small triangle icon to contract some temporarily unnecessary content.

We will find that the HTML code displayed in the DOM view on the left of the Elements tool is a little different from the source code of the original webpage, for many reasons:

• The JavaScript code referenced on the page may have modified the DOM tree. JavaScript libraries such as jQuery provide a lot of methods to modify the DOM tree, such as append (), remove (), and html (). The JavaScript code to change the DOM is invisible in the source code.
• The browser will correct some HTML writing errors. Many people miss the <HTML>

That is to say, the HTML code we see in the Elements tool is actually parsed by the current browser. When you encounter some bugs that require debugging HTML code on the page, you can use the Elements tool to view the HTML code from the browser's perspective, which is more effective than directly reading the source code.

When I was working on a project, I had to re-design the style of the entire website. I modified CSS and added the class attribute to the original tag. When the page was running, it is found that the Display Effect of Elements on some pages is not normal. It seems that the source code class attribute has been added. When you open the Elements tool, you will soon find the problem: the class attribute of each tag in HTML can only be defined once. The class defined multiple times will not be parsed by the browser ., The first class = class1 is successfully parsed by the browser, while class = class2 is directly ignored by the browser.

 

There are many other similar things. For example, some attributes are not parsed due to the inclusion of full-angle spaces in HTML tags (everyone should have been pitted by the input method, if we look at the source code, it is difficult to find out where the problem is. Under the Elements tool of DevTools, the strange bugs that we can't think of in the Code suddenly become the original form.

Select HTML elements

In the Elements tool, locate the HTML Elements we need to view. There are several methods:

1. Like reading the code in the editor, you can use ctrl + f to search for the HTML element you want to view, or click the HTML element at a layer.
2. Right-click the element to be viewed on the HTML page and select audit element.
3. Press Ctrl + Shift + C (Cmd + Shift + C under MAC), or click the magnifier button on the left of switch device mode in the upper left corner of DevTools to enter audit element mode, click the HTML element to be viewed.
4. Run the inspect () method in the Console command line tool of DevTools, such as inspect (document. for details about how to use inspect () and the Console command line tool, refer to the content related to the learning notes (the link will be added when writing it to it first :)).

You can quickly select, collapse, and expand HTML nodes by clicking the upper, lower, and left buttons on the keyboard. At the bottom of the Elements tool, the current HTML Element Level is displayed. You can click the above element to quickly switch the level.

 

The selected HTML element is highlighted on the page with a floating tooltip following. When the selected HTML element is not in the current display range, the tooltip prompts the user that the current HTML element is not in the display range. You can right-click the selected node in the Elements tool, select Scroll into view to display the selected HTML elements.

Edit HTML nodes and attributes

You can double-click an HTML node to modify it. The corresponding tag, attribute name, or attribute value is automatically selected based on the double-click position. You can also add and modify attributes by right-clicking the function in the menu, or select "Edit as HTML" to modify the entire selected node.

During the modification process, you can press ESC to discard the current modification content and click the left mouse button in the blank area to make the current modification take effect in real time on the page.

You can also drag an HTML node to adjust the position of an element on the page.

When you select a Node and press the Delete button on the keyboard, the current HTML Node will be deleted. You can also right-click the Node to perform this operation, ctrl + Z (Cmd + Z under MAC) can cancel the delete operation.

Note that all the HTML modifications mentioned above are temporary and will not affect any source code files. Once the page is refreshed, all modifications will be restored. After debugging the HTML code of the page through Elements, You need to manually modify the source code file to save the modification.

Force set element status

In web development, we often use hover, visited, and other States to achieve some effects. For example, the navigation menu for hovering over the mouse. In the Elements tool, you can right-click an HTML node to forcibly set the element status. For example, force a hover navigation to the hover State to keep the menus displayed in the hover navigation for debugging.

Set DOM breakpoint

The DOM breakpoint is similar to the JavaScript code breakpoint under the Sources tool, used to pause JavaScript execution under certain conditions. The JavaScript code breakpoint is associated with a line in the JavaScript file. When this line of code is executed, the breakpoint is triggered to pause the remaining code execution. A dom breakpoint is associated with a DOM element and triggered when the DOM element is modified.

The breakpoint for JavaScript code is generally used when we understand the general code running process. For example, if you want to debug the code of a button that is set to disabled, you may need to read the code in advance to find code similar to attr ('Disabled ', 'Disabled, there may be some complicated pages, and this attribute has been set in several places. We need to place code breakpoints one by one for debugging. With the help of DOM breakpoint, we don't need to know the code content in advance. We only need to set the condition "suspend execution when the button property is modified". When the condition is met, javaScript execution is automatically suspended in the corresponding code.

DevTools provides three DOM breakpoints:

• Subtree Modifications

Subtree Modifications are triggered when a subnode is added, deleted, or moved. For example, if you set the Subtree Modifications breakpoint on the "main-content" element, the Subtree Modifications breakpoint is triggered when the code is executed.

var element = document.getElementById('main-content');//modify the element's subtreevar mySpan = document.createElement('span');element.appendChild( mySpan );

• Attributes Modifications

The Attributes Modifications breakpoint is triggered when the current element status (id, class, disabled, etc.) 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 breakpoint element and choose Break on... from the menu to set three DOM breakpoints.

In the CSS area on the right of the Elements tool, a "DOM Breakpoints" Tab is displayed to view the configured DOM breakpoint. Moving the cursor up will display the corresponding DOM element of the breakpoint, you can right-click the menu to remove the current or all DOM breakpoints. The previous checkbox can be used to temporarily cancel DOM breakpoints.

 

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

(End)