Inspect elements on Chromebook allows you to view and temporarily edit the front-end HTML, CSS, and sometimes JavaScript code that makes up a website. This allows developers to debug and make changes to the website without affecting the backend. As the changes are only temporary, simply reloading the website will bring back the original website.
Besides, inspecting an element on Chromebook is practically the same as doing so in the Chrome browser. So, let’s see the different methods you can use to inspect elements on your Chromebook.
Using Right-click
The easiest way to inspect an element on a Chromebook is by using the right-click method. To do so, right-click on any element whose HTML code you want to see, and select Inspect.
However, this method won’t work on all websites, as some website owners may have disabled right-clicking on their websites to protect their content. In such cases, you can either enable the right-click feature or use the other methods on this list.
Using Shortcut Keys
Another easy method you can use to inspect on Chromebook is by using shortcut keys. The Ctrl + Shift + C shortcut key will directly take you to the elements tab which shows all the HTML code of the website.
If you want to inspect a specific element in the website quickly, you can click on the arrow and square icon beside the Elements tab. Then, click on the element you want to inspect, and it will directly show you the HTML code of that element.
Using Chrome Menu
You can also inspect elements on your Chromebook by opening Developer Tools from the Chrome menu. Here’s how you can do so:
- Click on the Chrome menu (vertical ellipsis icon) at the upper right.
- Select More tools, and click on Developer tools.
- Select the Elements tab to inspect the HTML and CSS code of the website.
- If you want to inspect a specific element, click on the arrow icon, and select the element you want to inspect.
Inspecting an element’s HTML and CSS code is only one of the functions of Developer Tools. If you would like to know more about using Chrome Developer Tools, you can check out our other article.
Why Can’t I Inspect on Chromebook?
In some specific cases, you won’t be able to access the Chrome Developer Tools, including its functions like inspecting an element. This is primarily so if you’re using a school or work Chromebook, and the administrator has blocked your access to Developer Tools.
If you’re using a personal Chromebook, you should be able to easily inspect elements using any of the methods above. However, to get this functionality back in your school or work Chromebook, you will have to contact your administrator for access.
While some sources on the web say you can unblock inspect elements yourself, they are simply showing a javascript code that allows you to directly edit a website’s content. This isn’t actually an inspect function, as you won’t be able to view or edit the HTML and CSS code of the website.
However, if you want to inspect elements on Chromebook for editing the contents of a website, this method can come in handy. Here’s how you can do so:
- Press Ctrl + Shift + O to open Bookmark Manager.
- Click on the vertical ellipsis icon beside the bookmarks search bar.
- Select Add new bookmark.
- Name the bookmark anything you want.
- Copy and paste this javascript code in the URL section:
j*vascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0
- Select Save.
- If you don’t see this bookmark appear below the address bar, go to Chrome menu > Bookmarks, and click on Show bookmarks bar.
- Now, you can go to a webpage you want to modify, click on this bookmark, and you can edit the contents of that webpage.
