Chrome DevTools Elements
Chrome DevTools Elements: Main Tips
- The Elements panel of the Chrome Developer Tools is used to inspect and modify the DOM and CSS.
- This part of the Chrome DevTools interface is split into three parts.
- Changes to the DOM and CSS done in the Elements panel are displayed right as they are made.
Chrome DevTools Elements
The Elements panel of the Chrome Developer Tools is used to inspect and modify the DOM and CSS of the website or application currently loaded in the browser.
It is split into three parts with additional panels in them:
- DOM - modify and add DOM elements
- CSS - modify and add style rules
- Console/what's new - window for the console as well as a panel for the news about the DevTools
In this tutorial, we will only talk about the DOM and CSS interfaces inside this panel (the Console will have its own tutorial).
Chrome DevTools Elements DOM
The DOM interface in the Elements panel shows the DOM layout of the website you are currently in.
From here you have full control over the HTML shows here:
Notably, the bar below also shows the DOM hierarchy, allowing you to select any of the currently selected element's parents.
Additionally, if you right-click any of the elements, a menu like this will be displayed:
It gives you a multitude of options to easily modify the HTML you selected:
- Edit, add and copy - allows you to directly modify the HTML
- Hide and delete - makes the element invisible and removes it from the layout using the display:none style rule, or simply deletes it with its children
- Expand and collapse - expands all child elements and the selected one, or collapses them in the interface
- Select state - allows you to trigger a certain state on the selected element by selecting it
- Scroll into view - scrolls the viewport to display the selected element
Chrome DevTools Elements CSS
Use the CSS interface of the Elements panel to add and modify CSS of the website.
Normally, it looks like this and displays a pair of additional panels:
- Styles - add and modify style rules. It also provides the Box model interface, which assists in styling the selected element
- Event Listeners - inspect the event listeners assigned to the selected element
- DOM Breakpoints - inspect the breakpoints assigned to the selected element
- Properties - inspect the selected element and its children in depth
In the Styles panel, you can add, remove, change CSS properties, add CSS that applies only when the element is in a certain state.
Additionally, when you hover over the bottom right corner of a CSS rule, you can access four useful shortcuts for styling (icons described from left to right):
- text shadow - specify the values of the new text-shadow property
- box shadow - choose the values of the new box-shadow property
- text color - select the color for new color property
- background color - select the color for new background-color property
Also, keep in mind that the element.style rule simply modifies the style attribute of the selected element.
By clicking the plus icon in the top right corner of the Styles panel, you can add a new CSS rule. If you click the selector you can also change it to make it more specific by, for example, specifying the state it applies in. Read the tutorial on the CSS selectors to learn more.
Another important feature of the Elements panel is the box model, which visualizes and allows you to inspect different CSS properties of the selected element.
Here is a visual example of it we can look into:
Now, In this example, we can see a proportional visual representation of the selected element's dimension, including:
- content - the dimensions of the content of the element
- padding - the padding thickness of the element on each side
- border - the border thickness of the element on each side
- margin - the margin thickness of the element on each side
- position - how far from each side the element is relative to its original position in the layout
Additionally, the list below contains the CSS rules that apply to this element. If we selected the Show all checkbox, all potentially applicable properties would be displayed as well.
Chrome DevTools Elements Live Edits
Firstly, one of the most important features of the Elements panel is the ability to do live edits to the page. This means you can modify the HTML and CSS and see the changes immediately.
You can view the live edits you made in the Sources panel by following these steps:
Find and right-click the file you modified
Select Local modifications.
As shown in the illustration above, this will open a panel named History. Also, you have a pair of options for the changes you made.
It is also possible to undo the changes. You have two options for this:
- Ctrl + Z (for Windows and Linux computers) or Cmd + Z (for Mac OS) to undo small recent changes
- To undo all live edits made to a file, find it in the Sources panel, select Local modifications, and select revert next to the name of the file