调试器

JavaScript Debugger允许单步调试，进入到你的Javascript代码中审查并修改相应的值，便于追踪缺陷.

你可以运用JS Debugger来调试并运行在远程或本地的代码，比如在火狐OS或安卓设备上。远程调试请查看 远程调试  ，来学习如何将调试器与远程目标连接起来 。

在火狐浏览器的web开发者菜单下选中调试器就可以打开调试窗口（如果你显示了菜单栏，点击工具栏也可是可以打开的，当然包括苹果系统），,或者输入快捷键 Control-Shift-S (苹果系统为Command-Option-S).

工具栏 将会在浏览器的最底部展示，此时调试器已经被激活。当你第一次打开的时候类似下图:

正在调试时的截图如下:

在这里我们简短快速的介绍了调试器窗口，紧接着我们将展示一些常用的调试技巧.

调试器窗口

调试器窗口可以拆分为六大区域，在这里我们将逐一介绍:

• toolbar 工具栏
• source list pane 源码列表区
• call stack pane 调用栈区 (new in Firefox 29)
• source pane 源码区
• variables pane 变量区
• events pane 事件区

Source list pane

资源列表显示区显示了此页面加载的所有脚本源文件，你可以选择一个并进行调试，从Firefox版本29开始，资源列表展示区与  call stack pane（调用栈）展示区域进行了共享，你可以点击不同的tab标示进行来回切换.

源文件在展示时根据不同的加载来源进行了分组. 你可以选择任意个文件，然后他们将被加载到 Source pane（源码区域）进行展示.
你在源文件中设置的任何断点将被显示在资源列表区域的对应文件下。如果要设置断点的启动与禁用你可以对断点前的复选框进行操作。如果对着断点记录点击右键会显示一个菜单，你可以进行如下操作：

• 启用、禁用或删除断点、删除/禁用/启用所有断点、或删除/禁用/启用除此外的所有断点、
• 配置条件断点 （如果他已经有条件，你还修改他的条件）

资源列表区域底部的三个图标可以让你切换black boxing(黑盒)、美化脚本、禁用/启用所有断点.

黑盒测试

T左下角的眼睛是一个按钮，可以在你选中文件后进行 black box （切换黑盒）。切换黑盒功能在查看源文件但不调试源文件时非常有用，就像jQuery的包一样。如果一个资源进入黑盒状态，此时调试器将不在关注此资源：所有在些文件中设置的断点将会失效，并且调试器跟踪到这里时将会跳过这里的代码。

在Firefox版本小于27以前，这个眼睛图标会在鼠标移动到资源文件周围时，在他前面显示出来.

Pretty printing

这对花括号 {} 允许你装压缩过（minified）的脚本进行美化 pretty-print files that have been , 这样方便你的阅读.

Toggle all breakpoints

这个按钮允许你在一次调试中禁用所有断点，或者重启激活他们。这将方便你在运行与调试之间来回切换。

回调面板

Debugger左侧陈列着一个垂直的回调面板：

正如前面的栈框架所示，每一行表示一个回调级别。选中的哪行显示正在执行的函数名， 一个源文件链接和行号。

资源面板

这表示JS文件已经加载好了。挨着行号的蓝色圆圈是断点， 运行到断点处里面有一个蓝色箭头。

在源文件面板，右键菜单使你可以：

• 设置断点
• 设置有条件的断点
• 为选区添加一个监控表达式
• 用 脚本筛选 功能搜索或者过滤

Variables popup 变量弹出框

如果在源文件面板中将鼠标移到一个变量上， 会出现一个弹出消息提示变量当前值：

这让你可以快速查看变量，而不用打开变量面板再搜索。

工具条

工具条由四个部分组成：

• 一组控制脚本跳转的按钮
• 调用栈的可视化
• 脚本过滤器
• 关闭/打开变量和事件面板 以及 控制debugger的按钮

左边的四个按钮实现下面的功能:

• 暂停/恢复 (F8): 调试脚本的时候执行。当它变蓝,并且有“按下”的状态时，意味着脚本已经暂停 ，因为你已经按下暂停按钮或者遇到一个断点。
• 单步跳过 (F10): 跨越当前行JavaScript代码进入下一行。
• 单步进入 (F11): 进入当前JavaScript的函数体。
• 单步退出 (Shift-F11): 运行脚本直到当前函数退出。

调用堆栈视图显示只有在点执行暂停的时候显示。

脚本筛选器Script filter

脚本筛选可以在三个面板中搜索，以特殊字符开头的表达式，这些字符有多种不同的功能。

当你点击筛选器时，这些选项会以跳出窗口的形式展现，你也可以通过资源面板的组件菜单（context menu）来访问他们。前缀可提供更为有力的查询，如"file.js:12"，这会打开file.js并高亮12行，或者利用"mod#onLoad"，这能查找到所有包含onLoad文字列的文件名包含mod的文件。在查询时敲击回车键可以移动到下一搜索结果处。

调试器设置

At the right-hand end of the toolbar are two more buttons. The first of these shows and hides the variables and events panes, and the second enables you to toggle various debugger settings:

变量面板

可以在变量区查看或修改正在执行的脚本的变量状态(值):

The variables pane shares its screen real estate with the events pane, and you can use the tabs at the top of the pane to switch between them.

Examining variables

变量的不同作用域: 内建参数在函数作用域作为局部变量，就像例子中的 user 和 greeting 。同样在全局作用域中的全局变量，例子中的greetme，还有globals自带的 localStorage 和 console 。

每个对象都可以用一个三角形来显示其成员进行扩展。

将光标指在变量名上时会显示该变量的附加信息的tolltip。例如：光标指向greeting 对象时显示 "configurable enumerable writable"。可以在 Object.defineProperty() 查看这些属性描述的意义。

你可以通过在script filter中使用“*”修饰符来筛选显示的变量，或者在调试器设置中开启 Show Variables Filter Box 这个选项。

Modifying variables 修改变量值

通过点击当前变量的值并输入新的值就可以修改变量的值；例如，如果你点击变量greeting旁边的"Hi, Dr. Nick!" ，你就可以修改当前的值。

Watch expressions

监视表达式是在每次执行暂停时进行评估的表达式。 然后，您可以检查这些表达式的结果。 这些是有用的，因为它们允许您观察您知道的代码中的不变量，但不一定在代码中准备检查。 要添加监视表达式，请单击“添加监视表达式”的框，然后在逐步执行代码时输入要输出的JavaScript表达式。

然后开始运行你的代码。 在您开始执行代码之前，该表达式不会执行任何操作，因此在您到达断点之前，任何操作都不会发生。 此时，会显示一个显示您的主动观察表达式及其当前值的框：

您可以进行逐步浏览代码，观察表达式的变化值; 每次运行它，盒子将短暂闪烁黄色。 您可以通过单击旁边的“x”图标来删除一个表达式，当然，一次可以有多个watch表达式。

Highlight and inspect DOM nodes

如果你将鼠标悬停在变量窗格中的DOM节点，它会在页面中高亮显示：

同时，变量后面会出现一个目标的icon。
如果你点击目标icon, Inspector 会打开这个DOM元素。

Events pane 事件面板

事件窗格中列出目前所有从您的代码绑定监听所有DOM事件：

它和 variables pane是共享屏幕的实时状态的，所以你可以在两个面板之间切换。

It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:

[event name] on [event target] in [source file]

If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.

如何...?

打开调试器

为了能打开调试器，从Firefox菜单（当菜单栏显示或在OS X系统中可通过工具菜单）的Web Developer子菜单中选择"Debugger"，或者按下Control-Shift-S（在Mac上为Command-Option-S）。

找到源文件

当调试器被打开后，所有的JavaScript源文件将被列在源文件一览面板里。你可以从中找到你所需的文件，或者使用script filter来查找。

在源文件中查找

在源文件面板中打开一个文件来查找一个方法，搜索一个字段，或跳到某一行，你可以通过script filter里的special modifiers来实现。

设置断点

如下，在source pane源码区设置断点：

• 在源码区想要打断点的行号处单击。
• 或者，在源码区中，在想要打断点的行点击右键，在菜单中选择Add breakpoint"。

断点会在调试器的两个不同地方显示：

• 它们显示在源码列表区中的文件名下面。
• 源码区中被标记为蓝色圆点的行。

下面的截图显示了源码文件中第3和第10行处的断点：

设置条件断点

To set a conditional breakpoint, activate the context menu while on the line you want to break at, and select "Add conditional breakpoint". Then enter the conditional expression in the popup that appears:

To edit the condition, or to add a condition to a normal breakpoint, activate the context menu and select "Configure conditional breakpoint":

取消断点

这样取消断点:

• 取消源文件一览面板中断点边上的选择框
• activate the context menu while your mouse pointer is over the breakpoint's entry in the source list pane, and select "Disable breakpoint"

禁用/启用所有断点

To switch all breakpoints on or off, use the "Toggle all breakpoints" button in the Source list pane.

在DOM事件启用断点

If you're listening to a particular DOM event, you can tell the debugger to break when the event is triggered without having to track down the listener and set a breakpont manually.

First, open the events pane: click the button in the toolbar that opens the shared variables/events pane, then click the tab labeled "Events". The events pane will list all events for which you have assigned a listener:

Then check the box next to the event you want to break at.

When the event is triggered the code will break at the start of your listener.

单步调试

当代码执行在某个断点处停止，可以使用工具条左边的四个按钮进行单步代码调试。

按照从左到右的顺序，这些按钮是：

• Play: 调到下一个断点
• Step over: 跳到到同一个函数的下一行代码(也就是执行当前代码行)
• Step into: 跳到函数的下一行，如果是函数调用，就会进入被调用函数中。
• Step out: 跳到当前函数的结束处。

Use a source map

JavaScript sources are often combined and minified to make delivering them from the server more efficient. Increasingly, too, JavaScript running in a page is machine-generated, as when compiled from a language like CoffeeScript. By using source maps, the debugger can map the code being executed to the original source files, making debugging much, much easier.

To tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:

Of course, for this to work, you will need to have supplied a source map for the JavaScript running in the page. Do this by appending a comment directive to your source file:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Examine variables 检查变量

当代码在一个断点处停止执行，可以在变量区检查变量的状态。

全局变量，函数作用域变量，块作用变量或者其他有作用域的变量被分开显示，并且可以展开对象查看对象的属性。此外，可以通过script filter脚本过滤器使用 "*"前缀的字符串来定位需要查找的变量。

Modify variables 修改变量

当代码在一个断点处停止执行，可以在变量区修改变量的值。仅需要点击当前变量的值，就可以输入修改值。

Watch an expression监视表达

You can watch the value of a JavaScript expression using the "Add watch expression" function in the variables pane.

Debug mobile devices调试移动设备

更多关于调试移动设备的内容请参见remote debugging.

Black box a source

In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.

In versions of Firefox before Firefox 27, you can black box a source by clicking the eyeball icon next to the source in the source list pane:

From Firefox 27 onwards, enable or disable black boxing for a source by selecting the source in the source list pane and clicking the eyeball icon at the bottom left:

You can black box several sources at once by opening the developer toolbar and using the dbg blackbox command:

When a source is black boxed:

• Any breakpoints it may have are disabled.
• When “pause on exceptions” is enabled, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.
• The debugger will skip through black boxed sources when stepping.

Pretty-print a minified file

To pretty-print a file that has been minified, open the minified file and click the icon that contains a pair of braces:

The file will now appear in a more readable format:

From Firefox 29 onwards, you can instruct the debugger to detect minified sources and pretty-print them for you automatically, by selecting "Auto Prettify Minified Sources" in the Debugger settings.

Access debugging in add-ons

The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):

• window.addEventListener("Debugger:EditorLoaded") - called when the read-only script panel loaded.
• window.addEventListener("Debugger:EditorUnloaded")

Relevant files:

• chrome://browser/content/devtools/debugger-controller.js
• chrome://browser/content/devtools/debugger-toolbar.js
• chrome://browser/content/devtools/debugger-view.js
• chrome://browser/content/devtools/debugger-panes.js

Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug 653545.)

Keyboard shortcuts 键盘快捷键

1. By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this guide to using these keys as standard function keys. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use Shift + Function + F5).

Global shortcuts

These shortcuts work in all tools that are hosted in the toolbox.