Introducing Scratchpad

kdangoor

38

The latest Firefox release includes a new tool for web developers: Scratchpad. The idea behind Scratchpad is simple: the browser is a fantastic place to experiment with JavaScript. Most JavaScript developers already know this and they use tools like the Web Console or Firebug’s command line to take advantage of the one environment that knows everything about their web page.

Tools like the Web Console are optimized for entering a single line of code. (ProTip: you can use shift-enter to put multiple lines of code into the Web Console.) Firebug has a button you can click to get into a multi-line input mode. Even with that multi-line input, the workflow is still centered around performing operations step-by-step and linearly.

Interaction with Scratchpad is quite different. It throws away the “one line of input gives you a line of output” interaction in favor of a text editor that knows how to run JavaScript.

Rob Campbell's Scratchpad+Canvas Demo

Using Scratchpad

To use Scratchpad, go to the “Web Developer” menu (hint for Mac users: look for the “Web Developer” menu under “Tools”). Select “Scratchpad” from that menu, and you’ll get a text editor window. The window starts out with a helpful hint about using Scratchpad.

The basic flow with Scratchpad could hardly be simpler:

  1. Enter some code
  2. Select a portion of the code
  3. Choose one of the three commands from the Execute or right-click context menu

The three ways to run code with Scratchpad are:

  • Run
  • Inspect
  • Display

They all have keyboard shortcuts, because you don’t want to have to reach for your mouse when you’re writing code.

Run just executes the selected code. This is what you’d use if you’re defining a function or running some code that manipulates your page.

Code in Scratchpad that creates an alert

JavaScript being run in the Scratchpad

Inspect executes the code as Run does, but it also opens up an object inspector on the value returned. For example, if you select window and choose Inspect, you will have an object inspector that lets you drill into the window object.

Finally, Display executes the selected code and puts the result right into your editor. This could be handy for using Scratchpad as a calculator. Or, more likely, it’s handy for keeping track of results while you’re testing something your page is supposed to do for you.

Interesting historical aside: Scratchpad was heavily inspired by the Workspaces feature of Smalltalk environments. Thirty years in, we’re still reinventing Smalltalk ;)

To really get a feel for Scratchpad, you need to see it in action. Fire it up yourself, or watch Rob Campbell’s video which steps through experimentation with Scratchpad.

Trying New Code with Scratchpad

Scratchpad is a great way to try out code in a live browser environment. For example, imagine you have a function called calculatePosition, and it’s just not working quite right. Load up your page, copy the function into Scratchpad and type out a couple lines of code that make use of calculatePosition. You very quickly get into a flow of tweaking the function and re-running the code.

Once you have the result you want, just copy the code back into your main file. This whole time, you didn’t have to reload the page even once.

Using Common Snippets

Scratchpad also has a way to save its contents or load a JavaScript file. Using this feature, you could save Scratchpads with collections of commonly used functions. For example, maybe you have a site that you work on that has various bits of data that get loaded via Ajax requests. Save a file with a handful of those calls and you can always get the data you want when you’re working on that app.

A Word about Scopes

When you run code in Scratchpad, it runs in a sandbox that has access to everything on your page, but keeps you from accidentally leaking variables onto your page. This is very similar to how the Web Console works. If you want to put a variable onto your page, just set it on window. window.foo=1 will give your page a variable foo that is accessible to scripts on the page.

Scratchpad, unlike Web Console, follows you around as you switch tabs. When you execute code, it runs against the current tab in your browser. This makes it easy to try the same code against your development and staging servers, for example.

Finally, if you’re doing development work on Firefox itself or on Firefox add-ons, you can set Scratchpad up so that it has access to all of the browser’s internals. Go to about:config and set the preference devtools.chrome.enabled to true. This will allow you to change the “Environment” from “Content” to “Browser”. Just don’t blame me if you enter some code that forces your browser to send cat pictures to Google+.

More to Come

Scratchpad is a simple tool, and we want it to stay that way. We’re planning a handful of improvements to Scratchpad that will show up in Firefox over the coming months, but the simple “text editor that runs JavaScript” core will remain.

We’d love your feedback on Scratchpad! Tell us on the dev-apps-firefox mailing list what you think. You can also get involved and make Scratchpad and other developer tools even better.

Kevin Dangoor, Developer Tools Product Manager

Firebug: Alive and Well

kdangoor

9

Last week, John J. Barton announced that he has left IBM and the Firebug project and joined Google. John has been leading Firebug for quite some time and he has made a huge contribution there. It’s hard to overstate how important Firebug has been and still is in the world of web development, and John has been a large part of that history.

The departure of Firebug’s leader has raised questions in some people’s minds about the future of the project. Back in May, I explained the relationship between Firebug and Mozilla’s developer tools group. What I wrote there is still relevant today: Firebug remains an important and vibrant independent project. Mozilla directly supports Firebug both through work on the platform that Firebug depends on as well as work on Firebug itself.

Jan (Honza) Odvarko works in the Mozilla Developer Tools group and is the new leader of Firebug. Honza has been working on Firebug for a long time and has been the release manager for the past few releases. The Firebug project is continuing to move forward without a break with the release of 1.8b6 last week and this week’s planned 1.8 final release. Honza has plans for interesting new features in Firebug 1.9 so stay tuned or, even better, get involved!

Firebug has many awesome features built up over a period of years and is a favorite tool for more than 2.5 million web developers. If you’ve never tried Firebug before, you’re in for a treat: it’s a powerful and comprehensive tool for web developers. If you’re already a Firebug user, keep an eye out because the Firebug project has more good things to come.

Best of luck to John in his future endeavors and to the Honza and the rest of the Firebug team for their continuing adventure!

Kevin Dangoor, Developer Tools Product Manager

DevTools Integration Build

Rob Campbell

3

(Crossposted to dev.apps.firefox and my blog)

Update February 14, 2012 by kdangoor: The link below for developer tools builds may not be active. Those builds have been used when we’ve had large features in development and wanted regular test builds. As I write this, you can find the latest developer tools on the Nightly channel.

Hi,

I have a present for you.

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-devtools/

If you go there and download the version for your operating system, you can get a sneak preview of what we’ve been working on in the Developer Tools group. It is a little rough around the edges still as it’s all a work in progress, but it gives you an idea of what we’re working towards.

The features can be found in the Web Developer submenu in the app menu on Windows (aero) and Linux or under the Tools>Web Developer menu on Mac and WinXP or Linux Firefoxes without the AppMenu.

The big feature in this build is the Highlighter available through the Inspect menu item (subject to change). It’s still using a panel for the HTML display, but that is going to be docked and de-emphasized soon enough. There’s a Style panel available through the toolbar at the bottom of the screen. The layout of this panel is going to change very shortly as well to provide more immediate access to the information you’re looking for.

The other cool easter egg in this build is the Orion editor in Scratchpad. I’m kind of ruining the surprise by telling you about it, but I just couldn’t help myself.

I’ll kick off another build in a week or two including the Style Editor and some improvements to the Web Console as well as ongoing additions to the Highlighter. Note that the updater will download the latest Nightly from mozilla-central, so if you let it update, you’ll lose this build.

Please let us know what you think. Here on this blog, on d.a.f, or file bugs against the Firefox::Developer Tools component.

I hope you like it.
Rob

Weekly DevTools meeting notes (June 16)

kdangoor

The full meeting notes have the details, but the highlights are right here:

  • Welcome Nick Fitzgerald (fitzgen on irc)! Nick is an intern with us for the summer. He’s already diving into the Command Line and will also be involved with the Style Doctor
  • Work on Tilt progresses, as you can see in Victor Porof’s latest video.
  • Check out the new console.timeStamp feature that’s coming in Firebug
  • Note that Firefox 5 is coming out next week, and Firebug 1.7.2 is compatible with it (yay!). Firebug 1.8 will come out shortly after Firefox 5.
  • console.group/groupEnd have an implementation that you can see in Panos Astithas’ video.
  • The Highlighter and the ability to register commands with the new Command Line are ready to land! Stay tuned for more.
  • Mihai Sucan posted a try build with the new code editor integrated into the Scratchpad. If all goes well, this feature will be in the next Aurora.

Developer Tools Roadmap update

kdangoor

I’ve posted a draft of an updated roadmap for Mozilla’s developer tools project. What we’re trying to accomplish overall hasn’t changed, but some of the mechanics most certainly have. This isn’t surprising given the early stage of our project.

Please take a look and let us know what you think either in the comments here or on the dev-apps-firefox list.

DevTools: Halfway to Firefox 7

kdangoor

15

We’re now right in the middle of the 6 week development cycle for Firefox 7, so I thought I’d do a quick rundown of the features we’re tracking for that Firefox, with two special bonus features at the end. Remember that we’re following a release train model here. The timing for Firefox 7 is fixed, but the features listed below are not. If we get everything ready in time, you’ll see the features listed below appear in Firefox Aurora builds sometime around July 5th and in a Firefox release around September 20th.

Highlighter lets you visually select a DOM element, see some basic information about the element and access further tools for working with the element. It’s a gateway to visual/design oriented tools. Rob Campbell and Mihai Sucan have been working on the main patch in bug 642471. Paul Rouget has been working on improvements to the initial element highlighting and adding the overlaid information in followup bugs.

Status: Main patch is ready-to-land
Next 3 weeks: polish the feature with the followups


Style Inspector takes the element selected by the Highlighter and gives you detailed information about the styling of the element. This feature was initially created for Firefox 4 last fall and recently revived by Mike Ratcliffe. bug 582596 covers the main work of landing the feature. Additional important bugs cover things like integration with the Highlighter.

Status: Reviewed by the devtools team, waiting on browser peer.
Next 3 weeks: land it and get the Highlighter integration in


Style Editor makes it possible to make changes to the CSS on your page and see those changes instantly take effect. Cedric Vivier has quite a few great ideas for this tool, and we’re hoping to get the first step out in Firefox 7. Cedric’s editor is available as an add-on right now. He will be attaching a patch version of this to bug 583041 within the next couple of days.

Status: Patch coming up for review by devtools team.
Next 3 weeks: Get the patch up, reviewed and landed. This will likely be followed by a UI polish round.


HTML Tree editing provides a simple interface for making some changes to the current DOM. Specifically, you’ll be able to manipulate attributes and text nodes. Kyle Simpson has picked up work on the HTML tree that was already in mozilla-central, experimented with the user interface and is now getting a patch together for the tree. You can track the progress in bug 659710.

Status: Patch coming soon for review by devtools team.
Next 3 weeks: Get the patch up, reviewed and landed.


We’re adding a Code Editor to Firefox to improve the editing experience for the Scratchpad and Style Editor features. Mihai Sucan is integrating the Eclipse Orion editor, which has very good accessibility and internationalization aspects. This work is tracked in bug 660784. A separate bug tracks the Scratchpad integration for the editor.

Status: Initial patch reviewed, more work required for testing the integration. Also getting accessibility feedback to see if the editor hits the “good enough” level.
Next 3 weeks: Finalize the patch and land it.


The console object is being extended to have just about everything that’s in the de facto standard. Panagiotis Astithas is leading the charge on this, and there are several bugs involved in this work.

Status: Much has landed already
Next 3 weeks: land console.dir, console.group/groupEnd


And now, the two special bonus features. These aren’t going to make their impact in Firefox 7, but the progress during the 7 cycle has been great!

The Command Line is part of a rethink on how people get things done with developer tools. It’s going to take us a couple of releases to fully bake the Command Line+Scratchpad idea, and we’ll be talking more about this soon. Joe Walker worked heavily on the Bespin command line and has been working on this seriously spruced up new version of the idea. Our new intern, Nick Fitzgerald, will help out with this feature.  It’s actually possible to use this sort of command line interface in your own webapps as well.

Status: Landing support for command registration soon
Next 3 weeks: working to land the command line UI, but turned off by default until we’ve fully fleshed it out


Finally, the Script Debugger project is huge and has many moving parts. Dave Camp, Jim Blandy and Jason Orendorff are hard at work giving the SpiderMonkey JavaScript engine an entirely new debugging interface that is remotely accessible. Panagiotis Astithas will be helping them out soon as well. The groundwork being laid for this feature is going to help make our other tools remotely accessible, too.

Status: SpiderMonkey can stop at debugger statements and provide stack traces over the remote protocol
Next 3 weeks: Continue on the strong progress made so far… this is not a Firefox 7 feature, but will be here before you know it!

Getting Involved

We’re building a lot of new tools, and I think they’re fun and exciting projects that will help a great many web developers. There are many opportunities to get involved, and we’d love your help in building some of the best tools for the open web.

Update: Since our release train model is still quite new, I added some additional information to the first paragraph to describe when these features are likely to be available.

Kevin Dangoor, on behalf of the Developer Tools team

Weekly DevTools meeting notes (June 9)

kdangoor

Check out the full meeting notes for a bit more detail, but I’ve got the highlights for you below:

  • Tomorrow, QA is holding a Firefox 6 developer tools test day. Join us in #testday if you’re trying out Scratchpad or new Web Console features for Firefox 6 and would like some assistance!
  • Jan Odvarko released Firebug 1.8 beta 1 last week and beta 2 is coming out this week. 1.8 is a major refactoring of Firebug’s code, and things are looking good for a release alongside Firefox 5.
  • Scratchpad links in the Web Console will work properly soon in Aurora, when a fix that Panagiotis Astithas finishes landing.
  • Speaking of Scratchpad, Rob Campbell put together a video which gives you an idea of what it’s like to use the Scratchpad for experimenting with code.
  • Paul Rouget has posted a couple of videos of prototypes for new Highlighter behavior.
  • To help get it out the door sooner, Cedric Vivier has simplified the code for his Style Editor. You can try out the simplified version right now in add-on form. Cedric will be working on getting this in mozilla-central soon
  • Google Summer of Code participant Victor Porof showed off his in-progress Tilt project.
  • The Script Debugger continues to progress, with stack frame support landing yesterday in Dave Camp’s repository.

Weekly DevTools Meeting Notes (June 2)

kdangoor

As usual, the full meeting notes are on the wiki. Here are the highlights for this week:

  • Firebug 1.7.2 has been released.
    • Compatible with Firefox 3.6, 4 and 5 (now in beta)
    • Has some other bug fixes
  • Firebug 1.8 beta due tomorrow
    • Compatible with Firefox 6 (now in Aurora) and Nightly
    • Contains the big modules refactoring
    • Also contains a net panel improvement that displays remote IP address and port
  • Joe Walker and Dave Camp put together a demo showing the Command Line resuming execution in the debugger
  • Mihai Sucan posted a demo of the Eclipse Orion editor running inside of Scratchpad

Web Console: where you want it to be, with nicer completion and more

kdangoor

21

The latest Firefox Aurora features a number of improvements to the Web Console. Take a look at the Web Console at the bottom of the screenshot:

Firefox 6 Web Console

  • First of all, the Web Console is at the bottom of the window! Many users liked the Web Console at the top of the window, but others wanted the Web Console at the bottom of the window or in a separate window. All three of those choices are now available.
  • console log messages (like “This is a log message”) now include a link to the file and line that generated the message. This makes it easy to get some context around that log output.
  • Requests to file:// URLs now appear in the Web Console

Here’s something else that’s new:

New Autocompletion

Previously, the Web Console provided suggestions to speed your typing. You could cycle through the suggestions, but it wasn’t always clear what the choices would be. Firefox is now even better at giving you suggestions and saving keystrokes with its new popup display of completion suggestions.

We refined several other aspects of the Web Console’s behavior. Notably, Firefox’s native console object now includes the debug and trace methods that appear in other console objects. We plan to expand the console object further in the next Firefox release.

Thanks to Mihai Sucan, David Dahl and Panagiotis Astithas for these improvements to the Web Console! Thanks also to the reviewers who helped ensure that the code is top notch: Shawn Wilsher, Gavin Sharp, Dave Townsend, Rob Campbell and Neil Rashbrook. Finally, thanks to Eric Shepherd for his documentation work on the changes.

Kevin Dangoor on behalf of the Mozilla Developer Tools team

Weekly DevTools Meeting Notes (May 26)

kdangoor

2

Take a look at the full meeting notes for the details, but I’ll give you the highlights right here:

  • Firebug 1.8a3 is out. It works fine with Firefox 5, but there is a crashing bug on Aurora (Firefox 6) and Nightly. It’ll be fixed in tomorrow’s Nightly.
  • It’s worth nothing that Firebug 1.7.1 is compatible with Firefox 5. Sign up for the Beta channel today!
  • Cedric Vivier posted a very quick demo of the Style Editor. Notice how the elements affected by the rule you’re editing are highlighted.
  • Kyle Simpson posted a UI prototype to show some of what he was thinking for the HTML editor