How To Open The Multi-Line Editor In Firefox Web Developer Tools

As JavaScript developers, we often need to run small pieces of code in the browser's console. But editing your script is not very convenient. For example, to enter a new line, you have to press shift-enter, which is awkward.

I discovered that there is a multi-line editor in Firefox, which makes it so much easier to edit a code snippet or script.

Open the dev tools with command-option-i1. You can switch to the console tab with command-option-k.

You usually will have one line to enter code in the console. But you can toggle between the one-line editor and multi-line editor by pressing command-b.

When you are in the multi-line editor, you can edit your script like in a standard text pane. If you want to run your script, just press command-enter.

If you have a code snippet like the following and execute it several times, you will get a SyntaxError (redeclaration of const x).

const x = 2 * 5

To avoid this error, you can create an immediately invoked function expression (IIFE).

(function() {
  const x = 2 * 5  

Or you can use ES6 block scoping.

  // Do not use var, but const and let instead
  const x = 2 * 5  

Now you can run the code as often as you like without seeing that redeclaration error.

  1. Windows and Linux users usually need to replace the command key with control and the option key with shift. So to open the Firefox developer tools you can press control-shift-i.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer