Debugging Nginx and Django: Viewing HTTP headers in Google Chrome

It seems like every time I setup a new Django project, I spend an inordinate amount of time getting the site and admin media (IMG, CSS, JS) to display correctly in my templates.

It doesn’t help that I haven’t standardized on a best-practices Django layout. Dreamhost shared servers require one site structure while the Linode StackScript I use (thanks Filip) suggests another. A move from Django 1.2 to 1.3 hasn’t helped either.

On my home development environment (Debian in VirtualBox on Windows), I use Nginx to serve static media for my Django development server. Although this improves my dev server performance, it complicates the setup of a new environment.

Recently, I was struggling to get Nginx in front of Django for a new project. To help with debugging, I wanted to see the headers returned by Nginx. My Nginx configuration adds a “X-Static” header which returns a “hit” or “miss” to indicate if Nginx served the media.

To see the HTTP headers in Google Chrome, first pull up the Developer Tools pane (Control-Shift-i or Tools > Developer tools):

Next, click the “Network” button in the top row and then the page url in the left pane:

You can now see the response headers returned from the server, including my custom headers. For reference, this is my Nginx configuration:

[sourcecode language="html"] server { root /home/mitch/projects/polurls.com/app/webapp/; listen 8081; server_name polurls; gzip off; location = /favicon.ico { rewrite "/favicon.ico" /media/static/img/favicon.ico; } proxy_set_header Host $host:$server_port; location / { if (-f $request_filename) { add_header X-Static hit; access_log off; } if (!-f $request_filename) { proxy_pass http://192.168.1.3:8082; add_header X-Static miss; add_header X-Mitch Hello_world; } } }[/sourcecode]

When debugging, I find it helpful to use “add_header X-Mitch $request_filename” to see what Nginx is trying to load.