How to use Chrome's Inspector

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

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 + I on Windows or Linux, or use the Cmd + Opt + I keyboard 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.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Questions