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
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
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.
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.
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.
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.
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.
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.
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.