How to Inspect Element on Chrome

This wikiHow teaches you how to visually inspect the HTML source code of any web page using Google Chrome on your computer.

Steps

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/32/Inspect-Element-on-Chrome-Step-1.jpg/v4-728px-Inspect-Element-on-Chrome- Step-1.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/32/Inspect-Element-on-Chrome-Step-1.jpg/v4-728px-Inspect- Element-on-Chrome-Step-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Open Google Chrome on your computer. The Chrome app has a multicolored globe icon with a blue dot in the middle. You can find it in the Applications folder on Mac or the Windows Start menu.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/94/Inspect-Element-on-Chrome-Step-2.jpg/v4-728px-Inspect-Element-on-Chrome- Step-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/9/94/Inspect-Element-on-Chrome-Step-2.jpg/v4-728px-Inspect- Element-on-Chrome-Step-2.jpg”,”smallWidth”:460,”smallHeight”:343,”bigWidth”:728,”bigHeight”:543,”licensing”:”<div class=”mw-parser -output”></div>”}

Click the three vertical dots icon. This button is next to the address bar in the upper-right corner of the browser window. A menu will drop down.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c4/Inspect-Element-on-Chrome-Step-3.jpg/v4-728px-Inspect-Element-on-Chrome- Step-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/c/c4/Inspect-Element-on-Chrome-Step-3.jpg/v4-728px-Inspect- Element-on-Chrome-Step-3.jpg”,”smallWidth”:460,”smallHeight”:348,”bigWidth”:728,”bigHeight”:550,”licensing”:”<div class=”mw-parser -output”></div>”}

Hover the pointer over the More Tops item on the drop-down menu. A sub-menu will pop up.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a8/Inspect-Element-on-Chrome-Step-4.jpg/v4-728px-Inspect-Element-on-Chrome- Step-4.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/a/a8/Inspect-Element-on-Chrome-Step-4.jpg/v4-728px-Inspect- Element-on-Chrome-Step-4.jpg”,”smallWidth”:460,”smallHeight”:342,”bigWidth”:728,”bigHeight”:541,”licensing”:”<div class=”mw-parser -output”></div>”}

Click Developer Tops on the More Tops submenu. The Inspector column will appear on the right side of the browser window.

Or you can open the Inspector window with a keyboard shortcut. Press ⌥ Option + ⌘ Cmd + I on Mac and Ctrl + Alt + I on Windows.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/Inspect-Element-on-Chrome-Step-5.jpg/v4-728px-Inspect-Element-on-Chrome- Step-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/f/f3/Inspect-Element-on-Chrome-Step-5.jpg/v4-728px-Inspect- Element-on-Chrome-Step-5.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth”:728,”bigHeight”:547,”licensing”:”<div class=”mw-parser -output”></div>”}

Hover over an element in the Inspector column. When you hover over an element or line in the Inspector window, that element will be highlighted on the web page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e8/Inspect-Element-on-Chrome-Step-6.jpg/v4-728px-Inspect-Element-on-Chrome- Step-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/e8/Inspect-Element-on-Chrome-Step-6.jpg/v4-728px-Inspect- Element-on-Chrome-Step-6.jpg”,”smallWidth”:460,”smallHeight”:342,”bigWidth”:728,”bigHeight”:542,”licensing”:”<div class=”mw-parser -output”></div>”}

Right click on the element you want to inspect on the web page. The right-click menu will pop up in the drop-down box.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0a/Inspect-Element-on-Chrome-Step-7.jpg/v4-728px-Inspect-Element-on-Chrome- Step-7.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/0/0a/Inspect-Element-on-Chrome-Step-7.jpg/v4-728px-Inspect- Element-on-Chrome-Step-7.jpg”,”smallWidth”:460,”smallHeight”:342,”bigWidth”:728,”bigHeight”:542,”licensing”:”<div class=”mw-parser -output”></div>”}

Select Inspect from the drop-down menu. The Inspector column will scroll up or down to the selected element and highlight its source code.

It is not necessary to open the Inspector column to perform this operation. When you select Inspect from the right-click menu, the Inspector tool opens automatically.

Steps

Related Posts