I have the following use case in my web application development workflow
- Open any CSS file and its line from Firebug inspector in Sublime Text 2 text editor
- Do this with a local development or any web server
Firebug has an external editor feature. However the external editor configuration does not support mapping URLs to files. Since I do stuff like WebGL and AJAX I cannot work with file:// protocol, but I use Python’s SimpleHTTPServer as a development server. I had to figure out a way to map URLs (http://localhost:8000) from Firebug to my local files on the hard drive (/Users/mikko/code/xxx) .
Thus, I created the Python script below. It takes four arguments URL (supplied by Firebug), line number (supplier by Firebug), base URL and base directory to map URLs to files on the hard disk. You can create several Firebug external editor configuration entries for different URLs.
On OSX, Firebug is picky and does not allow pass arbitrary UNIX binaries as external editor. Thus, you need to wrap the script using py2app or download the ready firebug-subl app (Mountain Lion) from Github and drop it in /Applications.
I also run for the two following bugs in Firebug 1.10.4 (not reported by me yet)
- Cannot open the external editor if the URL starts with http://localhost (see the script below how to configure /etc/hosts for a workaround)
- Cannot open the external editor in some cases if there are spaces in the command line (had to use | as the separator)
… caused some hair pulling.
Firebug’s external editor configuration menu can be hard to find:
And here is a sample config:
Further instructions in the script itself.
Note that the script outputs to /tmp/firebug-subl.log as there didn’t seem to be a way to get console output from the external editor otherwise. If this file doesn’t get created Firebug doesn’t even try to run the script (or the wrapper app) as with the bugs mentioned above.