New simple JavaScript editor in Firefox

Introducing Scratchpad

Firefox 6 just released includes a new tool for web developers: a simple JavaScript editor (note of the translator - in English it is called Scratchpad). .) The idea is simple: the browser is a great place to experiment with JavaScript. Most JS developers are already aware of this and use tools such as the web console and the Firebug command line to take advantage of the only medium that knows exactly what the web page looks like.

The web console is optimized for entering one line of code at a time (hint: with Shift + Enter you can enter several lines). In Firebug, there is a button that enables multi-line input mode, but still the work is based on the sequential and linear execution of pieces of code.

This does not apply to Scratchpad. He completely rejects the “input string - output string” approach. This is just a text editor that can run javascript.

Use Scratchpad

Scratchpad can be found in the Web Development menu. Select “Simple JavaScript Editor” in this menu, and you will see a text editor window. When you start it appears on the usage tips.

It’s easier to work with him:

1. Enter code
2. Select some part of it
3. Choose one of the three commands in the context menu or the Run menu:
   
   • Launch
   • To explore
   • Display
   
   Of course, there are accelerators for them, so that there is no need to reach for a mouse.

')
“Run” simply executes the selected code. You can use this command to define functions or run code that controls the page.

Explore executes the code and opens the object inspector at the returned value.

Finally, "display" puts the result of the code in the editor. With this command you can turn the editor into a calculator. However, it will be more useful to use it to track the results when checking the correct operation of the page.

I note, by the way, that many Scratchpad ideas come from Smalltalk environments. Thirty years have passed, and we are still catching up with him :)

To understand for yourself what Scratchpad is, you need to see it in action. Either run it yourself, or watch the video of Rob Campbell .

Writing new code in Scratchpad

Scratchpad is a very convenient way to try your code where it should work: in a browser. Let you have some function that gives wrong results. Load the page, copy the function code into the editor, and add a couple of lines of code that calls it. You will quickly get used to changing the function a bit and restarting the code. When you finally get the desired result, copy the function back from the editor to the file where it was defined. And all this can be debugged without a single page reload!

We use code fragments

Scratchpad can download files with JavaScript code and save its contents. This allows you to save sets of frequently used functions. For example, if your site uses AJAX to load various data, save all such calls to one file and be able to get this data at any time during the work on the site.

About scopes

Like the web console, the code in Scratchpad sees all the variables on the page, but the variables defined in the Scratchpad page are not available. If you want to define a variable (say, foo ) visible to the JavaScript code of the page, you can assign it to the window object: window.foo = 1 .

But unlike the web console, the contents of Scratchpad are saved when switching tabs, and the running code is always executed in the currently open page. This allows, for example, to make sure that the code works equally on the development server and the debug server.

Finally, if you are working on Firefox itself or extensions for it, you can give Scratchpad access to the browser internals. To do this, set the devtools.chrome.enabled setting devtools.chrome.enabled true in about:config and change the “environment” in the editor from “content” to “browser”. But if you enter some code, because of which the browser will start sending demotivators on Google+ - it’s not my fault!

Future plans

Scratchpad is simple and we want to keep it. We are planning several improvements that will appear in the upcoming versions of Firefox, but the essence - “a text editor that can run JavaScript” - will remain unchanged.

We are waiting for your feedback on Scratchpad! Write to the dev-apps-firefox mailing list (what's in it). Or start participating in our work and make Scratchpad and other developer tools even better.

Addition: in Firefox 8 it is planned to use the Orion editor for Scratchpad , which gives syntax highlighting (although it will be disabled by default). You can enable it by setting the devtools.editor.component setting to "orion" .