How to Inspect Element on Chrome

Reviewed by Luigi Oppido

Last Updated: November 24, 2022 Tested

This wikiHow teaches you how to inspect the HTML source code of a visual element on any web page on Google Chrome, using a computer.

Steps

Download Article

{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1.jpg","bigUrl":"\/images\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

The Chrome icon looks like a colored ball with a blue dot at the center. You can find it in your Applications folder on a Mac, or on your Start menu on Windows.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2.jpg","bigUrl":"\/images\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

This button is located next to the address bar in the upper-right corner of your browser window. It will open a drop-down menu.

Advertisement
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3.jpg","bigUrl":"\/images\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

A sub-menu will pop up.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4.jpg","bigUrl":"\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-4.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

4
Click Developer Tools on the More Tools sub-menu. This will open the Inspector column on the right-hand side of your browser window.
- Alternatively, you can open the Inspector with a keyboard shortcut. This shortcut is ⌥ Option + ⌘ Cmd + I on Mac, and Ctrl + Alt + I on Windows.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5.jpg","bigUrl":"\/images\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-5.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

Moving your mouse to an element or a line in Inspector will highlight the selected element on the web page.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6.jpg","bigUrl":"\/images\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-6.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

Your right-click menu will pop up in a drop-down box.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7.jpg","bigUrl":"\/images\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/aid9521892-v4-728px-Inspect-Element-on-Chrome-Step-7.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

7
Select Inspect on the drop-down menu. This will scroll the Inspector column up or down to the selected element, and highlight its source code.
- You don't have to manually open the Inspector column to do this. Selecting Inspect on the right-click menu will automatically open the Inspector.

Community Q&A

Search

Add New Question

Question

How do I inspect elements on a Chromebook?

Aidan Howarth

Community Answer

The instructions in the article should work on Chromebooks.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 40 Helpful 20
Question

How do I inspect an element on Chrome with only my touchpad?

Jack Atkinson

Community Answer

Place two fingers on your touchpad and the same options will appear; click on the Inspect option and on the right hand side there will be your Inspect Element.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 17 Helpful 14
Question

Can I change my details permanently after inspecting elements on Chrome?

Community Answer

No. You can only temporarily change details that are seen on your screen only. If you are to reload the page the correct words will be on the screen.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 10 Helpful 10

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

Submit a Tip

All tip submissions are carefully reviewed before being published

Submit

Thanks for submitting a tip for review!

Log in

How to Inspect Element on Chrome

Steps

Community Q&A

Tips

You Might Also Like

About This Article

Is this article up to date?

Quizzes

You Might Also Like

Featured Articles

Trending Articles

Featured Articles

Featured Articles

Watch Articles

Trending Articles

Explore Categories