Debugging CSS with Firebug

I’m working on a project involving Django, and I wanted to use Bootstrap 3 to make it look all nice and professional-like. The issue I had was that the jQuery and underlying CSS is so obscure, it wasn’t really worth trying to troubleshoot.

Enter Firebug.

One of my issues was that I wasn’t even sure that my /static/ files (where you store files like CSS and Javascript on a Django Project) wasn’t even configured correctly. I did see in the “CSS” tab of Firebug that it listed my CSS file, so I could tell it was finding it.

The real solution was that the CSS section was throwing a 404 error, as could be seen by clicking on the CSS file on the list.. it said something to this effect:

/my/static/path/bootstrap3js/bootstrap.min.css not found

I instantly new the problem. This line in my settings.py:

# The Bootstrap base URL
'base_url': '/static/bootstrap3',

Should have said this:

# The Bootstrap base URL
'base_url': '/static/bootstrap3/',

(Note the trailing slash). Once updating this, the page (and CSS) loaded perfectly. Even using the native Firefox debugging tools didn’t catch this. I’m definitely a convert now.

Leave a Reply