Web Developer Browser Extension

Everybody loves Firefox. Even if I use Safari as my main browser most of the time, Firefox’s expandability is still irreplaceable. With so many available themes, plugins and extensions, you can personalize your browser according to your browsing or work behavior.

Firefox toolbar with Web Developer extension

So, what’s my favorite? Since switching to Mac, I do not test out everything one-by-one anymore but I have to say Chris Pederick’s Web Developer extension is one of the best of productivity purpose. It provides you with almost every tool you need as a web developer like customize how the CSS should be displayed, window resize, display outlines (tables, links, frames) and so much more.

For me this is perticularly important and makes everything easier to learn how a site or webpage is built.

This extension is available for Firefox, Flock and Seamonkey, and will run on Windows, Mac OS X and Linux.

Chris Pederick’s Web Developer page link

Disabling CSS on Safari

For all of you who ever use other than Safari as your primary browser, you might notice that Safari is lacking the feature to disable/enable CSS on a page/site. So it is always enabled.

We can use something called Safari bookmarklets to solve this. Here’s how:

  1. From Safari, CMD+right click then choose ‘Copy Link’ this link.
  2. Add the previously copied link as one of your bookmark, you may name it ‘Toggle Linked CSS’ or anything.
  3. Now, everytime you browse just click on that bookmark during a visit of a page and you can see it with its CSS disabled.
  4. Confused? Just try to test it by clicking on the link above or the added bookmark on this site first then.

Note that this trick does not work 100% on every site, but more than enough as an alternative.