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
• Open any Javascript file and its line from Firebug inspector in Sublime Text 2
• Do this with a local development or any web server

Effectively you right click any source code line in Firebug on any web server and you can open the corresponding source code line it in your favorite text editor. This also works for Javascript stack traces.

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.

And then the cake, firebug-subl.py. A possible updated version will appear on ztanesh repo on Github:

"""

    Firebug - Sublime Text 2 connector.

    Allows you to open any Firebug files in Sublime Text 2 text editor.
    Maps URLs to files.

    Usage::

        firebug-subl [url]|[line-no]|[base-url]|[base-directory]

    Note that we use pipe separation because of Firebug 1.10.4 seems
    to have a bug with space separation.

    Example configuration line in Firebug editor settings::

        %url|%line|http://firebugbugs:8000|~/code/mixnap-base/krusovice-src

    ... this will open all files from http://firebugbugs:8000 as they
    were on the directory /Users/mikko/code/mixnap-base/krusovice-src on the disk.

    Note: Firebug seems to have a bug that if the domain name in the URL
    is localhost it doesn't even try to start the editor. Thus you need
    to resolved /etc/hosts tricks to spoof your localhost with some other
    name if you run a local development server::

        127.0.0.1   localhost firebugbugs

    Shell expansion supported.

    Starting Firefox from command-line for debugging::

        /Applications/Firefox.app/Contents/MacOS/firefox

    Because of Firebug's Select application retardness this script must be wrapped with py2app on OSX
    before Firebug allows you to pick this script as a legal choice.
    In clean virtualenv::

        # We need py2app trunk version for OSX Mountain Lion as the writing of this (altgraph > 0.10)
        # First install hg command (mercurial)
        pip install setuptools-hg
        pip install -e hg+https://bitbucket.org/ronaldoussoren/altgraph#egg=altgraph
        pip install -e hg+https://bitbucket.org/ronaldoussoren/macholib#egg=macholib
        pip install -e hg+https://bitbucket.org/ronaldoussoren/modulegraph#egg=modulegraph
        pip install -e hg+https://bitbucket.org/ronaldoussoren/py2app#egg=py2app
        py2applet firebug-subl.py && cp -r firebug-subl.app /Applications

"""

__author__ = "Mikko Ohtamaa <http://opensourchacker.com>"
__license__ = "MIT"

import os
import sys
import subprocess
import logging
import urllib

# Write debug output to a file as we don't otherwise get any feedback
# if this script fails
logger = logging.getLogger("firebug-subl")
hdlr = logging.FileHandler('/tmp/firebug-subl.log')
logger.addHandler(hdlr)
logger.setLevel(logging.INFO)

# Add your installation here if missing
LOCATIONS = [
    "C:\\Program Files\\Sublime Text 2\\sublime_text.exe",
    "/home/ed/apps/sublime_text_2/sublime_tex",
    "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl"
]

def guess_subl():
    """
    Guess the editor location.
    """
    for loc in LOCATIONS:
        if os.path.exists(loc):
            return loc

    return None

def main():
    """
    Main magic.
    """

    logger.info("Got command-line: %s" % sys.argv)

    # Where subl lives?
    editor = guess_subl()
    if not editor:
        logger.error("Could not find Sublime Text 2")
        return

    # Read command-line
    # Here we need to have some hacks as for some reason space
    # space separated command line was broken on Firebug 1.10.4
    mega_arg = sys.argv[1]

    # Seems to be urlfied...
    mega_arg = urllib.unquote(mega_arg)

    url, line, base_url, base_dir = mega_arg.split("|")

    # Map Javascript file location from URL to a file on a disk
    path = url.replace(base_url, base_dir)

    # Replace tilde with the user home dir
    path = os.path.expanduser(path)

    if not os.path.exists(path):
        logger.error("Tried to open non-existing file %s - please check your URL-directory mapping" % path)
        return

    # Create a Sublime Text 2 style direct line in a file pointer
    hint = path + ":" + line

    logger.info("Launcing %s with %s" % (editor, hint))

    # Call Sublime Text to open the file in the current project.
    # Create process with shell variable expansion
    subprocess.call([editor, hint], shell=False)

try:
    main()
except Exception as e:
    logger.exception(e)

–

 Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+