Firefox displays CSS errors in the JavaScript Console
Sorry if this is old news, but I sure didn’t know about this until Mats Lindblad was kind enough to let me in on the secret in Firefoxs JavaScript Console.
Firefox has a very useful feature that I can’t believe I haven’t heard about before: it displays CSS errors in the JavaScript console. Anyone know if this is a new feature in Firefox 1.5?
To see it in action, select Tools > JavaScript Console and make sure it is set to display “All” or “Errors”. Select the browser window again and load a site that contains CSS errors (it shouldn’t be very hard to find one). Take a look at the list of CSS errors.
The error messages are often more helpful than those given by the W3C CSS Validator, and clicking the link in an error message opens a source window with the error highlighted. Excellent! I know for sure that I’ll be keeping the JavaScript Console window open a lot more from now on.
- Previous post: Beginners should start with HTML, not XHTML
- Next post: Accessible DHTML: two different approaches
Comments
It's a welcome addittion, but can get really annoying if you just need to scan it for a specific type of error -- say a Javascript error.
Console^2 is a really usefull extension, allowing you to filter the errors by language and type.
Been in there since about 1.0.4, I think. And given the terrible CSS on some pages, not to mention all those scrollbar properties, it can clutter your console very quickly.
It appears to be a new feature, since it is not present in my 1.0.7 version. However, I wasn't able to find anything about this feature in the changelog for 1.5.
Nice function although.
Being a JS dabbler, I did realise that some time ago.
I found another extension that actually uses TIDY to check if your current site is valid HTML and shows a small icon in the bottom right corner. It also enhances the "view source" view , displaying and highlighting all HTML errors:
http://users.skynet.be/mgueury/mozilla/
Yes, this is new in 1.5.
This is very handy while developing CSS. It's also quite annoying while developing Javascript, if you happen to be working on a less-than-perfect-CSS site. The Console2 extension looks interesting, as a further refinement of the Error console...
If it was pre 1.5 version I must have missed it. But then again I almost always clear the log after opening it as it's always full of errors.
//Rob
I've seen it pre-1.5 probably in a beta version. I noticed that whenever I tried to do some JavaScript debugging, CSS errors got in the way.
At least I can debug CSS errors :)
And found lots of them on this blog page, mostly JavaScript errors, from googlesyndication.com. Errors include undeclared variables, undefined properties, functions that fail to return a value plus a few of those CSS errors.
I'll be taking a look at Console2 now.
Chris: I use the HTML Validator extension all the time. You can set it to highlight possible accessibility issues as well. As with all automated accessibility checks you have to know how to interpret the results, but it can be useful.
Martin: Yeah it's really annoying how messy the AdSense code is on all levels: HTML, CSS, and JavaScript. It's amazing that it works at all.
I noticed this when Flock came out. I thought it was a flock-feature and not a 1.5 one. Cool, but i plan to install Console2. ;)
I had noticed, but I would have prefered it if they had made a seperate tab in the console for it. It tends to clutter the console too rapidly if you have 3rd party sites open in several windows.
It's great because it really complains about CSS hacks, sort of forcing me not to use them.
I can't believe they didn't include a filter option, having to sort between CSS and Javascript errors is lamo.
To Chris, post #4...OMG best freakin firefox extension ever! Thanks for the link!
And in using it, I noticed Google.com doesn't even declare a doctype. Wtf are they thinking?
I noticed it yesterday.
I second the feelings of a few others. I like the functionality (very cool) - but I'd rather not have it at all than have it cluttering my javascript info. Just a way to filter the errors would do the trick. (but at the moment I'm considering rolling back!)
I stumbled across it yesterday by accident while debugging a sIFR install.
Good tool to have in the toolbox.
This may very well have been in pre-1.5 versions as a disabled-by-default option. It most certainly was not enabled on my OS X and Win32 copies of 1.0.7. It's a very nice addition to the browser, though. Now if I could just get the stability of 1.0.7 back in 1.5. :-/
Well actually it's a great addition to Firefox. However I would appreciate some kind of toggle button or something similar to choose whether you wanna view JavaScript or CSS errors/warnings.
While it's good to be able to see CSS errors right away, the JavaScript console definitely isn't the place for it.
Very neat indeed. I gets even better if you set the Javascript/CSS console to appear as a sidebar.
Now you can open up the console as a sidebar with the click of a button. Use alt+w to erase all console messages.
Roel: Great tip, thanks. I've been having to go backwards and forwards to the error console lots over the last few days - having it appear in the sidebar should hopefully save me a bit of time.
It's damn annoying just trying to debug an app that uses the Google Maps API, because the GM API throws dozens (probably in the realm of five or six dozen) different warnings and errors... each time you load a page that uses it.
Robert: Agreed. The JavaScript console gets really cluttered the way it is now. A guess would be that with this being a new feature there wasn't time to make a CSS console. Or something. So that's a feature request I suppose: either let us choose to hide CSS or JavaScript errors/warnings in the console, or create a separate console for CSS errors.
Opera 9 Preview 1 introduces a console that covers the following: JavaScript, Java, M2, Network, XML, HTML, CSS, XSLT and SVG. Beat that!
Note: only JavaScript works right now, as far as I can tell, but the rest will hopefully follow in the final release. An HTML error console sounds great! No need for validation any more... perhaps.
This isn't a new feature, I think it has been there for something like two years. It was only enabled in debug builds though, so most people couldn't see it. No idea why it was activated by default now. Maybe they wanted to shock the web developers. Then it makes sense that this feature can't be disabled easily.
The one thing I would like would be to NOT have the console leaping into the foreground by default with no easy way to disable it. From a user's perspective it becomes unusable on a site with less than immaculate CSS.
Hi all, Is there any css hack to FireFox display of HTML input? Inputs look dented inside the page similar to a Java Swing widget. Thank you for your time Faisal
i need codings for hiding javascript console window using php or javascript language
Sorry, comments are closed for this post.