Archive for the ‘Firebug’ Category

Playing with AJAX in Safari 4 Beta

Wednesday, February 25th, 2009

If you’ve been following my blog over the past several months, you’ve probably learned a few things about me.

  1. I do a lot of JavaScript and AJAX development
  2. I’m a complete snob about using Firebug
  3. I’m definitely not a fan of Safari (see It’s Official: I Hate Safari, and I Hate Safari, part 2 for reference)

I heard that Apple just released Safari 4 (BETA), which touts improvements in a handful of areas. As someone who openly hates Safari, my excitement regarding this release was easily contained.

What’s new in Safari 4? Besides a bunch of (in my opinion) minor and pointless UI changes, the browser will support HTML 5 and CSS effects. (I wrote a previous post about why I think CSS effects are a bad idea.) However, I was interested in two particular improvements — the Nitro engine, and the Developer Tools.

The Nitro engine (according to the press release) basically allows Safari to process JavaScript exponentially faster than both IE and Firefox. This is cool, and actually very useful… and by useful, I mean that applications relying heavily on JavaScript and AJAX will process information more quickly.

Safari also added some improvements to the debugging features in the Developer Toolbar. Namely, it looks like Apple has added the ability to see XHR actions and their request/response headers. This is pretty cool, though it doesn’t actually catch the POST parameters used in the requests like Firebug does… and that’s a huge feature to miss. Nonetheless, it makes my life easier to debug JavaScript in Safari.

My overall first impression: Safari 4 BETA is a good step forward (I’m testing the Windows Vista version). It still doesn’t make me want to stop using Firefox, but it will start making my life easier as a JavaScript developer. I guess I can’t say that I still hate Safari… but I’m far from being a fan.

One last thought: as Safari 4 is just a BETA version, I’ll be curious to see the finished 4.0 release.

It’s Official: I hate Safari

Wednesday, January 7th, 2009

I’ve mentioned before that I do a ton of JavaScript and AJAX development. I’ve also mentioned that debugging JS code is simple in Firefox (using Firebug), and a bit of a pain-in-the-ass when viewing in IE.

As I near the completion of a software iteration, I have begun testing across all other browsers. Apple’s Safari (at least on Windows) is by far the worst browser when it comes to debugging JS code.

Why do I say that? Isn’t Apple supposed to be way ahead of Microsoft in just about everything???

For starters… I do like that Safari has a ‘Developer’ section built-in to the browser. That’s awesome! …except that it lacks something really important — a decent JavaScript debugger!

To further illustrate my point, the Apple developer docs are just as bad: they expect you to insert JS code into your own code so that your errors show up in their console debugger. You mean I have to add code just so your software works? No! The folks at Firebug figured that problem out… why couldn’t Apple?

It gets worse… even after adding the

window.console.log();

code to my own script, the Safari console log isn’t even helpful! It gives me an undefined error in a file… but I have 2000 lines of code! Can you be more specific???

I officially hate Safari. I never really used it before, but now I loathe the browser. I wouldn’t even bother to test in it if my client didn’t primarily use Mac products…

Has anyone found a great JS debugger for Safari?

Debugging in IE

Tuesday, January 6th, 2009

As a web developer, I’ve tended to do most of my development in Firefox. I wrote a post a while back talked about how much I love Firebug — the world’s best (in my opinion) console, JavaScript, CSS and DOM debugger.

However, when one has to figure out why something looks shitty in Internet Explorer… you’re basically up Shit Creek with no paddle. (That’s technical-speak for ‘You’re pretty much fucked”)

I’ve been trying to use a tool called DebugBar in IE7, but I’m only mildly impressed. There’s no CSS or JS debugger, so I’ve only found it useful for monitoring the console. As I do a lot of AJAX work, it is helpful… and for-better or for-worse, it’s the best thing I’ve found so far.

I’ve been confounded by a CSS issue recently in IE7, so I did yet another Google search for a CSS tool that I can use in IE. As luck would have it, I did find a useful tool… one which is actually pretty ingenious.

Called Joshascript DiscHover, you simply add the link to your favorites. Once you’ve navigated to the page where you need a CSS debugger, you select the link from your favorites list…

…and nothing happens!

Just kidding. The directions on the download page are fuzzy, but once you have clicked on your “favorite” link, you can left-click anywhere on your page and a popup appears detailing the CSS of that DOM element.

Pretty cool! I’m hoping this solves my issue in IE… if this tool doesn’t help me, you’ll definitely hear about it.

Web Development Tools

Friday, December 5th, 2008

I’ve been working on a number of projects recently, and a thought occurred to me: How in the world could I do my job without Firebug?

Now, I’ve known for years now that Firebug is like the single best web development tool available. I use it extensively on every project that I touch, be it professional or freelance.

The funny thing is… not every developer uses or even knows about it! I can’t imagine trying to debug CSS or JavaScript without it, namely because Firebug is so painlessly simple to use.

I was on a conference call the other day with an outsourced developer, and we were talking about some CSS issues that his team was facing. During the screencast, I opened their test site in my browser… and within seconds I had pinpointed the exact line in their CSS file causing the problem. The developer (who shall remain nameless) was floored.

I think I was more confused by the fact that no one on this guy’s team was using Firebug. Maybe I’m just enlightened (or spoiled), but in an age where technology is always changing and becoming more complex one would hope that programmers used the best tools available.

I do, however, have a major issue with Firebug — it’s only available (as fully functional) on the Firefox browser. I work in a corporate environment, and the majority of corporate employees use either Internet Explorer (using Windows) or Safari (using Mac).

There aren’t really any good tools for IE that do anything close to what Firebug can do. As a web developer, I make sure to thoroughly test my code across the major browsers — but isolating CSS and JS problems can be a major pain in the arse.

The bottom line: use Firebug.