How to Open Developer Tools in Chrome? (with Images)

Are you searching for the developer tools in chrome browser? Well, the developer tools (DevTools) are the set of tools that helps you to inspect the currently loaded HTML, CSS, and JavaScript which helps you to get the internals of the chrome browser and their web application.

Developer tools are generally used to track the layout of the webpage. The developer tools also let you inspect the styles that are used in the webpage, the size of the images on the webpage and also the script of the webpage.

With the help of developer tools, you can change the styles of the webpage to see what effect they show on the website thereby it gives you access to the internal working of the web browser.

In this section, we will discuss a few methods to open DevTools in Chrome.

Steps to Open Developer Tools in Chrome

Method 1 of 3 Using Chrome’s Menu

Step 1: Open your chrome web browser and click on the menu icon denoted by three vertical dots, as you can see in the image below. From the displayed menu you have to click on the ‘More tools’ option.

Step 2: The ‘More tools’ option will lead you to the ‘Developer tools’ option.

When you will click on the ‘Developer tools’ option the developer tools user interface will get displayed on either the right, left or bottom of your Chrome window. This developer tool panel will let you access different parts of the DevTools user interface.

Method 2 of 3 Using Inspect Option

Step 1: Open your web browser go to the website of which layout or script you want to trace and now right-click on the website’s page. Now from the displayed option click on the ‘Inspect’ option.