Single Purpose Web Dev Browser

Posted on timeFebruary 7th, 2009 by userRay Baxter


I’m writing more Javascript and AJAX these days, so not coincidentally, I am also spending more time:

  • Inspecting the DOM of pages.
  • Checking the validity of CSS and XHTML.
  • Checking for Javascript syntax errors.
  • Breakpointing Javascript.
  • Viewing the rendered source of pages.

On top of that, there are a number of other tasks that I do frequently as I develop for the web:

  • Measuring page load time.
  • Snoop on, and alter, http requests and responses.
  • Clear and/or disable the cache.
  • Clear all or selected cookies.
  • Spoof a site as a different browser.

For all of these tasks, Firefox is the browser for me. There are useful tools for Safari, Internet Explorer and, I assume, Google Chrome, but Firefox with the Firebug, DOM Inspector, Live HTTP Headers, Tamper Data, User Agent Switcher, View Source Chart, Web Developer and YSlow plugins is the set of tools that I am the most comfortable using for these tasks.

The problem usually is that I don’t really want all of these extensions around when I am focused on reading or casually surfing the web. This morning, it occurred to me that I could use the techniques that I used in creating Firefoxen to create a special purpose web application development browser.

A few minutes later:

WebFox in action!

Here is what I did.

# Make a copy of Firefox
cp -pr /Applications/Firefox3.app /Applications/WebFox.app
 
# Create a new profile, I called mine WebFox
WebFox.app/Contents/MacOS/firefox-bin -P
 
# I used my existing profile as a baseline, you might not want to
cd ~/Library/Application\ Support/Firefox/Profiles/
rm -fr 40of1s4x.WebFox/
cp -pr u5qu37ob.default 40of1s4x.WebFox
 
# Change the Bundle Name to "WebFox"
open /Applications/WebFox.app/Contents/Info.plist 
 
# Change launch-ff command to (no quotes) 
# "/Applications/WebFox.app/Contents/MacOS/firefox-bin -P WebFox"
vi /Applications/WebFox.app/Contents/MacOS/launch-ff 
 
# CFBundleName is WebFox for display in the tool bar
# You probably need the Developer Tools installed for this to work
open /Applications/WebFox.app/Contents/Resources/en.lproj/InfoPlist.strings

Here’s the gist, if you roll that way.

Once you’ve done all that, then you can WebFox (open -a WebFox, or clicking) and modify the extensions to suit your way of working.

That’s it. How it helps someone.

tag



tag2 Responses to “Single Purpose Web Dev Browser”

  1. Morgan Says:

    Greetings,

    Interesting; I was just doing this myself. I’ve been using Fluid, and I _really_ like it, but I want Firefox as the base instead of Safari, and I want multiple profiles, so I can have two of them logged into a site at the same time with different credentials, different plugins, etc…

    I took a slightly different tack. I soft-linked nearly everything in my app to /Applications/Firefox.app/{whatever the original path was}

    I kept Info.plist unlinked, and put my own firefox.icns file in Resources, but otherwise everything else soft-links over, to keep the app weight very light (and potentially easy to clone for more sites). Now I’m dithering about the shell script. Currently I have the top level MacOS directory soft linked, but if I want to run my own firefox-bin, I’d need to link all 45 files in that directory instead. There’s got to be a better way…

    – Morgan

  2. Chad Says:

    What’s this launch-ff ??

    Basically i’ve done something similar, but what i want is it to work well with my dock – Have an 2 firefox icons, one for each profile, different names, and each one launches (does not trigger a separate firefox to launch).

Leave a Reply


Search:

Recent Posts

Categories

Relevant Links

AtomPub

Date and Time

GCalendar

GData

iCalendar Tools

Online Calendars

REST

RFCs

Timelines

Zend GData

Feeds: