jQuery and JavaScript Development using Firefox Scratchpad

jQuery and JavaScript Development using Firefox Scratchpad

I was developing a new custom Orchard Module for a client last night that required custom jQuery and JavaScript code to run when the DOM loaded. The easiest way to write the code was to load the web page in the Firefox browser and open up it's new JavaScript Scratchpad that allows writing, debugging and executing JavaScript and jQuery against any tabbed web page in the browser. This allowed me to interact with the page elements as if the JavaScript code was running natively within the page. Now normally I prefer the Chrome Developer Tools, but the JavaScript ScratchPad in Firefox is much more ideal for writing and executing JavaScript than the JavaScript Console in Chrome and even the JavaScript Console in Firebug.

Firefox Scratchpad - JavaScript and jQuery Development in Firefox

Firefox Scratchpad gives you a nice workspace to write and execute JavaScript and jQuery. Unfortunately it doesn't have syntax highlighting, pretty formatting, line numbers and breakpoints, but you do have the freedom to write a nice chunk of JavaScript code and have that code interact with DOM Elements on the web page. This allows you to execute code within the context of the web page, but the variables and code are sandboxed so they don't actually become global variables.

In the example below, I am executing a couple of lines of JavaScript code that determines the number of blog posts on my Orchard Blog Page and displays the count in an alert window. Nothing exciting I know, but it gives you the idea as to the wonderful freedom you have for writing and executing blocks of JavaScript code. There is lots of wiggle room without the confines of the JavaScript Console found in Firefox and Chrome.

JavaScript and jQuery Development using Firefox Scratchpad

Firefox Scratchpad Runs in the Context of Active Tab

One of the coolest features of Firefox Scratchpad is that it is not tied to a particular tab like in the Firefox and Chrome JavaScript Console's and Firebug. You can actively change the active tab in Firefox and now Scratchpad will run in the context of that tab. This allow a JavaScript Developer to run the same code against different versions of the web page, perhaps a production web page and a newer version in development.

Save and Load JavaScript Code Snippets

Firefox Scratchpad also has the ability to save and load JavaScript and jQuery code snippets. In addition to saving your code while it is a work in progress, the JavaScript Developer can also save commonly used snippets in a code repository for use in all your web development.

Save JavaScript Code Snippets in Firefox Scratchpad

Ideally it would be awesome for these code snippets to be saved in the cloud or work with a 3rd party service like jsFiddle to share with other web developers and team members.

Firefox Aurora

Mozilla has just scratched the surface with Scratchpad and plans to come out with a much better text editor with syntax highlighting, line numbers, a "CSS Scratchpad", and other juicy bits for JavaScript, jQuery, and Web Developers. I personally plan to wait until Aurora is in more of a beta stage, but for those who want to play with really early, unstable bits you can always download Firefox Aurora and see what they have done for JavaScript Developers in the cutting edge version of the browser.

JavaScript and Web Developer Tools in Firefox Aurora

Conclusion

I am really looking foward to the renewed support for developers in Firefox and am excited that they have an agressive schedule for getting new features in the hands of web developers and users. The new Firefox Scratchpad has me doing more development in Firefox so there is always a chance I may move from Chrome to Firefox as my web development browser of choice. Maybe.