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
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.
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
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).
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.
There are tons of other features packed into this tool bar. The features I use most don’t accurately represent how powerful it is.
FireBug is a great extension that is very useful in certain situations. While I don’t use it every day, FireBug is very powerful. It exposes the HTML on the page at a given time. That means any changes to the DOM are accounted for in the source view.
What makes FireBug great is that you can then live edit the HTML and CSS. The browser updates as you type. FireBug won’t let you save your work, but it does allow for rapid debugging without impacting the actual files. Basically, you can experiment with various ideas to debug your layout without having to deal with backups or limited undos. Once you figure out your issue, you can copy and paste the updates to live files.
Got Any Suggestions?
Do you have any browser add-ons for web designers or developers that you can’t live without? Let me know!