Editing Styles And The DOM – Inspect Element
Introduction
The Elements panel lets you view structured information about the current page. In today’s applications, the HTML markup served on an initial page load is not necessarily what you’ll see in the Document Object Model (DOM) tree. Having a real-time representation of the page can be a powerful tool when debugging and authoring web pages.
You can use the Elements panel for a variety of tasks:
- Inspect the HTML & CSS of a web page.
- Test different layouts.
- Live-edit CSS.
To make better use of screen real estate, you may find it convenient to follow these workspace tips:
- Collapse any panes you are not actively using.
- Resize the divider between the DOM tree and the sidebar containing the panes.
DOM
The DOM tree view displays the DOM structure of the current web page. The DOM tree is a tree of DOM nodes that represent individual HTML elements, such as <body> and <p>. For ease of reading, the DOM tree view displays the HTML element tags instead of the DOM node types: for example, <p> instead ofHTMLParagraphElement.
The DOM tree view shows the current state of the tree. This may not match the HTML that was originally loaded for a number of reasons:
- You can modify the DOM tree using JavaScript.
- The browser engine can try to correct invalid author markup and produce an unexpected DOM tree.
Inspecting elements
Inspecting an element shows you the DOM nodes and CSS responsible for a rendered element in the browser.
Inspecting an element shows you the DOM nodes and CSS responsible for a rendered element in the browser.
There are several ways to inspect an element:
- Right-click any element on the page the page and select Inspect Element.
- Press Ctrl + Shift + C (or Cmd + Shift + C on mac) to open DevTools in Inspect Element mode, then click on an element.
- Click the Inspect Element button
at the top of the DevTools window to go into Inspect Element Mode, then click on an element. - Use the inspect() method in the console, such as inspect(document.body).
Navigate the DOM with a mouse or keyboard
You can navigate through the DOM structure using either mouse or keyboard.
- To expand a collapsed node
, double-click the node or press Right arrow. - To collapse an expanded node
, double-click the node or press Left arrow.
Expanding a node automatically selects its first child, so you can expand a deeply-nested structure by pressing the Right arrow repeatedly.
Deleting elements
Remove DOM nodes by using any of the following techniques:
- Right-click on the node and select Delete Node.
- Select the node and press Delete.
You can also remove an element by deleting its tag when using Edit as HTML.
If you delete a node by accident, use Ctrl + Z (or Cmd + Z on Mac) to undo your last action.
Scrolling into view
When you hover over or select a DOM node, the rendered element is highlighted in the main browser window. If the element is scrolled offscreen, a tooltip is displayed at the edge of the browser window indicating that the selected element is offscreen.
To scroll the page so the element appears in the viewport, Right-click the element and select Scroll into View.
Setting DOM breakpoints
A DOM breakpoint is similar to a breakpoint in the Sources panel. It’s used to pause execution of the running JavaScript under certain conditions. A JavaScript breakpoint is associated with a specific line of a JavaScript file, and is triggered when the line is reached. A DOM breakpoint is associated with a specific DOM element, and is triggered when the element is modified in some way.
You can use a DOM breakpoint to debug complex JavaScript applications, when you’re not sure what part of the JavaScript is updating a given element.
For example, if your JavaScript is changing the styling of a DOM element, you can set a DOM breakpoint to fire when the element’s attributes are modified.
Styles
CSS defines the presentation layer of your page. You can view and modify any CSS declaration which affects an element on the current page. An understanding of the cascade (in Cascading Style Sheets) and inheritance aids a development and debugging workflow:
- The cascade relates to how CSS declarations are given weights to determine which rules should take precedence when they overlap with another rule.
- Inheritance relates to how HTML elements inherit CSS properties from their containing elements (ancestors).
Styles Pane
The Styles pane shows the CSS rules that apply to the selected element, from highest priority to lowest:
- Element styles applied directly to the element using the style property (or applied in DevTools).
- Matched CSS rules include any rules matched by the element. For example, the CSS selector span matches an HTML <span> element.
- Inherited styles include any inheritable style rules that match the selected element’s ancestors.
Reference
Google Chrome
