An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Chrome Dev Tools: Networking and the Console
In Part 1 – Chrome Dev Tools: Markup and Style, we reviewed two panels: Elements and Resources. Moving on, now, we’ll take a look at the next two panels: Network and Console.
Network Panel
The Network panel gives us a view into the resources that are requested and downloaded over the network in real-time. Viewing network traffic isn’t the most glamorous activity – especially if you’re new to web development. However, performance becomes an important issue, as your site’s traffic increases. Identifying and fixing requests that take a long time to complete is an important step in optimizing a site.
An HTTP proxy, such as Charles Proxy, can give you a decent amount of information regarding your website’s network. That being said, the Network panel offers a surprising amount of detailed information; considering how it’s only a few clicks away, it’s certainly an excellent candidate for debugging network issues. The following is a screenshot of the Network panel when loading the Linkedin mobile site on a fresh page load:
$0
returns the currently selected element in the Elements panel.
- This button opens the Network panel. Be sure to open the tab before loading a page so that it captures the network requests (e.g. open a new browser tab, open up developer tools, open up the network tab and then finally load the URL to monitor)
- This row contains one resource with interesting information that I cover in the following points. The first column is the name and path of the resource. The resource name will show on the first line while the path to the resource shows on the second.
- The HTTP method used for the request.
- The HTTP status code returned by the server.
200
is a common response for a successful response; although anything within the range of 200-299 is considered OK. Notice how one of the above requests is in red. This is related to the HTTP response code, a 401 Unauthorized response, because I’m not logged in to the LinkedIn mobile site. - The content-type of a request. For example, in an HTTP POST (using the metrics resource as an example), the content-type in the request and response headers is:
application/json
; whereas, the main HTML page’s response headers contain a content-type oftext/html
. A small note on the application cache: when serving a manifest file, be sure to serve it with a content type oftext/cache-manifest
. When debugging, the “Type” column in the Network panel is the place to ensure it’s being served correctly! - The initiator is an interesting column; it allows us to see why a resource is downloaded. For example, you may see the __utm.gif file often in your debugging sessions; it is used by Google Analytics. The initiator shows as
ga.js:52
, a value infile_name:line_number
format. With this column, you can discover why, when, and how resources are downloaded. IfParser
is shown for the initiator, chances are good that the browser initiated the request upon seeing something like a<link />
or<script />
element in the document. - This displays the size of the resource, an invaluable piece of information. When building a site, be sure to regularly “sort by size” in the Network panel and ensure that your resource sizes are correct. It is sometimes considered a good practice to base 64 encode images and embed them in CSS files. This can reduce the number of HTTP requests, but it also increases your CSS file’s size. Large resources should be delayed as much as possible to provide a snappy experience for the user.
- This displays the amount of time it took to retrieve the resource. Resources served from a different domain may take longer to download than other resources served from another origin.
- DOMContentLoaded (an event we can listen for using JavaScript) fires once the DOM is ready.
- The Load event which fires when the DOM is ready and resources have finished loading.
- Timeline view of network requests. You can hover over them for more information.
- Total size transferred, number of requests, and time taken.
- Icons to interact with the Network panel, such as clearing the panel of all requests and changing icon size.
- Useful network requests filters, e.g. you can control + click XHR and Images to only show network requests for an image resource or a request made with an XHR object.
- Headings for the network requests; you can click a heading to sort the requests by the data in the column.
Timing contains information on how long a request actually took to download.
Selected Resource Pane
Clicking on a request displays more information in a new panel, splitting the Network panel into two vertical panes.
Errors stand out from other console entries thanks to their red color and icon.
The Selected Resource pane has tabs within itself, such as Headers, Preview, Response, Cookies & timing.
- Headers contains the request and response headers.
- Preview contains a preview of the resource, for example a rendered image or some source code.
- Response is similar to Preview and shows what was received from the server.
- Cookies (if any) shows cookies sent with the request.
- Timing contains information on how long a request actually took to download.
You can close this pane by clicking on the small X in the top left corner of the this pane.
Headers
The Headers tab provides you with some interesting information, which can prove useful when debugging. It displays both the request and response headers.