--- title: Using Inspect and Developer Tools with Chrome | TestingBot description: Discover how to activate and use the Inspect Element feature that comes with the Chrome Developer Tools. source_url: html: https://testingbot.com/software-testing-questions/how-to-inspect-on-chrome md: https://testingbot.com/software-testing-questions/how-to-inspect-on-chrome.md --- # How to use Chrome's Inspector - [![Share on Facebook](https://static.addtoany.com/buttons/facebook.svg) ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname= "Share on Facebook") - [![Share on Twitter](https://static.addtoany.com/buttons/twitter.svg) ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname= "Share on Twitter") - [![Share on LinkedIn](https://static.addtoany.com/buttons/linkedin.svg) ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname= "Share on LinkedIn") - [![Share on HackerNews](https://static.addtoany.com/buttons/y18.svg) ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname= "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](https://static.addtoany.com/buttons/facebook.svg) ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname=) - [![Share on Twitter](https://static.addtoany.com/buttons/twitter.svg) ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname=) - [![Share on Linkedin](https://static.addtoany.com/buttons/linkedin.svg) ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname=) - [![Share on Hacker News](https://static.addtoany.com/buttons/y18.svg) ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-inspect-on-chrome.md&linkname=) ![TestingBot Logo](https://testingbot.com/assets/logo-head-2f7f08db4ac9c4a3b1a784047410f8a4ece708e7e9f10ed16e20fdd8310f8de3.svg) ## Sign up for a Free Trial Start testing your apps with TestingBot. No credit card required. [Start Free Trial](https://testingbot.com/users/sign_up) ## Other Questions ### [What is a Selenium Grid?](https://testingbot.com/software-testing-questions/what-is-selenium-grid "What is a Selenium Grid?") ### [Learn about Selenium WebDriver](https://testingbot.com/software-testing-questions/what-is-selenium-webdriver "Learn about Selenium WebDriver") ### [What is Behavior-Driven Development Testing?](https://testingbot.com/software-testing-questions/what-is-bdd-testing "What is Behavior-Driven Development Testing?") ### [What is Shift-Left Testing?](https://testingbot.com/software-testing-questions/what-is-shift-left-testing "What is Shift-Left Testing?") ### [Learn more about Jest Testing](https://testingbot.com/software-testing-questions/what-is-jest-testing "Learn more about Jest Testing") ### [Learn about Gherkin and cucumber](https://testingbot.com/software-testing-questions/what-is-gherkin "Learn about Gherkin and cucumber")