Inspecting elements on Google Chrome is a useful feature for web developers and designers. It allows you to view the different DOM components that compose a webpage.
By inspecting an element, you can view its HTML attributes and check the styling that is applied to the HTML element.
Various CSS properties can be inspected, such as font size, text color, padding and margin. Another very useful feature is the possibility to check the dimensions of an element: its width, height, margins and padding.
How can you inspect elements on Chrome?
Every Chrome browser comes with built-in Developer Tools. These tools provide various useful features, including the possibility to see a hierarchy of the DOM, containing all the HTML elements of the page.
There are various ways you can use to start inspecting an element.
-
Right-Click on the Element
While you're on a webpage, right click with your mouse on a specific element, such as a textarea or button. Next, select "Inspect" from the context menu.
If you're an avid keyboard shortcut user, you can use the keyboard shortcut
Ctrl + Shift + Ion Windows or Linux, or use theCmd + Opt + Ikeyboard combination on macOS. -
Open Developer Tools from the Menu Bar
On macOS, you can click the View menu item, click Developer and finally Inspect Elements
Manipulating the DOM on Chrome
In the Elements tab, you can see the Document Object Model (DOM) of the web page, which is a hierarchy of the page. Hovering over elements in the DOM will highlight corresponding sections on the web page, and vice versa.
You can even perform live HTML editing on webpages. Change HTML attributes, style properties and even Javascript code. This makes the Chrome inspector the perfect WYSIWYG HTML editor.
