Browser Tools for Web Designers
Posted by Robert on the 7th of November, 2006 at 2:16 PM GMT0. Permalink.Tags: Browsers, FireFox, Safari, Web Design
The following is an advertisement.
When I posted this, I was listening to: Chris Whitley - Living With The Law
I told Kathryn that I had a few browser tools for Macs she should check out for web design. I decided to make a post about it instead.
Make Safari Better
I really prefer to work in Safari on a Mac. Firefox, frankly, is slow as hell. The problem is that Safari, like most of Apple's software, is simplified for general use. Out-of-the-box, it lacks a lot of features that even Internet Explorer have. The qualifier there is out-of-the-box.
Debugging JavaScript
While it doesn't feel as robust as Firefox's JavaScript debugger, Safari ships with one hidden away. One of the first things I do with a fresh install of Safari is turn on the Debug menu. To turn it on, open Terminal and enter defaults write com.apple.Safari IncludeDebugMenu 1 and press enter. The next time you launch Safari, the Debug menu will appear. Make sure Log JavaScript Exceptions is checked, then open the JavaScript Console from the Debug menu (or press command + shift + j).
The interface is very minimal. At first blush, it seems to be lacking compared to Firefox's console. After you use it some, you'll find that it is as good as Firefox when it comes to picking up, identifying, and finding errors in your code.
Safari Tidy
The other tool I find quite helpful is Safari Tidy. Safari Tidy is a plugin for Safari that runs every page you browse through HTML Tidy. HTML Tidy helps to find any errors in your HTML. While it isn't a validator, it does a pretty good job of identifying problems.
Safari Tidy puts a simple message in the bottom right side of the status bar in Safari. It may say 0 errors / 2 warnings. This tells the developer that there are three potential problems in the code. Double clicking the message will bring up a modified view source window that displays the errors. By double clicking an error in the view source window, the line with the problem is highlighted. Identifying errors is much quicker this way.
Make Firefox Better
Firefox is already a great browser for developers. The JavaScript debugger is top notch and it has a built-in DOM inspector. However, I've found one extension that I can't live without: The Web Developer Toolbar.
The Web Development Toolbar
This toolbar adds a lot of functionality by allowing web designers to see tons of information about what is in the HTML. It has too many features to list all of them, but I'll list the ones I use the most (which aren't necessarily the most helpful).
-
JavaScript Error Notification
In the far left of the tool bar, there is a small info icon. When a JavaScript error is encountered, it turns into a red icon. Clicking it will show the JavaScript Error Console. This at-a-glance error notification is the feature I use the most.
-
Validate Local HTML
Under the tools menu, there is an option to run the current page through the World Wide Web Consortium's validator as a local file. The source is submitted as a file, which allows any page to be validated. To boot, they have assigned a key combo to do this quickly in a new tab. There is also options to validate local style sheets, as well as regular validation options.
-
Resize Window
This sounds pretty silly, but there is no way to accurately resize a browser window without JavaScript or a tool bar. This one includes resizing to 800x600 as well as custom values.
There are tons of other features packed into this tool bar. The features I use most don't accurately represent how powerful it is.
Got Any Suggestions?
Do you have any browser add-ons for web designers or developers that you can't live without? Let me know!
This post can also be discussed on LiveJournal and MySpace.
Add this page to del.icio.us or email it.
Comments on this page are closed due to age. If you need to say something, e-mail me.