How to Inspect Element on Chrome

You are viewing the article How to Inspect Element on Chrome  at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.

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.

READ More:   How to Detect a Leak in a Swimming Pool

{“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.

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

Thank you for reading this post How to Inspect Element on Chrome at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.

Related Search: