Network Monitoring
- The 'Network Monitoring' tool lets developers dynamically view network activity on a site.
- For example you can start debugging a page in the web console, then switch to the network monitor to see network activity – all without reloading the page.
View page source
- Click the hamburger button at the top-right
- Select 'Web Developer' > 'Network'
- Click the stopwatch icon to
run the performance analysis tool.
The 'Network' tab loads the site twice. First with an empty browser cache, then again with a primed cache. This simulates the initial visit and a subsequent visit to the site.
Results are summarized in the table and as a pie chart.
- Click 'Back' to return to the network monitoring list
The network table contains the following columns:
- Status - The HTTP status code returned. Hover over the icon to see the exact code. Green color-coded icon - success (2XX codes), orange - redirection (3XX), or red for errors (4XX and 5XX).
- Method - Shows the HTTP request method.
- File - Shows the basename of the file requested.
- Domain - Shows the domain of the path requested.
- Cause – Reason the network request appeared. (XHR request, , script, script requesting an image, etc.)
- Type - Shows Content-type of the response.
- Transferred – Displays the number of bytes transferred to load the resource.
- Size - Shows the size of the response.
- Timeline - Displays a timeline for the different parts of each request.
Each column can be sorted by ascending or descending.
The toolbar will be displayed at the top of the pane and allows you to switch between different pages:
- Headers - Provides information about the request: URL, status code, the HTTP request and sent response headers.
- Cookies -Provides full details of any cookies sent with the request or response.
- Params - Displays the GET parameters and POST data of a request.
- Response - Displays the complete content of the response. Depending of the type of response, it will be displayed in HTML, JS, or CSS as text, JSON as an object, an image will be shown as a preview.
- Timings - Provides detailed timeline bar for the request showing how the total wait time is split into the various stages.
The developers can also sort their certain type of files by HTML, by JS, by XHR, by Fonts, by Images, by Media or by Flash type. Click the buttons in the Network toolbar to filter the list by type. This is also allows you to find out the total size and download time for a particular type of file.