Chrome Developer Tools Elements Panel (edit dom and CSS styles)

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The element panel allows us to dynamically view and edit DOM nodes and CSS stylesheets, and takes effect immediately, avoiding the hassle of switching browsers and editors frequently.

We can use the element panel to view the source code, which not only provides a good format for DOM nodes, clearly displays HTML documents, but also allows you to view the DOM nodes created by JavaScript and the DOM nodes in the IFRAME, rather than right-clicking the mouse in the current page to select "View Web page source code "Much stronger.

In short, the element panel gives us a thorough understanding of the underlying structure of the DOM and CSS.

We will take the following HTML code as an example to learn more about the element panel:

<! DOCTYPE HTML public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd ">
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-type" Content="Text/html;charset=utf-8">
<style Type="Text/css">
h1{
Color:blue;
}
p{
padding:10px;
border:1px solid #ccc;
}
</style>
<title>chrome Developer Tools Demo </title>
<body>
<div>
<p>http://www.itxueyuan.org/javascript/</p>
</div>
</body>

Copy the code, save it as demo.html and open it in Chrome, and press Ctrl+shift+c (Mac system as Cmd+shift+c) to open the Developer tool and enter the element review mode.

Viewing the DOM tree

Open the element panel to view all DOM nodes, including CSS and JavaScript, as shown in the DOM tree on the left and the CSS style on the right.

Figure 2.1 Element Panel example

Icon Description:

Click on "Icon 1", you can open the developer tool in a new window, click Back to the current page again;
Click "Icon 2", you can bring up the console, you can enter and execute JavaScript code in the console, view the current page errors and logs, etc.;
Click on "Icon 3" to select the HTML element of the current page.

Select Dom Node

Click "Icon 3" (from Black to blue) and move the mouse over an element in the Web page, which changes as shown:

Figure 2.2 Moving the mouse to an element in a Web page

Click the element to select it. You will notice that the DOM tree in the element panel has changed, as shown in:

Figure 2.3 dom Tree changes

The selected <p> node is precisely positioned in the DOM tree (blue background), you can see the <p> node's DOM hierarchy (red box), on the right side of the panel, is the CSS style of the <p> node.

Of course, you can also select a DOM node in the DOM tree of the element panel. Put the mouse on the corresponding DOM node, you will find that the corresponding node in the page has also changed (Figure 2.2), click on the node, you can select.

Adding, deleting, and modifying DOM nodes

In the element panel, select the DOM node and right-click at the text to bring up a menu as shown:

Figure 2.4 Dom Edit menu

Menu Description:

Edit text: Edit the text in the node. You can also double-click on the text to edit it.
Edit as HTML (editing HTML): Edits all HTML elements of the node and its child nodes, including the text in the node.
Copy as HTML (copy HTML): Copies all the HTML elements (HTML documents) of the node and its child nodes.
Copy XPath (duplicate XPath path): Copies the XPath path of the node, which is the DOM hierarchy path. For example, the XPath path for the,<p> node is/html/body/div/p.
Delete node: Deletes all HTML elements of the node and its child nodes. You can also delete using the Backspace and delete keys.
Inspect Dom Properties (Review Dom property): Displays all the standard properties of the node, if any, in the console.
Word Wrap: Whether the HTML code wraps automatically.

Description of the Inspect Dom Properties (Review Dom property):
Add the id attribute for the <p> node as follows:

<p id="Demo">http://www.itxueyuan.org/javascript/</p>

The P#demo is output on the console, and the class and name attributes are added to the <p> node as follows:

<p id="Demo" class="Demo" Data="Demo">http:// www.itxueyuan.org/javascript/</p>

The P#demo.demo is output at the console.

As you can see, the console only prints the properties that meet the criteria of the standard and does not support custom attributes. However, this functionality is rarely used in real-world development.

Alternatively, we can change the order of the nodes by dragging them, and double-click the attribute node to change its value.

View CSS Styles

CSS style Review Panel is a very useful panel, in real development, sometimes CSS style sheet can be very complex, even we do not know what the current node is applied to the style. Using the CSS style review panel, you can give us a clear idea of which styles are used by the current node, which files are from, which styles are covered, which styles are final, which are not, and so on.

2.3, the selected node, the CSS style review panel on the right side of the element panel, shows the CSS style for that node.

In the CSS style review panel, we can add, remove, and modify CSS styles.

In addition, there are several sub-panels in the CSS Review panel, as shown in:

Figure 2.5 The sub-panel of the CSS style review panel

Sub-panel Description:

Style (style): The styles of the current node;
Computed (calculation): View the current node after the calculated style and box model data;
Event Listeners: View the event and event listener functions that are bound to the current node;
Dom Breakpoints (Dom breakpoint): View the DOM breakpoint set for the current node;
Properties: All properties of the current node (object).

"Tips" Use keyboard arrow keys to change values
View the style of the <p> node, as shown in Figure 2.3, select the value of padding, press the keyboard arrow key (<-and,) and the values will change, and the style of the <p> node on the page changes immediately. In practical development, it is very convenient to use this method to fine-tune elements ' margins, padding, and size.

"Little Tricks" color picker
View the <p> node's style, as shown in Figure 2.3, select the small icon behind the Background-color, and the color picker will pop up to make it easy to change the background color as shown in:

Figure 2.6 Color Picker

In practical development, this method is often used to fine-tune the color of the nodes.

REFERENCE from:http://www.itxueyuan.org/view/6708.html

Chrome Developer Tools Elements Panel (edit dom and CSS styles)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Chrome Developer Tools Elements Panel (edit dom and CSS styles)

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Chrome Developer Tools Elements Panel (edit dom and CSS styles)

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support