The inspect elements feature of a web browser is one of the basic tools when working with websites and web apps. It is part of the Chrome Developer Tools packet.

What are (Chrome) developer tools?

The “inspect elements” feature is one of the tools included in the web de­vel­op­ment tools in the browser. Known as “developer tools” in the Chrome browser, the more common name “Chrome DevTools” has become popular. Chrome Developer Tools is the result of a long de­vel­op­ment process, starting with “Firebug” in Firefox and “Web Inspector” in Webkit (Safari) around 2006.

“Inspect element” is, therefore, not a feature on its own, but rather serves as an entry point to Chrome DevTools. Chrome Developer Tools is a col­lec­tion of essential tools to be used when working with websites. Chrome DevTools is used in the areas of design, de­vel­op­ment, analysis and op­ti­miza­tion. Other browsers have a similar feature:

Image: Inspect element in Chrome
The “inspect element” feature in Chrome on macOS.
Image: Inspect element in Firefox on macOS
The “inspect element” feature in Firefox on macOS.
Image: Safari inspect element
The “inspect element” feature in Safari on macOS.
Note

The examples we’ve used are from the website “https://en.wikipedia.org/wiki/Web_de­vel­op­ment_tools”.

A website uses a HTML document as its basic framework. Contained within it is the content, mostly text and images, as well as other resources such as stylesheets, scripts and fonts. All of a website’s in­for­ma­tion is then put together as a visual element by the browser.

Re­pro­duc­ing the links between the elements of a website tra­di­tion­al­ly required an analysis of the HTML document and the source code of other resources. The large scope of CSS and JavaScript on modern websites makes this prac­ti­cal­ly im­pos­si­ble nowadays. This is where Chrome Developer Tools comes in. DevTools allows you to take a look behind the scenes and inspect several aspects of a website:

Web aspect Medium/language
Content Text, images, mul­ti­me­dia, etc.
Structure HTML
Pre­sen­ta­tion CSS
Behaviour JavaScript

the (Chrome) DevTools feature “Inspect element” in the browser explained

A browser opens a HTML document from a server and displays it. HTML defines the structure of the document, which elements there are and how these are nested into one another. The document is stored on the server in the form of source code. However, this source code is just the framework.

The browser then builds on this, creating the Document Object Model (DOM). If you were to only look at the source code, you wouldn’t have all the in­for­ma­tion, or, in more concrete terms, the in­for­ma­tion wouldn’t be readily visible. The HTML structure of the in­di­vid­ual elements can be re­pro­duced using markdown editors.

Tip

Would you like to do more with HTML and CSS? Here are some articles to get you started:

What are the benefits of (Chrome) DevTools?

To get a better un­der­stand­ing of the benefits of “inspect element”, it’s helpful to compare it to the older feature “show source code”. This feature is still available and useful, albeit in a limited way. With ‘show source code’ users can open the source code of a HTML document in their browser. This, however, only displays a small sample of the in­for­ma­tion present on a website. For example, dynamic elements which have been placed on the website by JavaScript will not be shown.

Only by using “inspect element” or the Chrome DevTools will all DOM elements be shown. It doesn’t matter if they are generated sta­t­i­cal­ly in HTML or dy­nam­i­cal­ly with JavaScript. Fur­ther­more, the actual structure of the elements as well as classes and Ids will be displayed. Chrome Developer Tools allows users to ma­nip­u­late elements and see the effects of such changes im­me­di­ate­ly.

Show source code Inspect element
Display of source code DOM
Elements only static static and dynamic
Make changes change source code ma­nip­u­late elements
Show changes reload page im­me­di­ate­ly shown

Chrome Developer Tools includes all parts of a website and shows the chrono­log­i­cal order of when resources have been opened. It also tracks joining processes and per­for­mance. Ad­di­tion­al­ly, local storage and website data collected by cookies can be evaluated by Chrome DevTools as well.

How to access Chrome Developer Tools

The actual “inspect element” feature depends on the context. To carry it out, right-click on an element and then choose “inspect element” from the context menu displayed. Here it is shown in Chrome and Firefox:

Image: Context menu with “inspect element” in Chrome
The “inspect element” feature in the Chrome context menu.
Image: Context menu with “inspect element” in Firefox
The “inspect element” feature in the Firefox context menu.

If you are using macOS Monterey in Safari, the developer tools are de­ac­ti­vat­ed by default. To use “inspect element”, you need to first activate the feature in your settings under “advanced”. After you have activated the feature, you will see “inspect element” in the context menu:

Image: Activated “developer” menu in Safari’s advanced settings
You can activate the “develop” menu in Safari’s advanced settings.
Image: Context menu with “inspect element” in Safari
If developer tools have been activated, “inspect element” will be shown in the context menu.

There is a range of keyboard shortcuts you can use to open the tool. These are different depending on the browser and the operating system; however, some standards have been es­tab­lished. In each of the three most-used browsers, Chrome, Firefox and Safari, the shortcuts [Cmd] + [Option] + [i] (Mac) or [Ctrl] + [Shift] + [i] (Windows and Linux) work.

F12 can be used as an al­ter­na­tive shortcut in Chrome and Firefox. Both shortcuts are “toggles”, which, when fre­quent­ly used, allow users to open and close Chrome DevTools.

Browser Windows + Linux Mac
Chrome F12 / Ctrl+Shift+i F12 / Cmd+Option+i
Firefox F12 / Ctrl+Shift+i F12 / Cmd+Option+i
Safari – Cmd+Option+i

When opening Chrome DevTools, it will appear docked in the same window. You can choose to display it on the right, left or at the bottom of the website. You also have the option to display Chrome Developer Tools in a separate window. This is practical for intensive workloads, where having the website and the developer tools next to each other or split across different screens is ideal.

Note

In the following screen­shots we will only show Chrome Developer Tools.

Image: Chrome Developer Tools with the DevTools position option
You can choose the position of Chrome DevTools in the menu below the three dots.
Image: Chrome Developer Tools open in a separate window
You can open Chrome Developer Tools in a separate window.

Can you inspect a website using Chrome DevTools on a smart­phone?

While “inspect element” is standard on desktops and all browsers, it is not readily available on smart­phones. There is simply not enough place on a small screen to display DevTools. Moreover, not having a mouse makes precise movements difficult. In iOS, it is even more difficult, because all browsers are limited to Apple’s WebKit browser engine.

Instead of using Chrome DevTools on a smart­phone, you can use emulators to simulate a mobile device on a browser. The re­spon­sive mode in DevTools is par­tic­u­lar­ly useful. It’s also possible to connect physical iOS and Android devices with a desktop computer. The website to be inspected can then be examined in the desktop browser when open. To do this on iOS, you need to use a Mac and the same iCloud account on both devices.

Image: Responsive mode in Chrome Developer Tools
With re­spon­sive mode, multiple mobile devices can be emulated. Here is an example of an iPad mini.

How are (Chrome) developer tools used?

Chrome Developer Tools work for all content displayed in a browser and are often used in the areas of de­vel­op­ment, design and SEO. Due to the extensive de­vel­op­ment of web tech­nol­o­gy, there are ad­di­tion­al areas in which it can also be used. Below we will give you an overview of different features and use cases.

Web de­vel­op­ment

Chrome Developer Tools are used during web de­vel­op­ment to prototype, test and find errors. One great benefit is that new CSS-style rules can be defined and used in elements. Here’s an example of a debug class. If we assign an element to a class, all child elements will be displayed in red text. Ad­di­tion­al­ly, the elements will have a golden border. This makes it easy to diagnose layout errors. You can do this by using the CSS code below:

.debug * {
 color: red !important;
 outline: 1px solid gold;
}
CSS
Image: Control center to define a new style rule
You can click on the + to define a new style rule.
Image: Debug style rule selector
For the style rule you can enter “.debug *” into the selector. Remember to add a period before “debug”.
Image: CSS code for debug style rule
You can click between the curly brackets and enter the CSS code.
Image: Effect of the debug style rule on the body element
You can now select the element. Clicking on “.cls” opens an input field for classes where you can enter “debug”. Important: There should not be a period before the class name. The result can be seen im­me­di­ate­ly on the left-hand side.

To use Chrome Developer Tools for trou­bleshoot­ing and analysis, you must de­ac­ti­vate the browser cache. Otherwise, possible resources may be loaded from the local cache. This results in elements being displayed that do not reflect the actual cir­cum­stances. The settings to de­ac­ti­vate the cache is in the network tab. You can also use the network tab to analyze ERR_SSL_PROTOCOL_ERRORS.

Image: Deactivate browser cache when using Chrome DevTools
The setting to de­ac­ti­vate the browser cache should always be marked.

It is often useful to access the inspected element in the JavaScript console of Chrome Developer Tools. For practical purposes, the browser uses the variable $0 to refer to the inspected element. It is a com­plete­ly normal DOM object, whose prop­er­ties and methods users can access. Here are a few examples of useful in­ter­ac­tions with the inspected element:

# currently inspected element
$0
# get classes of inspected element
$0.classList
# get ID of inspected element
$0.getAttribute('id')
JavaScript
Image: The inspected element in the JavaScript console
You can access the inspected element from the JavaScript console.
Tip

Want to build your own website? IONOS has different solutions to make your debut on the web easier. In just a few clicks, you can create your own website with your own domain using MyWebsite Now – IONOS. Enjoy more flex­i­bil­i­ty with a web­host­ing plan.

Web design

Chrome Developer Tools are widely used in web design. They are essential for the creation of re­spon­sive designs with utility frame­works such as Tailwind CSS. They allow users to quickly switch an element’s classes on and off and then show the cor­re­spond­ing results im­me­di­ate­ly. On top of this, they allow the cal­cu­lat­ed CSS values of the inspected element to be read out.

Image: Responsive mode in Chrome Developer Tools
With an active response mode (red), the viewport of the page can be quickly adapted. You can choose a pre-defined setting (turquoise) or move the slider (green).
Image: Classes field in Chrome Developer Tools
Using the classes field you can quickly add, activate or de­ac­ti­vate CSS classes. Here is an example of a debug class.
Image: Calculated CSS properties of an inspected element
The cal­cu­lat­ed CSS prop­er­ties contain external and internal spacing among other things.
Tip

Get support for web design with IONOS’ website builder. You can use templates to build a pro­fes­sion­al website without any CSS knowledge. You can also create a business website that comes with an imprint, cookie warning and privacy in­for­ma­tion included.

Search engine op­ti­miza­tion (SEO)

Chrome De­vel­op­ment Tools are also used for search engine op­ti­miza­tion. Se­man­ti­cal­ly correct labelling of headlines is an important on-page feature of SEO. You can use the “inspect element” feature to analyze the heading structure:

Image: Heading analyzed with inspect element
The inspected element is the H1 heading.

A page’s loading speed is a crucial factor for search engine ranking and user ex­pe­ri­ence. We can use the network tab in Chrome Developer Tools to analyze resources as well as their size and load time:

Image: Network tab in Chrome Developer Tools
The network tab lists the resources that have been loaded and provides in­for­ma­tion about the page’s total size and load time. The loading per­for­mance of the resource is displayed on the right.

Included in Chrome DevTools is the Google tool Light­house, which can carry out multiple SEO-relevant audits of a page. The desktop and mobile versions of the page can be analyzed sep­a­rate­ly:

Image: Lighthouse tab in Chrome Developer Tools
The Light­house function has its own tab.
Image: Testing a mobile with Lighthouse in Chrome DevTools
The Light­house audit for the mobile version of a page is rendered in a mobile mock up.
Image: Results of the Lighthouse audit in Chrome Developer Tools
A Light­house audit gives you a wide range of results.

Adapt page

Alongside the pro­fes­sion­al uses we have already covered, Chrome Developer Tools can also be used to adapt websites displayed in a browser. This is par­tic­u­lar­ly useful to print pages or prepare screen­shots. One of the most used tricks is to find and hide certain elements with “inspect element”. This allows you to get rid of annoying ads or cookie banners.

The easiest way to do this is to give the element that you want to hide the following CCS property:

display: none;
CSS
Image: The element that the user wants to hide has been selected in Chrome Developer Tools
You can now choose the element you want to hide. In this example, the contents section.
Image: A view of the element removed by CSS
By using a style entry, we can hide the contents. Even though the DOM is still available, it is no longer displayed.
Note

To undo a DOM change, you can use the undo shortcuts Ctrl+Z (Windows + Linux) or Cmd+Z (Mac). Al­ter­na­tive­ly, you can reload the page, causing all local changes to the DOM to be removed.

As a further al­ter­na­tive, you can select the element you want to hide with “inspect element” and use JavaScript to assign it the CCS property. To do this, use the in­ter­ac­tive version of “inspect element”:

Image: Interactive version of inspect element
By clicking on the arrow, elements can be inspected dy­nam­i­cal­ly. 
# hide inspected element
$0.style.display = 'none'
# undo changes to inspected element
$0.style.display = 'revert'
JavaScript

When using JavaScript, you can also activate design mode. This allows you to edit the text on the page as you would in Word:

document.designMode = "on"
JavaScript
Image: Activating design mode using JavaScript
You can activate design mode in the JavaScript console.
Image: Editing the page’s text in design mode
You can now edit the text as you like. In this example, the headline is being edited.

Ex­tract­ing content

Websites contain a lot of helpful content, most of which users can easily access. It only takes a couple of clicks to copy texts or download images. Sometimes, this isn’t enough though. For example, let’s say you want to extract a complete list or table with in­for­ma­tion. In addition to exporting the content and structure of an element, the ‘copy element’ feature allows you to export sub-elements as well. You can then edit these in code editors. Chrome DevTools can also be used to fill Google tables with ImportXML.

Image: Copying an element in Chrome Developer Tools
You can copy the HTML of an element using the context menu.

Chrome DevTools also allows you to take screen­shots. This allows in­di­vid­ual elements, the viewport or the entire page to be exported as an image. In com­bi­na­tion with re­spon­sive mode, you can show the display on different devices.

Image: Creating a screenshot in Chrome Developer Tools’ responsive mode
The menu shown when re­spon­sive mode is open has options for users to create screen­shots of the viewports and the whole page.
Image: Creating a screenshot of an element in Chrome Developer Tools
By using the context menu, you can create a screen­shot of an in­di­vid­ual element.
Summary

Chrome DevTools and its “inspect element” function are essential for the modern workflows of web pro­fes­sion­als. It’s well worth learning how to use this set of web developer tools.

Go to Main Menu