Network Monitor
A Network panel is used to make sure what all resources that are being downloaded or uploaded are being done as expected. It enables us to view the network requests made when a page is loaded. It tells how long each request takes, and details of each request. The monitor is empty when it is loaded, the logs are created once any action is performed while the monitor is open.
Each row of Network Logs does represent a list of resources. These resources are listed according to the following structure:
- Status: The HTTP response code.
- Type: The resource type.
- Initiator: The Initiator column is a hyperlink that takes you to the source code of the request.
- Time: Time is taken by the request.
- Timeline/ Waterfall: Graphical representation of the various stage of these requests.
Application:
- Inspecting the properties of an individual resource (HTTP headers, content, size).
- Checking Network request list
- View Network traffic recording
- Creating Performance analysis
- Inspecting web sockets
- Inspecting server-sent events
- To throttle the network speed
Browser Developer Tools
Every web-developer needs some basic set of tools for understanding the underlying structure of the code and enables us to inspect the web content. Developer tools are built directly into the browser. These are the tools that are browser dependent. Most of these tools are common among various browsers and do a range of things, from inspecting elements of a currently-loaded HTML, CSS, and JavaScript. With developer tools, we can directly interact with the source code that is fetched into the client side of our system. This article will explain such basic functionality of the browser’s devtools.
Across all browsers, the basic functionality of the developer tools remains the same, only naming conventions and terminologies changes. In this article, we would be focusing the majority of sections on two popular browsers Firefox and Chrome.