在网页开发过程中，经常需要测试JavaScript代码以确保其功能符合预期。最近，一直在利用Firefox浏览器的Scratchpad功能来测试网页上的JavaScript代码，并运行自动化脚本。在接下来的部分，将详细介绍如何利用这个工具来实现这些功能。
为了演示，假设有一个客户想要一个网页应用小部件，该小部件会询问访问者他们希望看到的内容类型。
为了确保这正是客户想要的，将创建一个原型小部件：
客户表示目前的表单很好，但要求表单字段每五秒钟改变一次颜色，以吸引访问者的注意力。
由于这个新需求需要动态改变小部件，将需要使用JavaScript。有很多不同的方法可以快速编写并测试网页上的JavaScript代码：
相信还有其他的选择。由于本文将介绍Scratchpad，让尝试这种方法。
要打开Scratchpad，请启动Firefox并按Shift+F4。为了熟悉这个工具，让尝试改变电子邮件文本框中的值。为此，需要表单的HTML和CSS。
可以从这里下载它。
使用Firefox浏览器打开HTML文档，启动Scratchpad，添加以下JavaScript代码，然后在Scratchpad中按运行：
document.getElementById("email").value = "test@scratchpad.ca";
然后电子邮件字段就会改变为test@scratchpad.ca。
现在已经熟悉了工具的工作原理，让为客户创建引人注目的功能。
在Scratchpad中，对HTML文档测试以下JavaScript：
(function() {
var CSSHelper = function() {
var getRandomNumberForColor = function() {
var maxColor = 256;
return Math.floor(Math.random() * maxColor);
};
var 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);
})();
一旦在Scratchpad中运行这段代码，可以看到表单字段的背景颜色每五秒钟随机变化。太棒了！向客户展示了这个功能，他们说这正是他们想要的。太棒了！
客户对展示的内容表示满意，并表示不需要任何更改。现在必须开始测试表单。可以通过手动输入数据到表单中，但让不要重复自己。启动Scratchpad，并运行以下代码：
(function() {
var getRandomValue = function() {
var randomValue = Math.floor(Math.random() * (Math.pow(2, 16)));
return randomValue;
};
var setFieldsToRandomValue = function() {
document.getElementById('name').value = 'Name ' + (getRandomValue());
document.getElementById('email').value = 'email' + getRandomValue() + '@fake.ca';
document.getElementById('Comments').value = 'Comments ' + (getRandomValue());
};
})();
看，这段JavaScript代码通过简单地利用Scratchpad自动填写表单字段，为节省了时间！不要重复自己，同时测试表单。