A Quick Introduction to the Network log.

no img

Author : Narhari Kale.

Published On : 13-Aug-2021

The Chrome dev tool is very useful for debugging, Network diagnosis, and app performance. We may also use it as a code editor to write, cut, copy and paste HTML elements. It also provides some features to check responsiveness for mobile or small display size devices.

There are many topics in each tab that we can write a blog on each of those. The network tab also has many sections, but we are covering only Network log. A network log is a section in the Network tab where it logs all network activity. In this blog, we are answering the following questions.

  • What is a Network log?
  • Various headers in Network log.
  • How to inspect a single resource request?

    • What is network log

    It is a section in the network tab which shows all the Network resources that are requested. It's in a row and column format. Each row has individual network resources and the column shows additional resource information.

    no image

    You can open dev tools by pressing "ctrl + shift + J" for windows and then click on Network tab. The red region of the above image displays the network log. Which consists of rows and columns. Each row displays a single network resource that is requested and a column represents the information related to this resource.

    Headers of Network log

    The network log is made up of the following default columns: Name, State, Type, Size, Time, Initiator, Waterfall. There are a lot more headers but they are hidden. This can be found by right-clicking on the header.

    no img
  • Method - These are HTTP methods that indicate the intended action to be carried out on a resource. Common methods are GET, PUT, POST, DELETE.
  • Status - This is the HTTP response code issued by the Server to the client's requests. 200 stands for OK and 400 means bad request. There are so many status codes are available you can learn about them here
  • Type - It is a type of resource, We usually use XHR or fetch.
  • Initiator - It shows why this resource was requested. By clicking on the resources, it takes you to the actual code which caused this request to run.
  • Time - This indicates the time required to complete a request.
  • Size - Actual size of requested resource.

    • Inspect single resource

    Click any resource in the Name column and it opens a new tab. This tab consists of Network headers, preview, response, initiator, and timing. We will discuss them one by one, with respect to the last resources.

    no image

    We are inspecting the last resource in the above image, so it shows more info about that resource.

  • headers - It shows more information about general headers, request headers, and response headers.
  • Preview - It is just a preview of what is requested.
  • Response - response and preview are the same but it shows extra info about what we received in response
  • Initiator - It displays which line of code initiated this request. it also shows the source code and file.
  • Timing - It shows a detailed overview of network activity for this resource.

    • To get a better understanding, you can experiment with this demo

    The Chrome dev tool has plenty of concepts to learn, we've just covered only a few of them. If you come across any mistakes(errors) or want to provide feedback,please free to DM 👇.