Wednesday, 24 January 2018

How to Inspect Element on Chrome

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.

Edit10-Second Summary

1. Open any website on Chrome.
2. Right-click an element on the page.
3. Select Inspect.

EditSteps

  1. Open Google Chrome on your computer. 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.
    Inspect Element on Chrome Step 1.jpg
  2. Click the three vertical dots icon. 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.
    Inspect Element on Chrome Step 2.jpg
  3. Hover over on the drop-down menu. A sub-menu will pop up.
    Inspect Element on Chrome Step 3.jpg
  4. Click on the More Tools sub-menu. This will open the Inspector column on the right-hand side of your browser window.
    Inspect Element on Chrome Step 4.jpg
    • Alternatively, you can open the Inspector with a keyboard shortcut. This shortcut is on Mac, and on Windows.
  5. Hover over an element on the Inspector column. Moving your mouse to an element or a line in Inspector will highlight the selected element on the web page.
    Inspect Element on Chrome Step 5.jpg
  6. Right-click an element you want to inspect on any web page. Your right-click menu will pop up in a drop-down box.
    Inspect Element on Chrome Step 6.jpg
  7. Select on the drop-down menu. This will scroll the Inspector column up or down to the selected element, and highlight its source code.
    Inspect Element on Chrome Step 7.jpg
    • 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.

No comments:

Post a Comment