How would you like it if you could redesign your website with new fonts, your favorite color, an attractive image, maybe a little more bandwidth ? Well, Your Internet Browser has many surprise elements and one of them is the Inspect element that brings you closer to learning and applying your developing skills into giving your website or any website, for that matter a brand new look.
C’mon, lets see more on how to inspect on Chromebook.
Table of Contents
What’s Inspect Element ?
You can find a myriad of developing tools online to learn and hone your developing skills, but one powerful source you can find right in your desktop browser is the Inspect element.
It allows you to have a peek of the website’s source code and edit it to your taste. However, Inspect element is limited to only viewing and editing the frontend markup like the CSS, HTML and JAVA scripts.
Wait, what’s the point in designing a website if anyone can anytime edit it simply from their browser window right? Well, the Inspect element is merely a preview tool. You can play around and make all the changes you want from changing the text to adding cool pictures, but only for the session you are in. The changes are temporary and vanish once you reload the website, this way you don’t break your main website. The changes you make are limited to your computer only.
Why should you be using Inspect ?
No code is a flawless code! your website might have a few backlogs, it might be too slow to load, have unrelated pictures or You might just want a fresh look after a while. Inspect element, just allows you to analyze your website’s code and work with multiple changes to get the best possible result.
It is more like a practice canvas in which you can paint your imaginations and create a fair draft from your best work.
In other cases, you can simply analyze your competitors webpage, learn about the keywords they use, look how simpler their code has been made, and learn a few cool tricks that might help you in your development journey.
How to access the Inspect Element on Chromebook?
Inspect element can be accessed from your browser for any website you view. So to get started with it, open your Google Chrome on your Chromebook and open any website that you want to try editing.
From here there are a few ways to get your hands on the site’s source code. Here are the three ways to open Inspect from your browser:
- Through Developer Tool Pane:
Google chrome is the default browser in Chromebook. The inspect element can be viewed by navigating through the “developer tools” option available in the Chrome browser.
Step 1 : Open Google Chrome in Chromebook
Step 2 : On the right side of the website, Click on the hamburger menu (three dots) available
Step 3 : Select More tools option from the Dropdown list
Step 4: Click on Developer tools, and you have the source code ready to edit !
- Through Your Mouse:
In chromebook Laptop, you can access your Inspect element by just right clicking anywhere on your website.
Step 1: Go to the Website you want to edit,
Step 2: Just right click your mouse
Step 3 : and from the options that pop up , select the Inspect option available in the bottom-most options.
- Through Keyboard Shortcut:
Keyboard Shortcut is the easiest option to get your hands on a website’s design.
Step 1 : Go to the Website
Step 2: Press Ctrl + Shift+ I on your Keyboard
Step 3 : Start editing your Website already from the Inspect pane!
A little more about the Inspect element.
The Inspect feature doesn’t just display the source code, it has a few more panels and options to access for different actions.
- Elements :
The Elements tab , otherwise called the Inspector tab is the main window in the Inspect feature. This window allows you to access the CSS scripts specific to certain elements along with the source code of the page.
- Console:
Console allows you to add code snippets to the existing design , edit it to your idea and test run it.
- Network:
Every webpage works with a server-client system to access and display required data. The Network window allows you to view this server system and understand the requests like the POST, GET and many more.
- Performance:
The strength of any website lies in its performance metrics. The performance option in the Inspect element acts as a gauge to weigh your website’s performance in all aspects.
- Memory :
This aspect allows you to analyze the memory of your website. It lets you know how your website responds based on the history of its use. A few browsers have advanced metrics that help you analyze better.
- Application:
This panel gives you an insight on the site’s cache, background data, and other applications.
The Inspect option has many more options in them that you can add and explore.
All the personal Chromebooks let you use the inspect element , but some administrative Chromebooks may have the inspect element blocked in them. In those cases you will have to Contact your IT admin to get it unblocked.
In certain cases, you may try unblocking the Inspect element by disabling the Java Scripts in your Browser. To do this , follow the below Steps.
Step 1: Click on your Hamburger menu on Chrome in your Chromebook
Step 2: Go to Settings and search for Java Scripts
Step 3: Select the Site Settings option and navigate to Java Script
Step 4: Now disable the Java Scripts
You will now view the Inspect element on your Chromebook. Explore, Learn and have fun with it.
