How to inspect on Chromebook?
The inspect element tool can help you to debug a website or to understand it better. Here is how to use it on Chromebook.
The inspect element feature
First, we need to explain what the inspect element feature is on Chromebook as sometimes it is mixed up with the developer tools menu. And you might be looking for something different than this feature.
The inspect element feature is a tool that allows you to inspect a webpage by showing to you the HTML and CSS code and this webpage, and highlighting the corresponding section of the webpage when you are putting your mouse over an HTML tag. Clicking on a tag will give you the CSS classes and attributes of this tag. This feature also gives you all the information you need to debug and understand the HTML/CSS code of the webpage.
How to use inspect element on Chromebook
You can use the inspect element for Chromebook on Google Chrome, there are different ways to open the tool and the most common one is to:
- Open the Google Chrome application on your Chromebook
- Open the web page you want to inspect
- Right-click on the element you want to inspect or anywhere on the page, and Click on “Inspect” at the end to open the inspect element tool
Using the Developer Tools menu on Chromebook
Another way to open and use inspect element for Chromebook is to first open the Developer Tools menu. Here are the steps to do so:
- Open Chrome on your Chromebook and go to the webpage you want to inspect
- Click on the three dots tools menu at the top right of Google Chrome
- On the opened menu, click on More tools and then Developer Tools
- The Developer Tools window is now opened, to find the inspect element click on the Element tab.
There is no shortcut to directly open the inspect element feature but there is one to open the Developer Tools menu on Chromebook. To open it press Ctrl + Shift + j or just press F12 if it is available on your keyboard.
Why can’t I use the inspect element on School Chromebook?
Sometimes the inspect element feature can’t be used on School Chromebook, that’s because the feature is not allowed to be used by the students. The IT department of your School blocked it because they think it’s not a feature that the users should use, and you can’t change it in the control panel of your Chromebook.
At School, all the Chromebook are configured and managed in the same way. A server is managing the configuration of all the Chromebook, and on this server, the IT department can choose which feature should be enabled and what should be the configuration of each Chromebook. If you can’t use the inspect element on the Chromebook at School, that’s because the IT department of your school put the inspect element feature on the list of unallowed features.
How to inspect on school Chromebook if blocked?
If you have a good reason to use the inspect element feature on Chromebook and the IT department of your school blocked it, then the best thing to do is to ask them to unblock it. Today, programming and learning about computers are part of education, and the inspect element feature is really useful to understand how browsers work on computers, learn how websites are developed, and debug them. As you might be coding on Chromebooks, the IT department should understand it and allow more features on Chromebook.
If you have no good reason to use the inspect feature, there are some ways you can try depending on what you want to achieve.
Modifying the webpage content on Chromebook
- Open Google Chrome and go to the webpage you want to modify
- On the URL of this page, you have to enter this :
You can also create a bookmark to make the process easier, but it means that you need to be allowed to create a bookmark which is not always the case.
- Open Google Chrome
- Open the Bookmark Manager, click on the three dots at the top right then Bookmarks, then Bookmark Manager
- Right-click and the page and click on Add new bookmark
- Enter the name you want, and in the URL enter
- You can now enable on-page modification by clicking on the bookmark you just created.
To reset this, you only need to refresh the webpage.
console.log() function and write the output inside an HTML div.