Do you have a question about how to view the source code of the visual element on your Chromebook? To do this you can use the special DevTools in the Google Chrome app, or on any browser page. The DevTools are a list of special developer tools that are built into the Google Chrome browser. It allows users to edit pages on the go and keep track of possible problems.
How to use Inspect Element on Chromebook
For Chromebooks the default browser is Google, to open the developer tools on this device you need.
- Open the page you want
- Click on the 3 dots in the upper right corner of the application
- Select “More Tools“
- Click on “Developer Tools“
Alternative ways of accessing this function are to press the F12 button or right-click on the desired item
This is a universal instruction that applies to most browsers on Windows or any other system.
How to use Inspect Element on Mac or Iphone
Is it possible to do the same using a Mac or even an iPhone? You’ll just have to follow a few simple steps below:
How to use it on Mac
If you have a Mac, your best browser choice is Safari. Opening the Developer Tools in this browser is slightly different from the same process in Chrome or Firefox. You will need to:
- Open the browser
- Click Safari on the tab name
- Select “Preferences“
- Then click on Advanced gear icon, it will be located at the top of the screen
- Check the box next to Show Develop menu in menu bar
Once you do this, Inspect Element will be available on your web pages. You can also call it with CMD + Option + I.
How to use it on iPhone
If you want to check how the mobile version of the webpage looks on your iPhone using the Inspect Elements feature, you will first need to enable the Web Inspector for your iOS device:
- Go to Settings
- Select the Safari app
- Scroll to the bottom and click on “Advanced Menu“
- Now turn on the checkbox next to “Web Inspector“
You also need to enable the Developer menu on your Mac as instructed above. Once you’ve enabled these features on your iOS device and Mac, you should be able to see the Develop menu at the top of your Mac. You need to click on it to see the attached iPhone and the web page open on it. When you switch to a different page, you also switch the Web Inspector window for that page on your Mac
What is Elemental Panel
The first thing to know is what the Element Panel is. If you want to change the design or any external elements of the page, you need to edit your CSS or HTML. You can do this using a developer tool called the Element panel. It will allow you to check and change your page from the front-end. Some of the elements you can see there are :
- Information about the image, such as its size and its source
- CSS panel – this option is used to change the external style of the page. You can change the parameters such as fonts, sizes, colors here
- DOM information or DOM panel with this option you can control the appearance of the page. You can change the position of elements and fully navigate to the HTML files
- Console panel presents the new features under the developer tools
- Element event listeners
- HTML comments
- Feedback
Inspecting the rendered and natural sizes of an image
Very often you need to know information about a picture on a web page, you can “inspect” it. This gives you the possibility to know the size of the image, for example. To do this you need to hover your mouse pointer over that IMG while you are in the DOM Tree
Inspecting particular used image from a source set (srcset)
Then you can check what version of the image was loaded and what is the exact srcset source. The srcset will help the browser to request the version of the image with the smallest size, which is slightly larger than the real image. This is used to view a set of images with different resolutions for the browser to choose from. First, select the IMG item, then check the $0.currentSrc information in the console. Note that you can increase the characteristics of images with srcset if you need to use devices with a higher DPI
