# How to inspect elements with Chrome Developer Tools and in other browsers 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 development 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 development 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, in reality, a collection of essential tools to be used when working with websites. Chrome DevTools is used in the areas of design, development, analysis and optimisation. Other browsers have a similar feature: [![Image: Inspect element in Chrome](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/2/0/csm_chrome-elements-styles_42fa7dc79e.webp "Inspect element in Chrome")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-elements-styles.jpg) The ‘inspect element’ feature in Chrome on macOS. [![Image: Inspect element in Firefox on macOS](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/c/6/csm_firefox-elements-styles_bec3d5fcfd.webp "Inspect element in Firefox on macOS")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/firefox-elements-styles.jpg) The ‘inspect element’ feature in Firefox on macOS. [![Image: Safari inspect element](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/5/csm_safari-elements-styles_bc181fe6fb.webp "Safari inspect element")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/safari-elements-styles.jpg) The ‘inspect element’ feature in Safari on macOS. Note The examples we’ve used are from the website ‘https://en.wikipedia.org/wiki/Web\_development\_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 information is then put together as a visual element by the browser. Reproducing the links between the elements of a website traditionally 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 practically impossible 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, multimedia, etc.
Structure HTML
Presentation 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](https://www.ionos.co.uk/digitalguide/websites/web-development/source-code-explained-definition-examples/ "Source code explained: Definition & Examples") is just the framework. The browser then builds on this, creating the [Document Object Model (DOM)](https://www.ionos.co.uk/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/ "An introduction to the Document Object Model (DOM)"). If you were to only look at the source code, you wouldn’t have all the information, or, in more concrete terms, the information wouldn’t be readily visible. The HTML structure of the individual elements can be reproduced using [markdown editors](https://www.ionos.co.uk/digitalguide/websites/web-development/markdown-editors/ "Markdown editors"). Tip Would you like to do more with HTML and CSS? Here are some articles to get you started: - [Learn HTML – A tutorial for beginners](https://www.ionos.co.uk/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/ "Learning HTML: a beginner’s tutorial") - [What is CSS](https://www.ionos.co.uk/digitalguide/websites/web-design/what-is-css/ "What is CSS?") - [Include CSS in HTML](https://www.ionos.co.uk/digitalguide/websites/web-design/linking-css-to-html/ "Linking CSS to HTML") - [Learn CSS easily](https://www.ionos.co.uk/digitalguide/websites/web-design/css-coding-made-easy/ "CSS coding made easy") - [CSS tricks you must know](https://www.ionos.co.uk/digitalguide/websites/web-design/css-tricks-everyone-should-know/ "CSS tricks everyone should know") - [CSS Grid](https://www.ionos.co.uk/digitalguide/websites/website-creation/css-grid/ "CSS Grid") - [CSS Flexbox](https://www.ionos.co.uk/digitalguide/websites/website-creation/css-flexbox/ "CSS Flexbox") ### What are the benefits of (Chrome) DevTools? To get a better understanding 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 information 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 statically in HTML or dynamically with JavaScript. Furthermore, the actual structure of the elements as well as classes and Ids will be displayed. Chrome Developer Tools allows users to manipulate elements and see the effects of such changes immediately.
Show source code Inspect element
Display of source code DOM
Elements only static static and dynamic
Make changes change source code manipulate elements
Show changes reload page immediately shown
Chrome Developer Tools includes all parts of a website and shows the **chronological order of when resources have been opened**. It also tracks joining processes and performance. Additionally, 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/c/2/csm_chrome-inspect-element-menu_c1e7528752.webp "Context menu with ‘inspect element’ in Chrome")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-inspect-element-menu.jpg) The ‘inspect element’ feature in the Chrome context menu. [![Image: Context menu with ‘inspect element’ in Firefox](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/5/9/csm_firefox-inspect-element-menu_a4654ab1ad.webp "Context menu with ‘inspect element’ in Firefox")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/firefox-inspect-element-menu.jpg) The ‘inspect element’ feature in the Firefox context menu. If you are using **macOS Monterey in Safari, the developer tools are deactivated 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/6/csm_safari-activate-devtools_848150b20a.webp "Activated ‘developer’ menu in Safari’s advanced settings")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/safari-activate-devtools.jpg) You can activate the ‘develop’ menu in Safari’s advanced settings. [![Image: Context menu with ‘inspect element’ in Safari](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/8/csm_safari-inspect-element-menu_5ed3551f4d.webp "Context menu with ‘inspect element’ in Safari")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/safari-inspect-element-menu.jpg) 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 established. 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 alternative shortcut in Chrome and Firefox. Both shortcuts are ‘toggles’, which, when frequently 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 screenshots we will only show Chrome Developer Tools. [![Image: Chrome Developer Tools with the DevTools position option](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/c/b/csm_chrome-devtools-docking_8cdaee4ebf.webp "Chrome Developer Tools with the DevTools position option")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-devtools-docking.jpg) You can choose the position of Chrome DevTools in the menu below the three dots. [![Image: Chrome Developer Tools open in a separate window](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/a/b/csm_chrome-devtools-window_7e1af68112.webp "Chrome Developer Tools open in a separate window")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-devtools-window.jpg) You can open Chrome Developer Tools in a separate window. ### Can you inspect a website using Chrome DevTools on a smartphone? While ‘inspect element’ is standard on desktops and all browsers, **it is not readily available on smartphones**. 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 smartphone, you can use emulators to **simulate a mobile device on a browser**. The responsive mode in DevTools is particularly 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/2/f/csm_chrome-responsive-mode-ipad_d9e746300e.webp "Responsive mode in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-responsive-mode-ipad.jpg) With responsive 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 development, design and SEO**. Due to the extensive development of web technology, there are additional areas in which it can also be used. Below we will give you an overview of different features and use cases. ### Web development Chrome Developer Tools are used during web development 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. Additionally, 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: ```CSS .debug * { color: red !important; outline: 1px solid gold; } ``` [![Image: Control centre to define a new style rule](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/9/csm_chrome-define-new-style-rule_f1224b8455.webp "Control centre to define a new style rule")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-define-new-style-rule.jpg) You can click on the + to define a new style rule. [![Image: Debug style rule selector](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/a/8/csm_chrome-debug-new-style-rule_f196bacc8e.webp "Debug style rule selector")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-debug-new-style-rule.jpg) 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/c/csm_chrome-css-new-style-rule_8f2b5ffcd3.webp "CSS code for debug style rule")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-css-new-style-rule.jpg) You can click between the curly brackets and enter the CSS code. [![Image: Effect of the debug style rule on the body element](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/8/csm_chrome-effect-of-new-style-rule_e01ea1802d.webp "Effect of the debug style rule on the body element")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-effect-of-new-style-rule.jpg) 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 immediately on the left-hand side. To use Chrome Developer Tools for troubleshooting and analysis, you must **deactivate 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 circumstances. The settings to deactivate the cache is in the network tab. You can also use the network tab to analyse [ERR\_SSL\_PROTOCOL\_ERRORS](https://www.ionos.co.uk/digitalguide/hosting/technical-matters/err-ssl-protocol-error-the-best-solutions/ "ERR_SSL_PROTOCOL_ERROR: the best solutions"). [![Image: Deactivate browser cache when using Chrome DevTools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/9/csm_chrome-disable-cache_b011a19ace.webp "Deactivate browser cache when using Chrome DevTools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-disable-cache.jpg) The setting to deactivate 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 completely normal DOM object, whose properties and methods users can access. Here are a few examples of useful interactions with the inspected element: ```JavaScript # currently inspected element $0 # get classes of inspected element $0.classList # get ID of inspected element $0.getAttribute('id') ``` [![Image: The inspected element in the JavaScript console](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/6/8/csm_chrome-java-script-console_f30130c41a.webp "The inspected element in the JavaScript console")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-java-script-console.jpg) 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](https://www.ionos.co.uk/websites/website-with-your-own-domain). Enjoy more flexibility with a [webhosting package](https://www.ionos.co.uk/hosting/web-hosting "Webhosting packages IONOS"). ### Web design Chrome Developer Tools are widely used in web design. They are essential for the **creation of responsive designs with utility frameworks** such as [Tailwind CSS](https://www.ionos.co.uk/digitalguide/websites/web-development/tailwind-css-overview/ "Tailwind CSS overview"). They allow users to quickly switch an element’s classes on and off and then show the corresponding results immediately. On top of this, they allow the calculated CSS values of the inspected element to be read out. [![Image: Responsive mode in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/b/2/csm_chrome-dev-tools-responsive-mode_1085974a4f.webp "Responsive mode in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-responsive-mode.jpg) 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/a/f/csm_chrome-dev-tools-css-classes-field_95ebe36b02.webp "Classes field in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-css-classes-field.jpg) Using the classes field you can quickly add, activate or deactivate CSS classes. Here is an example of a debug class. [![Image: Calculated CSS properties of an inspected element](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/f/csm_chrome-computed-css-properties_23b39c6f12.webp "Calculated CSS properties of an inspected element")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-computed-css-properties.jpg) The calculated CSS properties contain external and internal spacing among other things. Tip Get support for web design with IONOS’ [website builder](https://www.ionos.co.uk/websites/website-builder "Create your own website with IONOS’ website builder"). You can use templates to build a professional website without any CSS knowledge. You can also [create a business website](https://www.ionos.co.uk/websites/create-a-business-website " Create a business website for your business – IONOS") that comes with an imprint, cookie warning and privacy information included. ### Search engine optimisation (SEO) Chrome Development Tools are also used for search engine optimisation. **Semantically correct labelling of headlines** is an important on-page feature of SEO. You can use the ‘inspect element’ feature to analyse the heading structure: [![Image: Heading analysed with inspect element](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/8/8/csm_chrome-inspect-heading_d3387cf5e0.webp "Heading analysed with inspect element")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-inspect-heading.jpg) The inspected element is the H1 heading. A page’s loading speed is a crucial factor for search engine ranking and user experience. We can use the network tab in Chrome Developer Tools to analyse resources as well as their size and load time: [![Image: Network tab in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/2/csm_chrome-dev-tools-network-tab_8a09533dcd.webp "Network tab in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-network-tab.jpg) The network tab lists the resources that have been loaded and provides information about the page’s total size and load time. The loading performance of the resource is displayed on the right. Included in Chrome DevTools is the [Google tool Lighthouse](https://www.ionos.co.uk/digitalguide/online-marketing/search-engine-marketing/google-lighthouse/ "Google Lighthouse"), which can carry out multiple SEO-relevant audits of a page. The desktop and mobile versions of the page can be analysed separately: [![Image: Lighthouse tab in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/a/c/csm_chrome-dev-tools-lighthouse-tab_a23401e95f.webp "Lighthouse tab in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-lighthouse-tab.jpg) The Lighthouse function has its own tab. [![Image: Testing a mobile with Lighthouse in Chrome DevTools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/e/csm_chrome-dev-tools-lighthouse-mobile-test_6cadec564f.webp "Testing a mobile with Lighthouse in Chrome DevTools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-lighthouse-mobile-test.jpg) The Lighthouse 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/6/8/csm_chrome-lighthouse-results_2a1a3c4dad.webp "Results of the Lighthouse audit in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-lighthouse-results.jpg) A Lighthouse audit gives you a wide range of results. ### Adapt page Alongside the professional uses we have already covered, Chrome Developer Tools can also be used to adapt websites displayed in a browser. This is particularly useful to **print pages or prepare screenshots**. One of the most commonly 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: ```CSS display: none; ``` [![Image: The element that the user wants to hide has been selected in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/8/csm_chrome-select-element-to-hide_528d15d424.webp "The element that the user wants to hide has been selected in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-select-element-to-hide.jpg) 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](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/2/4/csm_chrome-hide-element-css_b05af7d8ce.webp "A view of the element removed by CSS")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-hide-element-css.jpg) 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). Alternatively, you can reload the page, causing all local changes to the DOM to be removed. As a further alternative, 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 interactive version of ‘inspect element’: [![Image: Interactive version of inspect element](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/e/csm_chrome-inspect-element-interactive-version_e26a388e56.webp "Interactive version of inspect element")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-inspect-element-interactive-version.jpg) By clicking on the arrow, elements can be inspected dynamically. ```JavaScript # hide inspected element $0.style.display = 'none' # undo changes to inspected element $0.style.display = 'revert' ``` When using JavaScript, you can also **activate design mode**. This allows you to edit the text on the page as you would in Word: ```JavaScript document.designMode = "on" ``` [![Image: Activating design mode using JavaScript](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/8/a/csm_chrome-design-mode-javascript_edae95fec3.webp "Activating design mode using JavaScript")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-design-mode-javascript.jpg) You can activate design mode in the JavaScript console. [![Image: Editing the page’s text in design mode](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/3/b/csm_chrome-design-mode-edit-page_d700e8b7d7.webp "Editing the page’s text in design mode")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-design-mode-edit-page.jpg) You can now edit the text as you like. In this example, the headline is being edited. ### Extracting 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 information**. 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](https://www.ionos.co.uk/digitalguide/websites/web-development/code-editors/ "Code editors"). Chrome DevTools can also be used to fill [Google tables with ImportXML](https://www.ionos.co.uk/digitalguide/online-marketing/online-sales/google-sheets-importxml/ "Google Sheets importXML"). [![Image: Copying an element in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/c/c/csm_chrome-dev-tools-copy-element_0a054f30f7.webp "Copying an element in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-copy-element.jpg) You can copy the HTML of an element using the context menu. Chrome DevTools also allows you to take [screenshots](https://www.ionos.co.uk/digitalguide/websites/web-design/chrome-screenshots/ "Chrome screenshots"). This allows **individual elements, the viewport or the entire page to be exported as an image**. In combination with responsive mode, you can show the display on different devices. [![Image: Creating a screenshot in Chrome Developer Tools’ responsive mode](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/a/d/csm_chrome-dev-tools-capture-screenshot_36c31b49dc.webp "Creating a screenshot in Chrome Developer Tools’ responsive mode")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-capture-screenshot.jpg) The menu shown when responsive mode is open has options for users to create screenshots of the viewports and the whole page. [![Image: Creating a screenshot of an element in Chrome Developer Tools](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/b/d/csm_chrome-dev-tools-scapture-node-screenshot_542643e7dd.webp "Creating a screenshot of an element in Chrome Developer Tools")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/chrome-dev-tools-scapture-node-screenshot.jpg) By using the context menu, you can create a screenshot of an individual element. Summary Chrome DevTools and its ‘inspect element’ function are essential for the modern workflows of web professionals. It’s well worth learning how to use this set of web developer tools. This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-development/inspect-elements/](https://www.ionos.co.uk/digitalguide/websites/web-development/inspect-elements/) for AI/LLM consumption.