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.
When you open this tool, it opens the developer tools menu on the Elements tab. There are many other tabs in this developer tools menu, but only two others are mostly used by the users. The first one is the Console one, this tab shows you the output and errors of javascript scripts, it is mainly used by developers to debug javascript. The second one is the Network tab, this one shows all the requests made by your web browser to the web server while loading a webpage. It’s useful to understand what are the components of the webpage, which one is taking so much time to load, and so on.
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
If you want to use the inspect tool on Chromebook to change the content of the webpage to take a screenshot or to make a joke, there is a trick to be able to enable the modification of the webpage. The trick is to enable on-page modification using javascript:
- Open Google Chrome and go to the webpage you want to modify
- On the URL of this page, you have to enter this :
javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0 - You can try to copy-paste it, but double-check that everything has been pasted and type the javascript command by yourself if it’s not.
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
javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0 - 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.
Access Javascript without inspect on Chromebook
If you were trying to access the inspect feature on Chromebook to either show to console output of your webpage or enter a javascript command, you can do it without inspect.
To show the console output, you can add a javascript script to the webpage you are developing to redirect the console output directory to the webpage. You have the full explanation on the StackOverflow website here, the trick is to overwrite the console.log() function and write the output inside an HTML div.
You can also enter some Javascript commands without the inspect tool or the console. You can enter them directly in the URL bar of Google Chrome, by adding javascript: in front of the command. For example, by entering javascript:alert("Hello World"); , a pop-up will appear on your screen. It can be a useful way to use Javascript commands while the inspect tool is unallowed on your Chromebook.
Author
Maxime Levesque is a technical engineer with more than 5 years of professional experience. He is an expert in computer and phones, mostly on Apple products. Maxime is also the founder of TechBrowser.
Post your comment