PDA

View Full Version : How do you debug CSS and HTML


DWcourse
11-06-2010, 03:58 AM
A student recently asked what I think is a very good question that I didn't have a very good answer for:

How do you debug HTML and CSS?

I'm not talking about php or complex coding. I'm talking about straightforward HTML and CSS that isn't producing the layout or other results you want. Do you have a method for diagnosing the issues? Personally, after having done this for 15+ years, I can recognize a lot of issues because I've made the same mistake myself (usually several times).

But, of course, a noob isn't going to be able to do that. So what procedures for tracking down HTML/CSS issues would you recommend to someone just starting out?

And be aware, I plan on stealing your best ideas for a blog post.:twisted:

Corrosive
11-06-2010, 10:30 AM
Hi JC

Absolutely, totally, 100% Firefox! FF (combined with a bit of experience) can tell you exactly what is wrong with your HTML or CSS using the web dev tools suite and validator.

DWcourse
11-06-2010, 04:49 PM
Cor, I assume Firebug, but what other specific FF tools?

Corrosive
11-06-2010, 05:32 PM
I actually don't tend to use Firebug. This is what I mean; http://chrispederick.com/work/web-developer/

DWcourse
11-06-2010, 06:33 PM
I'd overlooked that one. It's pretty impressive looking, I'm checking it out now. Thanks

Corrosive
11-06-2010, 06:46 PM
You are welcome. CSS >> View Style Information is a godsend when stripping back or or doing a major rework on a template.

Corrosive
11-06-2010, 06:48 PM
Actually thank you for sending me back to his site because I now have web dev for Chrome. :D Happy days

gentleone
11-07-2010, 03:48 PM
Firebug can also be a handy tool to debug HTML and CSS. Here is a screencast with an example how to debug and live edit some CSS positioning from icons.
http://www.komodomedia.com/blog/2010/06/using-firebug-to-live-edit-css/

ranjan
11-07-2010, 10:19 PM
I have to debug on all browsers and so I use the developer debug tools on all browsers. Screencast for firebug, safari/chrome developer tools, opera dragon fly and ie developer tools

http://jqueryfordesigners.com/debugging-tools/

domedia
11-10-2010, 02:07 PM
Doesn't all the browsers (and soon FF) have the developer tools built in?

Corrosive
11-10-2010, 02:56 PM
Not the add-on I use. You get lots of lovely extras. Chrome has some good stuff right out of the box anyway.

domedia
11-10-2010, 04:02 PM
Not the add-on I use. You get lots of lovely extras. Chrome has some good stuff right out of the box anyway. Was that in a reply to my post?

Corrosive
11-10-2010, 04:56 PM
Was that in a reply to my post?
Certainly was, forgot to quote!

domedia
11-10-2010, 05:02 PM
aha, because I wasn't sure because if it was I didn't understand it. AFAIK, all the browsers except for FF has developer tools built in. And FF has this rolling out now. So you're saying they don't?

Corrosive
11-10-2010, 05:06 PM
aha, because I wasn't sure because if it was I didn't understand it. AFAIK, all the browsers except for FF has developer tools built in. And FF has this rolling out now. So you're saying they don't?

You get standard developer tools with Chrome (I'll stick with my BOC at the moment) but the ones I use for debug and to pull templates etc apart you have to download. Unless my Chrome isn't up-to-date?? vers7.

domedia
11-10-2010, 06:45 PM
Nope that's right. I think I misunderstood you're initial response.

When that's said, the makers of Firebug are working on something big in response to FF's inclusion of developer tools built in to the browsers.