CODEWITHSUNDEEP
javascriptfirefoxfirebug
chobo2
chobo2

Reputation: 85765

how to check if a file is gzipped or not in firefox/firebug

I am using a compression library for my js and css files. However according to yslow the file that it generates is not gzipped but it should be. So I want to verify this myself but I don't know how.

How do I do this in firefox or firebug?

Upvotes: 29

Views: 21278

Answers (4)

Rafeeque
Rafeeque

Reputation: 933

For those who look for the same in Chrome, just check the Content-Encoding from the Response headers in network tab

enter image description here

Upvotes: 4

elbowlobstercowstand
elbowlobstercowstand

Reputation: 3951

How to check if a file is gzipped in Firefox’s Dev Tools (HINT: see warning in step 7)

Did you get here from Google and you're NOT using Firebug? Here’s how you find if a file is gzipped via Firefox’s Dev Tools…

  1. Turn on dev tools from the menu: Firefox > Tools > Toogle Tools or on Mac press ⌘⌥i
  2. Click Network tab.
  3. Press Reload button or on Mac ⌘r
  4. Click on the file you want inspect in the big list that shows up. (You can filter file types by clicking on one or multiple tags. e.g. HTML || Images || CSS etc…)
  5. Notice the pane that pops up on the right. Make sure the Headers tab is highlighted.
  6. Scan the Response Headers pane (top) for Content-Encoding: "gzip"
  7. If you do NOT see Content-Encoding: "gzip", don't give up! Make sure the status code of the resource (aka file) you've selected is showing as 200 and not 304 in the list on left. WARNING: 304 resources do NOT display their content encoding in FF’s dev tools. (using FF Developer Edition 50.0a2 right now). Proceed to step 8 to "fix" this.
  8. Clear your cache and get the resource straight from the server. Go to menu Firefox > History > Clear Recent History…. Make sure the Clear Cache box is selected. Press Clear Now.
  9. Reload the page. All the resources should now show up as 200—they're fresh. That means when you inspect a resource, you'll see whether it's gzipped or not.

Happy coding!

Upvotes: 5

Arun Pratap Singh
Arun Pratap Singh

Reputation: 3646

I you are using mozilla use firebug network profiler to see actually the size of your file getting reduced and to cross check click on the link to see the request and response header having:

Content-Encoding: gzip

By the way if you are using tomcat then you can use tomcat inbuilt feature to do gzip compression. add comression = "on" in server.xml [most of the server have compression support.]

<Connector port="8443"
      compression="on"
      compressionMinSize="2048"
      noCompressionUserAgents=""
      compressableMimeType="text/html,text/plain,text/css,text/javascript,text/json,application/x-javascript,application/javascript,application/json"
    />

Upvotes: 1

laher
laher

Reputation: 9110

You can tell by looking at HTTP Response Headers - look for 'Content-Encoding: gzip'

You can probably tell by drilling into the Net tab in Firebug, but I always used to use the Web Developer Toolbar (a Firefox extension) for checking response headers. There is also a lesser-featured extension called Live HTTP Headers. https://addons.mozilla.org/en-US/firefox/addon/3829/

Alternatively, you can google for a website such as this, to check for you:

http://www.gidnetwork.com/tools/gzip-test.php

hth

Upvotes: 39

Related Questions