Firefox 的 JavaScript 调试器有三个面板。

第一个面板位于左边，它包含你正在调试的网页的文件列表。从列表中选中你要操作的文件。单击以选择该文件，并在调试器的中间面板中查看其内容。

在你想要停止执行的位置设置断点。在下面图片中，高亮的第 18 行就是被设置的断点。

右边的面板会显示你添加的监视表达式与断点。

在下图中，第一个区域，监视表达式，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。

接下来的部分，断点，列出了页面上设置的断点。在 example.js 中，一个断点被设置在语句 listItems.push(inputNewItem.value); 上。

最后两个部分，只在代码运行时才出现。

调用堆栈区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。

最后一部分，作用域，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。