这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

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

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

正在调试时的截图如下:

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

调试器窗口

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

Source list pane

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

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

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

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

Black boxing

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

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

Pretty printing

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

Toggle all breakpoints

切换所有断点状态按钮是在 Firefox 29+ 中出现的.

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

Call stack pane

回调面板是Firefox 29中新增的。

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

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

 

Source pane

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

在源文件面板,右键菜单使你可以:

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

Variables popup 变量弹出框

变量提示是在Firefox 28中新增的。

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

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

Toolbar 工具条

工具条由四个部分组成:

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

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

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

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

脚本筛选器Script filter

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

首字 功能
无首字 source list pane直接筛选
! 在所有文件中查找.
@ 在所有文件中查找包含该字符串的函数名.
# 在当前source pane中打开的文件搜索
: 在当前source pane中打开的文件跳转到给定行数
* variables pane筛选变量

These options are shown in a pop-up when you click in the filter, and they're also accessible from the context menu in the source pane. Prefixes can be combined to form more powerful queries, like "file.js:12", which will open file.js and highlight line 12, or "mod#onLoad", which will find the string onLoad in all files containing mod in their name. Hitting the Enter key after searching will cycle between the matches found.

Debugger settings 调试器设置

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:

Auto Prettify Minified Sources 这个选项开启的时候,调试器将自动检测压缩的Js文件并且美化(pretty-print)它。
Pause on Exceptions 这个选项开启的时候,脚本执行的过程中如果抛出异常将会自动暂停。
Ignore Caught Exceptions 如果这个选项被开启 (默认开启) 并且 "Pause on exceptions" 也开启, 只有当异常(exception )未被捕获时,脚本停止执行。这通常是你所希望的 (你不需要异常被捕获时触发暂停,因为这通常表示你的程序是正确地处理它).
Show Panes on Startup 这个选项开启的时候, 当第一次启动调试器的时候 variables pane 显示。
Show Only Enumerable Properties 只显示可枚举的JavaScript属性。
Show Variables Filter Box 开启这个选项将会在variables panel上添加一个"变量筛选"搜索栏,可以筛选并展示变量列表。
Show Original Sources 开启这个选项将会使调试器使用source maps,如果可用,来显示编译、压缩、甚至被编译成JavaScript语言(例如CoffeeScript)的源代码。该项默认开启。
Automatically Black Box Minified Sources

Firefox 33新增

对于URL以".min.js"结尾自动开启黑盒sources 。该项默认开启。

Variables pane 变量区

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

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

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

Highlight and inspect DOM nodes

 Firefox 29 新增功能

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

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

Events pane 事件面板

Firefox 27 新增

事件窗格中列出目前所有从您的代码绑定监听所有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.

How do I...?

Open the debugger 打开调试器

To open the debugger, select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X), or press Control-Shift-S (Command-Option-S on the Mac).

Find a source file 找到源文件

When the debugger's open, all the JavaScript source files are listed in the source list pane. You can browse the list to find the one you want, or search for a particular file using the script filter.

Find inside a file 在源文件中查找

To find a function, search for a string, or jump to a line in a file open in the source pane, you can use one of the special modifiers in the script filter.

Set a breakpoint 设置断点

如下,在source pane源码区设置断点:

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

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

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

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

Set a conditional breakpoint 设置条件断点

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":

Disable a breakpoint 取消断点

这样取消断点:

  • either: uncheck the check box next to the breakpoint's entry in the source list pane
  • or: activate the context menu while your mouse pointer is over the breakpoint's entry in the source list pane, and select "Disable breakpoint"

Disable/enable all breakpoints 禁用/启用所有断点

This feature is new in Firefox 29.

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

Break on a DOM event

This feature is new in Firefox 27.

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.

Step through my code 单步调试

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

按照从左到右的顺序,这些按钮是:

  • 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

To learn how to debug mobile devices, see the guide to 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

Pretty-printing is new in Firefox 28.

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 键盘快捷键

Command Windows OS X Linux
Open the Debugger Ctrl + Shift + S Cmd + Opt + S Ctrl + Shift + S
Search in the current source using the script filter Ctrl + F Cmd + F Ctrl + F
Find next in the current source Enter / Up arrow Return / Up arrow Enter / Up arrow
Find previous in the current source Shift + Enter / Down arrow Shift + Return / Down arrow Shift + Enter / Down arrow
Search in all sources using the script filter Ctrl + Alt + F Cmd + Opt + F Ctrl + Alt + F
Search for scripts by name Ctrl + P / Ctrl + O Cmd + P / Ctrl + O Ctrl + P / Ctrl + O
Search for function definitions Ctrl + D Cmd + D Ctrl + D
Filter variables when execution is paused Ctrl + Alt + V Cmd + Opt + V Ctrl + Alt + V
Resume execution when at a breakpoint F8 F8 1 F8
Step over F10 F10 1 F10
Step into F11 F11 1 F11
Step out Shift + F11 Shift + F11 1 Shift + F11
Toggle breakpoint on the currently selected line Ctrl + B Cmd + B Ctrl + B
Toggle conditional breakpoint on the currently selected line Ctrl + Shift + B Cmd + Shift + B Ctrl + Shift + B
Add selected text to Watch expressions Ctrl + Shift + E Cmd + Shift + E Ctrl + Shift + E
Go to line using the script filter Ctrl + L Cmd + L Ctrl + L
Search using the script filter Ctrl + O Cmd + O Ctrl + O
In the source pane, jump to a function definition (new in Firefox 44) Ctrl + click Cmd + click Ctrl + click

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.

Command Windows OS X Linux
Increase font size Ctrl + + Cmd + + Ctrl + +
Decrease font size Ctrl + - Cmd + - Ctrl + -
Reset font size Ctrl + 0 Cmd + 0 Ctrl + 0

文档标签和贡献者

 最后编辑者: Ellipse120,