Chrome Developer Tools Connection ID

Question

I am using Chrome Developer tools (version 49). Under the Network tab, there is a series of columns such as Name, Status, Type..etc. Does anyone know what the purpose of the Con

Answer 1

HTTP uses a networking protocol called TCP behind the scenes. Browsers maintain pools of TCP sockets and connections. The Connection ID numbers in DevTools refer to a particular TCP connection. Why are they useful? Well, from this post by Umar Hamsa (a Google Developer Expert):

The new Connection ID Network Panel column in Canary can help indicate to you that a TCP connection was reused instead of handshaking and establishing a new one.

Let me explain what this means:

• The first time you see a particular connection ID, a new connection will (probably) need to be established via a so-called TCP handshake. This is important for performance reasons because a TCP handshake can incur a relatively large networking overhead. We're creating a new connection and so it takes a little longer to get the HTTP response.

• However, for the subsequent times that you see that same ID, this overhead will not be incurred. That is, the browser not need a perform a TCP handshake and will reuse that same connection. Here we say the TCP connection is still "open". Already established connections get the HTTP response data more quickly.

So these numbers basically help check/debug if there is an networking overhead caused by TCP handshakes.

---

For example:

Name      Connection ID    (TCP Handshake / Reused Connection)
foo.jpg   72218            Handshake
bar.jpg   72218            Reused
cat.jpg   79146            Handshake
baz.jpg   72218            Reused
dog.jpg   79146            Reused

Here, there's an overhead involved in downloading foo.jpg and cat.jpg because a TCP handshake is required to setup connections 72218 and 79146 respectively. However bar.jpg, baz.jpg and dog.jpg do not have an overhead because they are reusing their respective TCP connections.

---

Note 1: This idea of reusing of a TCP connection to avoid repeated TCP handshakes is a feature of HTTP 1.1 called Persistent Connections. All HTTP 1.1 connections use persistent connections by default and all modern browsers use HTTP 1.1. For more information, I recommend reading Chapters 11 and 14 of the High Performance Browser Networking book.

Note 2: If a TCP handshake was needed for a HTTP request, you'll see an orange bar in the DevTools waterfall and, if you hover over it, you'll see "Initial connection" - this tells you how long the handshake took in milliseconds. TCP connections may be reused across tabs and windows so watch out -- you might see an ID for the first time but it may not have a TCP handshake! This likely because you visited the page previously and opened a connection with that host. It may also be because Chrome prefetched a resource from the host -- Chrome prefetches a favicon for example when you type an address in the bar.

Note 3: In newer versions of Chrome, you can view a list of the HTTP connections at chrome://net-internals/#http2 where the connection id and hosts are shown.