You don't know the firefox toolbar

3 minute read Published:

The unknown magic in the toolbar

I had no idea that firefox had this little command line toolbar but damn does it pack a punch. Docs can be found here. A small selection of things you can do through the command line is take a screenshot of the whole page, highlight all nodes that match a selector, emulate media types, inject libraries directly into the page, and log all function calls to the console.You can even create your own commands which I’ll get into at the end. I don’t know about you but all this makes me giddy just thinking about some of these things..

Get Started

  1. Press Shift+F2
  2. Profit

The Skinny

  • It seems to persist across tabs once opened (just press Shift+F2 to focus on the toolbar)
  • Yes, there’s auto-complete.
  • Cycle through the suggestions by pressing Up or Down.
  • Press F1 to see all suggestions in a list.
  • If you want to see all the commands just type help
  • Get information about one command by typing help <command>

My Favorite Commands

  • eyedropper - select color from the page
  • folder open <path> - Opens a folder on your system
  • highlight <selector> [--hideguides] [--showinfobar] [--showall] [--keep]
    • --hideguides - Hide the guidelines on the page
    • --showinfobar - Show info above each selector (tagname, attributes, dimension)
    • --showall - This command automatically shows the first 100 only to improve speed. Use this if you want all to be shown at once.
    • --keep - Keep this selector highlighted (by default the highlights disappear after another highlight command is called)
  • media <emulate / reset> <media value> - Allows for css media emulation (media emulate print for print version)
  • resize <off / on / to / toggle> - Toggle responsive mode (you can specify dimensions with: resize to <width> <height>)
  • screenshot <filename> [--clipboard] [--delay ...] [--dpi ...] [--fullpage] [--selector ...]
    • <filename> - Desired filename (make sure you add .png to the end)
    • --clipboard - Copy screenshot to clipboard
    • --delay # - Delay taking the screenshot by # seconds
    • --dpi # - Set the dpi
    • --fullpage - If you want to take a screenshot of the full page
    • --selector ... - If you only want to take a screenshot of a certain css selector

Note: inspect <selector> works in theory but I keep getting an error when I try to use it. It would be great though..

Other Useful Commands

  • cookie <list / remove / set> - List and change active cookies
  • jsb <url> - Beautifies JavaScript file (useful for looking into minified resources)
  • inject <library> - Injects the requested library into the current page (use a valid script URI)
  • restart - Restarts firefox (can enable safemode with --safemode)
  • paintflashing <on / off> - Enables or disables paintflashing (highlights areas that are repainted based on events and so on)

There you have it. If you want to see the full docs just go here.

comments powered by Disqus