Utilizing Firefox’s Scratchpad

Firefox’s Scratchpad is a useful feature within Firefox’s developer tools that allows one to run JavaScript on any web page. I have been using this feature lately to test JavaScript on webpages, and run automation scripts. I will go over how I have been able to accomplish this in the following sections.

Our Customers’ Needs

For demonstration purposes, let us say we have a client who wants a webapp widget that asks visitors for the type of content they would like to see.

Let us create a prototype widget to ensure that this is what the customer wants:

Requirement Change, Surprise

The client has said that the form is good thus far. However, the client has asked that the forms fields change to different colors every five seconds to attract visitor’s attention…

Since this new requirement will require dynamic changes to the widget, we will need to utilize JavaScript. There are many different options one could use to quickly write and test JavaScript against a webpage:

1. One could create a JavaScript file
2. One could create inline JavaScript using a script tag
3. One could utilize Firefox's Scratchpad

I am sure there are other options as well. Since in this post I am describing Scratchpad, let us try that avenue.

Creating and Running JavaScript with Scratchpad

To open Scratchpad, launch Firefox, and press Shift+F4. To become familiar with the tool, let us simply try to change the value within the email text box. To facilitate this, we will need the form's HTML and CSS. You can download it here.

Open the HTML document with the Firefox browser, launch Scratchpad, add the following piece of JavaScript, and then press run within Scratchpad:

document.getElementById("email").value = "test@scratchpad.ca";

The email field then changes to test@scratchpad.ca.

Now that we are familiar with how the tool works, let us create the flashy functionality for our client.

In Scratchpad, test the following JavaScript against our HTML document:

(function () {
  var
  CSSHelper = function () {
    var
    getRandomNumberForColor = function () {
      var
      maxColor = 256
      ;
      return (Math.floor(Math.random() * maxColor));
    },
    getFormattedRandomRGB = function () {
      var
      red = getRandomNumberForColor(),
      green = getRandomNumberForColor(),
      blue = getRandomNumberForColor()
      ;
      return 'RGB(' + red + ',' + green + ',' + blue + ')';
    }
    ;
    return {
      GetRandomRGB: getFormattedRandomRGB
    };
  }(),
  updateFieldsBackgoundColor = function () {
    document.getElementById('name').style['background-color'] = CSSHelper.GetRandomRGB();
    document.getElementById('email').style['background-color'] = CSSHelper.GetRandomRGB();
    document.getElementById('contentType').style['background-color'] = CSSHelper.GetRandomRGB();
    document.getElementById('Comments').style['background-color'] = CSSHelper.GetRandomRGB();
  }
  ;
  setInterval(function () {
    updateFieldsBackgoundColor();
  }, 5000);
}())

Once we run this code in Scratchpad against the widget’s HTML, we can see that the form’s fields background colors are changing randomly every five seconds. Awesome! I showed this to our customer and they said this is exactly what they are looking for. Excellent!

Automation Script

Our customer approves what we are showing them, and says that no changes are necessary. Now we have to start testing the form. We could manually input data into the form; however, let us not repeat ourselves. Launch Scratchpad, and run the following code against our widget.

(function () {
  var
  getRandomValue = function () {
    var
    randomValue = Math.floor(Math.random() * (Math.pow(2, 16)))
    ;
    return randomValue
  },
  setFieldsToRandomValue = function () {
    document.getElementById('name').value = 'Name ' + (getRandomValue());
    document.getElementById('email').value = 'email' + getRandomValue() + '@fake.ca';
    document.getElementById('Comments').value = 'Comments ' + (getRandomValue());
  }()
  ;
}())

Look at that, this piece of JavaScript is automatically filling out the form's fields with random data by simply leveraging Scratchpad. What a time saver! Way to not repeat ourselves while testing the form.

Conclusion

While this was a frivolous example, I have demonstrated how one could utilize Firefox’s Scratchpad by quickly mocking up some JavaScript to add functionality to a form, and creating an automation script that helped us not repeat ourselves while testing.

There are a myriad of other examples I can cover here, but I would like to offer a challenge to you! Come up with other techniques on how to leverage Scratchpad, and share them. That is it. That is all.

CodeProject