Laptops

How to Inspect an Element on a Chromebook Laptop?

Inspecting elements is useful in many ways as through inspect elements you can view and edit source code of any page of any website. The web elements can be inspected on any browser or a laptop. This guide is about how to inspect-element on a Chromebook.

Importance of Inspecting a Web Element

Inspecting element is useful in many ways as you can:

  • See the source code of the webpage
  • Perform the debugging
  • Search the Keywords
  • Edit CSS, HTML files to change web page
  • In console panel you can check the new features
  • Download the images
  • You can see hidden information

Ways to Inspect Web Elements on Chromebook

Google Chrome is the default browser on Chromebook. There are three different ways through which the web pages can be inspected in your Chromebook:

  1. Through Developer tools option
  2. Through Keyboard shortcut key
  3. By using mouse or touchpad

1: Through Developer Tools Option

The “Developer tools” is known as the element panel which allows you to change your page from the front end. It also allows you to see the changes directly on your page without implementing them. You can inspect your website on the Chromebook using developer mode.

To open the Developer tools on your Chromebook by following these steps:

Step 1: Open the Chrome browser on your Chromebook:

Step 2: Click on the three dots icon in the Chrome browser:

Step 3: Click on more tools and select developer tools:

Step 4: This will open the developer mode where you can see source code of the webpage:

2: Through Keyboard Shortcut Key

Keyboard shortcut is the easiest method to inspect on Chromebook. If you open any website and any element on the page grabs your attention, and you are curious about knowing about that element then Press the Ctrl+Shift+I to open the Developer tools and inspect that element.

3: By using Mouse or Touchpad

You can use the inspect element to play with web code on the screen directly. It is the detailed information of the page, its design and style. If you want to change any element or style, simply open the website and right click on the page and select the Inspect option from the menu. A developer tool will be open where you can change the text according to your preferences.

How to Unblock the Inspect Element Option on Chromebook?

There is no specific method to unblock the inspect element on Chromebook. Mostly in school’s Chromebook administration blocks the inspect element, in this case contact the administrator to enable the inspect element or you can also purchase a personal Chromebook.

Another way to unblock the inspect element on Chromebook is to disable the JavaScript option. Follow these steps to block the JavaScript:

Step 1: Click on the three-dot option to open the Settings of the Chrome browser:

Step 2: Search for javascript and click on Site Settings:

Step 3: Navigate towards the JavaScript option:

Step 4: In the last step select Don’t allow sites to use Javascript, this will turn off the JavaScript option for all websites.

Note: You can shut off the JavaScript option for some specific websites by selecting the customized behavior and click on add site:

Now the inspect option will be available when you right click on any website.

Conclusion

Inspect element is a developer option through which you can check and modify web code and make changings according to you. This option is also used to debug the web code. If you don’t have knowledge about inspecting web elements, then this article will be really helpful for you.

About the author

Zainab Rehman

I'm an author by profession. My interest in the internet world motivates me to write for Linux Hint and I'm here to share my knowledge with others.