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


ScoopHappy19f Friday, February 10, 2017 at 19:16

http://senvital.pl/zadbaj-o-stan-akumulatora
Purchasing a used or new auto could be a difficult method unless you know what you are actually carrying out. By educating yourself about car store shopping before you visit the dealer, you could make stuff simpler for your self. The following tips can help your next shopping journey be more pleasurable.

Usually provide a technician alongside when looking for a new automobile. Car sellers are well known for selling lemons and you do not desire to be their up coming target. Provided you can not get yourself a technician to look at cars with you, no less than be sure that you have him take a look at last selection prior to buying it.

Know your restrictions. Before you begin shopping for your next automobile or pickup truck, choose what you can manage to pay, and follow it. Don’t overlook to incorporate desire for your estimations. You are likely to shell out about twenty percent as an advance payment also, so be well prepared.

Prior to seeing a dealer, know what type of vehicle you desire. Investigation most of you options prior to shopping in order to figure out what works best for your finances and family requires. Do your homework to find out exactly how much you need to pay for any potential auto.

Before signing any agreement make time to read each line, like the fine print. If you have anything at all detailed that you do not recognize, usually do not indication till you have an response which you recognize. Unsavory salesmen may use a contract to put many service fees which were not talked about.

Should you keep the previous assistance at heart the next time that you go buying a auto, you will be more likely to get a better offer. Purchasing a auto lacks to become headaches. Just use the ideas using this article and you could obtain the car you need with a great cost.

Reply


Leave a Reply

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

Inbound links