Debug JS Code with DevTool Network Tab
In this article, I discuss the use of the network tab in Chrome DevTool inspect. The network panel is really useful for timing the network resources and inspecting the network properties. To open the network tab, right-click on the application, select inspect; inside inspect find and hit the network tab to open the network panel.
Currently, the tab is empty because the recording of the network activity starts after opening the tab. It asks to hit refresh to reload the page to get some data populated. After reloading, the network tab displays multiple files, like image files, JavaScript files, stylesheet files, etc. Let’s go through some of the tools in the network tab.
Recording & Capture Screenshot
Starting from the top panel on the left side, the first button is called Stop recording network log. If you click the button, it will stop the subsequent requests (image or js files), if you hit refresh now, the network tab will be empty. Usually, it is best to keep the recording on.
Next, it is the capture screenshot; if you click the iron and refresh the page, it divides the loading time of the page, creates some fragments, and takes screenshots of that. This allows you to check the screenshot when the page loads, starting from the initial state to the rendering of the page.
Filter & All Features
The filter feature filters the network requests, such as XHR, JS, CSS, Img, Media, Font, Doc, WS, Manifest, etc. All these filter options are on the second panel. If you select JS, it will filter all the JS files, CSS will filter only the CSS files, Img option will filter all the images. Similarly, you can filter all the files by selecting “All”, which will display all the files. If you want to specifically check a certain file, you can filter it in the search bar. It can be filtered by the name of the file or the path of the file, so it filters even if the keyword you’re searching for is part of the path of a file.
Overview
Moving on to the overview, which is displayed by default. It shows your entire timeline, checks the activity of the requests at 500 ms, 1000 ms and so on. You can even select an area to check which request was made in that duration; all those requests will be filtered and displayed in the bottom panel. More filters can be added by selecting XHR, JS, CSS, Img, etc.
Group by Frame & Preserve Log
Group by frame clubs all the specific domain requests. All the requests are part of the particular domain that initiated it. The next feature is preserve log, usually whenever we refresh a page the login of the old requests gets removed and displays new requests. Now if you select the preserve log option, the old requests will stay and the new requests will be added. In order to test, try filtering a file and hit refresh. This should give you two entries, the last requested file, and the newly requested file.
Disable Cache & Throttling
Whenever the browser sends requests, the resource that is being frequently used, the network caches it. If we select disable cache, the network will get the call from the fresh request file instead of the file in the memory cache. Next, comes the throttling feature, it has options such as Fast 3G, Slow 3G, or a custom setting. Basically, if you want to check how your site performs in a slow network, use the slow option. This will help you to decide the changes you need to make to optimize the performance of the application.
More options to help analyze data are DOMContentLoaded and Load located at the bottom panel. These are events of the page lifecycle. The DOMContentLoaded event fires as soon as the DOM hierarchy has been fully constructed, regardless of the completion of the images, scripts, or links requests. The load event calls at the end when all the images and sub-frames have finished loading.
Checking Log of Requests
The request table displays all the requests and responses. Each file has a different status code, 200, 500, 300, 401, etc. It is important to know what some of these status codes indicate. Some of the status codes are, 400 bad request response ( indicates request sent to the website server is incorrect, and the server receiving the request can’t understand it), 401 unauthorized error (the request sent by the client cannot be authorized), 300 multiple choices (means the request has more one responses), 500 internal server error (means server cannot process the request for an unknown reason), 503 service unavailable (website is unavailable), 200 is okay (indicates request has succeeded).
Along with the status code, the request table also shows a column for the time it takes in milliseconds, size of the files, type of the files such as script, document, png, stylesheet, fetch, etc; another key feature is the initiator. If you filter image and click the given initiator of that request, it directly takes you to where this particular image tag is being used. You can add more columns for more data by a right-click on the top row of the chart. From the name column, if you select a request, you should be able to view the response in the response tag; if its a JavaScript file the response will be in JavaScript. Select the preview tab to view the same code in a proper structured form. Similarly, if you have a JSON data in response, you can view it in the preview in a more readable format. Selecting the headers tab, you can see what headers are being requested and returned from the server. It has the request URL, method (HTTP verbs get, post, patch, put and delete), returned status code, the remote address that is connected in the following port, response headers, and request headers. Response headers are what the HTTP request is returning from your web server and/or your CDN. Request headers are the headers that are sent when the browser makes the connection to your remote address.
These are some of the basics ways to analyze all the calls and debug your code in the network tab.
