Web Development Hub

hamburgers

Web Browser Inspector

An introduction into the benefits of using a browsers web inspector

Browser - Web Development Hub - Browser Inspector

What are web browser inspectors?

All browsers have an in-built inspector which allows you to inspect the code behind any website. It also has many other useful tools and features. By clicking on the styles for example you can change the values and test the code on the fly. Typically these also have a network section to provide a broken down review of how fast the website loads. Browser inspectors also have a console to debug you javascript code. This will also list a range of all the resources in use, like images and plugins. With all the major browsers simply press F12 to reveal the inspector.

All inspector split there tools into different sections, these tools can differ from one browser to another but the inspector will usually have some of the following features

HTML Markup / Elements

By clicking into the elements or markup you can see the HTML code for any website. This helps you understand how a website works. Usually it will show the main contents of the HTML and to dig deeper you can click into div or anything else to reveal the children. Usually if you click or hover on different parts of the markup this will be highlighted in the page itself to help you identify certain aspects of the page. Likewise the opposite can be done by hovering over the element on the page to reveal where this exists in the markup. When highlighted this will also show the elements 'id' or 'class' along with an explanation to the elements sizing, padding and margins

HTML Markup - Web Development Hub - Browser Inspector

CSS

From within the inspector you can change or the view the styling for the website or web application effortlessly. In the example below it shows an element being selected and then changing that elements background color to orange, as you can see the browser instantly changes the webpage accordingly. By viewing other sites code this can help you understand CSS and emulate it into your own work. Each property also has a tick button which you can tick or untick which will allow you to see what change that styling provides to the looks of the website.

CSS - Web Development Hub - Browser Inspector

Console

The two main aspects of the console is to debug your code to allow you to see where you are going wrong and the ability to change or interact the document by entering commands from within the browser window, this can save a lot of valuable time. In the image above this shows a command which saves all elements with a certain class into a variable and then changing the color of those elements by giving that class some style. If you stumble across any issues with your JavaScript code you can take a look at the console which will attempt to point you in the right direction.

Console - Web Development Hub - Browser Inspector

Sources

The sources tool allows you to see the entire contents of the page. This means you can check the soruces for all the sites stylesheets, scripts, html files, images and many other contents. Other things included could be plugins like jquery or adverts. This helps you understand the how the website works on the backend level. By clicking on each source it will open the file within the inspector as if you were opening the file on your own computer. It can also help you visualise the websites directories and where each file live.

Sources - Web Development Hub - Browser Inspector

Responsiveness

Most web browser inspectors will have a tool to help you to make your site responsive. This will allow you to easily resize the window to display what the website will look in all the different sizes. In many browsers you can also select from lots of different types of devices to see exactly what it would look like on any given device. This is ideal for seeing how it would be displayed on phone and tablets.

Resonsive - Web Development Hub - Browser Inspector

Network

Within the network section you can gather information of any part of your website which is dependent on a network operation. This can include times reports of how load your page loads and even goes as specific as how quick each file takes to load whether it’s an image, stylesheet or plug-in. If you aren’t satisfied to how long it takes for you website to load you can see what may be causing this. Some browsers even take a snapshot of each millisecond while your website loads to show you what a user may see or experience during visiting the site.

Network - Web Development Hub - Browser Inspector

Timeline

Timeline will allow you to record and analyse any activity within your web page which can in turn help you out with potential performance issues. Recording activity can be started by pressing the red circular record button. During recording every event is recorded and tracked and put into a visual table to help visualise the quality of the performance. On hovering over each event it will provide a breakdown of further information like duration.

Timeline - Web Development Hub - Browser Inspector

Resources

The resources area puts all the sites contents like images, stylesheets and scripts into folders to make it easier to find things. It will also show you all the cookie data saved in the browser for the website and also any databases the website may use. This is similar to the sources part of the inspector but it tidy’s the files into different area for convenience. You will also be able to quickly understand which fonts a website uses as the information sits within a ‘Fonts’ folder.

Resources - Web Development Hub - Browser Inspector

Security

The security tool will put a site to the test and evaluate how secure it is. It will split a websites contents into secure and non-secure. It also collates the files which have been cancelled or are unknown. For the secure content it can also provide some extra information like certificate and connection information.

Security - Web Development Hub - Browser Inspector

Audits

Audits will test the page in a number of ways, by clicking run it find ways for you to improve upon the network performance and also the web page performance. Some examples of what you may see are suggestions to remove unused class rules, specifying image dimensions and combining external JavaScript files. Any way the page could perform better will be picked up, by clicking into each suggestion the browser will provide you with more information to help you correct potential issues.

Audits - Web Development Hub - Browser Inspector