A lot goes into building a webpage. If you're curious about what's behind a specific element on a page, you might want to view the code. Like a Windows laptop, you can inspect the elements through the developer tools option on your great Chromebook or one of the many ChromeOS tablets. And there are two ways to do it.

If you're using a Chromebook managed by a school or business, the inspect element function might be blocked, and you'll be unable to follow the steps in this guide. There's no way to unblock it without asking the administrator first. Inspect elements might be blocked for your security and to prevent reverse engineering and cheating on online exams.

How to inspect elements on a Chromebook through developer tools

Web developers and more advanced ChromeOS users might want to inspect the element on a Chromebook through the developer tools menu. This simple menu on ChromeOS lets you dive deeper into what's on a webpage. It's not super hidden, but here's how you can find it.

  1. Click on the three dots next to your profile icon in the Chrome menu bar.
  2. Choose the More tools option.
  3. Choose Developer tools.
    Inspecting an element on ChromeOS
  4. A console will open on the right side of the webpage, showing you the code of the website you're on.
  5. At the very top left of this console, you'll see a square icon with a mouse. Click it. You also can press Ctrl + Shift + C to trigger the function.
  6. You'll now be able to hover the mouse to wherever you want on the webpage, and the code for that specific element will appear.
    ChromeOS inspect element menu open
  7. Click on the area you're hovering on to see the code in the console on the right.

You can also avoid this menu entirely by just triggering it automatically with Ctrl + Shift + I on your keyboard.

Inspect elements on a Chromebook by using a mouse or touchpad

Like other web browsers, Chrome lets you inspect elements using just your mouse or touchpad.

  1. Hover your mouse over the part of the webpage you want to inspect.
  2. Right-click in that area.
  3. Choose Inspect from the menu.
    Inspect menu in the Chromebrowser
  4. The Chrome developer tools menu will open.
  5. Click on the square icon with a mouse at the top of the menu. You also can press Ctrl + Shift + C to trigger the function.
  6. Hover over the area you want to inspect, and you'll see the code appear.
  7. Click on the element to be taken to that line of code in the console.

It doesn't take much to inspect the element on a webpage on a Chromebook. There are two easy methods, as long as your administrator has enabled them. If you want to learn more about ChromeOS, check out our guides on how you can change your wallpaper every day and how you can remote into a Chromebook.