当然，还有另外两种简单的方法可以到达您关心的源代码。一种是在 JavaScript 中添加“debugger”关键字。这是一个信号，表明从该行代码开始调试。另一种是使用“在异常时暂停”功能。如果您的代码遇到未处理的异常，您只需在工具栏中选中该框，调试器将在遇到异常时暂停。

查看您关心的源代码后，您可以在 JavaScript 源代码视图中单击行号左侧来设置断点。

调试器暂停脚本后

调试器暂停您的脚本后，堆栈帧将在左侧窗格中列出，范围内的变量将在右侧窗格中显示。工具栏具有标准的调试器控件集：恢复、单步执行、步入和步出。使用这些控件可以控制 JavaScript 代码的执行方式，以便您可以观察程序的运行情况。

逐步执行程序时，您会看到变量窗格中显示的变量随着其值变化而闪烁。您甚至可以通过单击值来更改变量的值。您为变量值输入的任何内容都将作为 JavaScript 代码进行评估，因此您可以输入[1,2,3,4]作为值，该变量将设置为一个数组。调试器还会告诉您该变量是否具有 属性描述符 来控制其行为。您可以在上面的截图中的工具提示中看到此信息。

幕后

这个新的调试器不仅仅是在 Firefox 的 JavaScript 引擎（SpiderMonkey）多年来为 Firebug 等工具提供的功能基础上添加了一个新的用户界面。SpiderMonkey 中的整个 调试接口 已完全重新设计。由于新的调试器后端，Web 开发者可以获得两大好处

1. 速度快！使用调试器运行的 JavaScript 应用程序的运行速度几乎与没有调试器时一样快。
2. 可远程访问！您可以将调试器用户界面连接到运行在其他位置的调试器后端。

上面的第二点非常令人兴奋，因为它意味着您将能够调试在 Firefox for Android 或 Firefox OS 中运行的 JavaScript 代码，这一切都可以在您桌面或笔记本电脑上的 Firefox 上完成。

在以后的文章中，我们将向您展示如何做到这一点。

响应式设计视图

如今，强大的 Web 设备形状和尺寸各不相同，人们已转向 响应式 Web 设计 作为适应这些不同屏幕的一种方法。Firefox 中的新响应式设计视图使您可以轻松地调整正在查看的页面的大小。

显示 Twitter Bootstrap 的响应式设计视图

使用响应式设计视图，您无需不断地拿出手机查看设计效果，就可以对设计进行操作。而且，您可以在不缩小浏览器工具、工具栏和其他选项卡的情况下尝试设计。

Chris Heilmann 制作了一段 视频演示响应式设计视图（以及下面讨论的布局视图）的操作方式。

布局视图

自从 我们首次推出样式检查器 以来，就可以使用内置工具查看为某个节点设置的边距、填充和边框。但是，在设计布局时，将所有这些值集中在一个视图中会非常有用。现在，该视图已作为样式检查器的一部分提供。

默认情况下，布局视图折叠为单行，显示元素的大小。单击三角形以查看整个视图，该视图将显示外部的边距、边框宽度以及盒子内部的填充。

其他改进

自从页面检查器几个月前推出以来，我们收到了很多反馈。许多人喜欢它突出显示您正在操作的元素的吸引人的方式。另一方面，有时您需要将工具移开，以便您只看到用户看到的页面。现在，可以使用工具栏上的新选项菜单轻松关闭这种花哨的突出显示行为

最后，Web 控制台 的性能有了大幅提升。无论您是否打开了 Web 控制台，现在每次调用 console.log() 都会快得多。试试看吧！

了解详情

我们还有更多功能正在开发中，并且还计划在将来推出更多功能。我们将在 Hacks 上通知您有关发布的信息，但如果您有兴趣分享您的意见或参与代码开发，您可以直接与开发人员联系。查看我们的 参与 页面，了解可用的部分联系方式。