The Network Tab in Firefox provides information regarding various requests for the web page. The various types of information it provides are the request’s header, cookies, response, etc. You can also filter the requests or set network throttling.
Table of Content
Benefits of the Network Tab:
- Simple UI: The UI is very simple and has a very low learning curve. The various options and information it provides are directly accessible.
- Useful for Debugging: You can check the various resource download speeds for a variety of network behaviors. You can simulate a slow connection and also disable cache.
- Filtering options: You can filter the network requests and responses on the basis of the resource type or search the respective file in the filter bar. This will help you to check certain resource requests that you make.
- Various request information: The network tool provides various information about the selected resource. The information includes the HTTP header, cookies, request, timing, etc.
- Import and export logs: You can import the logs as a HAR file and save single or all logs as HAR files on your system using the network settings option. The file can be shared to be saved for later use.
How to open the Network Tab in Firefox?
The Network Tab is present in the DevTools of Firefox. To open it, you can use the shortcut “Ctrl+Shift+E” or right-click the page and select Inspect to open DevTools, and then navigate to the Network Tab.
Opening the Network Tab in Firefox
About the UI of Network Tab:
The tab provides various columns of the request, such as status, method, domain, file, etc. Above the tab, you will find various options to filter the request, disable caching, network throttling, etc.
1. Various Options:
The various option in the Tab are:
Various options in the Network Tab
- Clear: Click it to clear the logs.
- Filter URLs: It is a search bar where you can search for patterns in the URL and file.
- Filter File Type: You can also filter on the basis of various file types, such as HTML, CSS, JS, images, etc.
- Pause/Resume: Click it to pause or resume recording network logs.
- New Request: On clicking it, a network action sidebar with the New Request pane will open. You can create your own request with the respective method, URL parameters, headers, and payload body.
- Search: On clicking it, a network action sidebar with a search pane will open. You can search the header and content of all the listed requests.
- Request Blocking: On clicking it, a network action sidebar with a blocking pane will open. You can add a URL to block it from being used by the web page. There is a checkbox to toggle request Request Blocking.
- Disable Cache: If checked, then the cache will be disabled for the web page so that you can view all possible network requests for the web page.
- Network Throttling: You can emulate various network speeds by selecting from the drop-down list. This helps a lot for inspecting the loading of the web page at different network speeds.
- Network Settings: You get an option to enable persistent logs that helps to disable the log refresh when you reload or navigate around the page. You also get various import and export options that are Import the HAR file, save the All As HAR file, and copy All As HAR.
2. Request Details:
If you click a request in the logs, you get a sidebar with various panes with different details about the request. The various panes in the sidebar are:
Request Details Sidebar
- Headers: It provides various information about the method, response headers, and request headers. You have the option to filter the header information, block the request, or resend the request, which will open the network action sidebar.
- Cookies: The cookies for the request are displayed in this pane. You also get the option to filter the cookies.
- Request: The request payload information is displayed in this pane, and you also get to filter various request parameters.
- Response: The response data is present in this pane. You get the option to view the raw data and filter the properties.
- Cache: If the responded resource is cached, then this pane displays the cached information of the resource.
- Timings: It provides the breakdown timing information of the whole request process, such as DNS resolution, TLS setup, waiting, receiving, etc.
- Stack Trace: Provides a list of files that trace the call stack of the responses.
- Security: This provides various HTTPS information related to the connection, host, and certificate.
3. Additional Information:
At the bottom of the tab, you get a performance analysis option and various information, such as the number of requests, the size or transferred size of all requests, the total time needed to load all the requests, the time when the DOMContentLoaded event occurred, and the time when the load event occurred.
The performance analysis button, which looks like a stopwatch, is present in the bottom-left corner of the Network tab. It provides a pie chart and table for displaying request information when the browser cache is primed and when the browser cache is empty.
Addition Information at the bottom of the Network Tab
Showing usage of the Network Tab:
Let’s visit the GFG site and inspect various requests made by the web page.
Step 1: Using Firefox, visit the GFG site and open the Network tab.
Step 2: In the tab, filter out all CSS requests and check one request’s details.
Showing usage of the Network Tab
Conclusion:
To inspect and debug the various requests made by the web page, Firefox provides a very important tool, the Network Tool, for developers to check and simulate various network-related activities. The tool can be used to get request-related information and timing, which can be used to improve the performance and loading time of the web page.