View the HTTP/SPDY/HTTP2 Protocol in Google Chrome

Mattias Geniar, Saturday, January 10, 2015 - last modified: Friday, September 25, 2015

A cool little improvement just landed in Chrome Canary (the nightly builds of chrome) in version 41 that allow you to show which HTTP protocol was used to retrieve resources in the Network Tab of the inspector. Update: this feature is now available to everyone in Chrome, it's been added to the main releases.

The current "stable" version of Chrome is 39, so it'll take a few weeks before version 41, that contains this feature, will be generally available.

To use it, you first need to enable it: open the DevTools by right-click any page and choosing "Inspect Element". Go to the network tab, right-click the columns in the and enable the "Protocol" column.

chrome_enable_protocol

Once enabled, refresh the page and it'll show you what protocols each resource are using.

chrome_view_protocols

A quick reminder;

  • HTTP/1.1: the "classic" HTTP protocol, known and loved for over 15 years
  • SPDY/3.1: Google's first version of the HTTP/2 spec, formed the basis of HTTP/2
  • H2-14: H2 stands for "HTTP 2", the 14 will refer to "draft 14" since the HTTP/2 spec isn't final yet
  • H2C-14: H2C stands for "HTTP 2 Cleartext", the HTTP/2 protocol over a non-encrypted channel

This new column will definitely be useful when HTTP/2 becomes mainstream.


Hi! My name is Mattias Geniar. I'm a Support Manager at Nucleus Hosting in Belgium, a general web geek, public speaker and podcaster. Currently working on DNS Spy. Follow me on Twitter as @mattiasgeniar.

I respect your privacy and you won't get spam. Ever.
Just a weekly newsletter about Linux and open source.

SysCast podcast

In the SysCast podcast I talk about Linux & open source projects, interview sysadmins or developers and discuss web-related technologies. A show by and for geeks!

cron.weekly newsletter

A weekly newsletter - delivered every Sunday - for Linux sysadmins and open source users. It helps keeps you informed about open source projects, Linux guides & tutorials and the latest news.

Share this post

Did you like this post? Will you help me share it on social media? Thanks!

Comments

Jacob Share Friday, October 9, 2015 at 09:35

Thanks for this. Posted to /r/nginx.

When I try it on my site, Chrome shows that some of my site is served over H2 and some over SPDY, but of course, this can only happen if nginx is configured for HTTP/2 and not SPDY. Still, I wonder why it isn’t all served over H2.

Reply


    Mattias Geniar Friday, October 9, 2015 at 10:21

    When I try it, it all shows up as H2. I’m not sure why it would still be reporting as SPDY, maybe some kind of caching bug in the inspector?

    Reply


wzy Friday, October 9, 2015 at 20:18

Does ngx_pagespeed interfere with SPDY/3.1?

I have spdy enabled in the appropriate server block along with pagespeed. I did the check at http://spdycheck.org and it says SPDY/3.1 is enabled.

However, when I perform the check, every local resource say HTTP/1.1. Am I missing something?

Reply


    Mattias Geniar Saturday, October 10, 2015 at 13:00

    That should be able to work together, enabling SPDY or HTTP2 as well as ngx_pagespeed seemed to work in my tests.

    How are you testing it? By checking the protocol in your Chrome devtools, or by using an online check?

    Reply


LunarStudio Saturday, September 10, 2016 at 04:41

Some of the online checkers such as KeyCDN only let you know if your server is capable. I get positive hits for it on my non-SSL websites. Doesn’t let you know if they’re properly delivering the HTTP/2 headers. In fact, one of my Full SSL sites that should work is only showing 1.1 is being delivered when using other checks.

As for SPDY and HTTP/2 both working together, the SPDY would be fallback for unsupported browsers. My limited understanding is that HSTS has to also be enabled in order for that to be supported. HSTS has some very strict security parameters and can make development difficult.

Reply


Leave a Reply

Your email address will not be published. Required fields are marked *

Inbound links