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. Currently working on DNS Spy & Oh Dear!. Follow me on Twitter as @mattiasgeniar.

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 - Reply

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.


wzy Friday, October 9, 2015 at 20:18 - Reply

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?


LunarStudio Saturday, September 10, 2016 at 04:41 - Reply

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.


ScoopHappy19f Friday, February 10, 2017 at 19:16 - Reply

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.


Leave a Reply

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

Inbound links