kdangoor
I’ve created a screencast to show off the Style Editor and Page Inspector 3D view (Tilt). These features are in Aurora today and will be going into beta next week. I wrote a post for Mozilla Hacks about these tools last month.
Be sure to opt-in to HTML5 video on YouTube!
kdangoor
Here are the highlights from this week’s meeting:
Those are the highlights for this week. Check out the full outline on the wiki, and join us next Thursday and say hi!
kdangoor
Here are the highlights from the latest weekly meeting:
kdangoor
The developer tools weekly meeting notes are in the usual place on the wiki. Here are some highlights:
Note that there will a meeting next week, but there will be no meeting on December 29th.
kdangoor
I have posted a draft roadmap for Mozilla’s developer tools in 2012. It’s a draft, and your comments are appreciated (the best place to comment is on dev-apps-firefox).
Please take a look and let us know what you think!
– Kevin Dangoor, on behalf of the developer tools team
kdangoor
This week’s meeting was well-attended and interesting. We actually ran over our hour-long slot, which is unusual, but the meeting didn’t seem that long! A few notes from the meeting:
Join us at 10am Pacific on Thursdays each week to talk about developer tools.
kdangoor
There was no update last week, due to the Thanksgiving holiday in the US. There was a meeting, but I wasn’t there… I was there for today’s meeting though, and the full minutes are up.
kdangoor
Both by popular demand, and by the fact that we now have a lot more to talk about, the weekly updates are back on this blog. As before, the full meeting notes are available on the wiki.
The highlights from this week:
We have a nice pipeline of features being worked on, and work is progressing on all of those fronts. Stay tuned!
kdangoor
In the current Firefox Aurora, we have a better text editor for writing code (JavaScript and CSS are two good examples). We have adapted the Eclipse Orion editor for use in Firefox. Unfortunately, in the process of bringing Orion in, we discovered what appears to be some deficiencies in how it handles non-English text.
There are always tradeoffs when it comes to software, right? This new code editor is much more pleasant to use for writing JavaScript in the Scratchpad. It also performs much better on files with many lines. Add to these the fact that code is not the same as natural languages and Scratchpad is specifically for editing code and that leaves us with a choice:
Internationalization and accessibility are two things that are actually quite difficult to get right. A great deal of effort has already gone into the editors in the major browsers to get the behavior correct. Unfortunately, the features you want from a rich text editor are not the same as the ones you want from a code editor. The ideal case, and the one we’re ultimately shooting for, is better APIs from the browser that will help JavaScript programmers make whatever custom editor behavior they wish while still maintaining support for people using any of the world’s natural languages and people with accessibility needs.
We’re looking for input specifically from people who use non-English words in their JavaScript or CSS files. The testing we’re doing right now is with the Scratchpad feature, which focuses on JavaScript.
If you have Firefox Nightly, just open up the Scratchpad from the “Web Developer” menu and you’ll see the new editor.
If you have Firefox Aurora, you’ll need to change a setting before you’ll see the new editor. Here’s how you do it:
about:config in the location bar (you may get a warning about this… it’s okay, we’re professionals 
devtools.editordevtools.editor.component and select “Modify” from the menuorionNow, open the Scratchpad from the “Web Developer” menu. You’ll know that you’ve got the new editor when you see line numbers in the gutter on the left side of the window.
Here are some hints to help us test:
If you haven’t tried Scratchpad before, you might want to check out the Introducing Scratchpad blog post to learn more about the feature.
After you’ve given Scratchpad a try using the instructions above, please fill out a really quick, painless survey to let us know how it went.
Your answers to that survey will help us gauge the real world impact of this new feature.
If you found that the new editor was problematic for you, you can change the editor back to a textarea, even on Nightly. Here’s how:
about:config in the location bar (you may get a warning about this… it’s okay, we’re professionals devtools.editordevtools.editor.component and select “Modify” from the menutextareaEarly testing and feedback from people like you makes Firefox better for everyone.
kdangoor
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
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:
The three ways to run code with Scratchpad are:
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.
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.
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.
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.
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+.
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