UI Tour

本文对JavaScript Debugger的用户图形界面的主要部分进行快速的介绍。UI分成六个主要部分,后面将单独介绍这六个部分.

工具栏由下面四部分组成:

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

左边的四个按钮完成以下的功能:

Pause/Resume (F8): pauses or resumes execution of the script you're debugging. When it's blue and "pressed", as above, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.
Step Over (F10): steps across the current line of JavaScript code.
Step Into (F11): steps into the function call on the current line of JavaScript code.
Step Out (Shift-F11): runs the script until the current function exits.

调用栈的可视化显示正在中断的执行代码点的调用栈。

Source list pane 源文件列表区

源文件列表区显示了所有被加载到当前页面的JS源文件，可以在这些源文件中选择其中一个进行调试。源文件列表区和调用栈区共享一块屏幕区域，可以使用该区域最上方的标签按钮在源文件列表区和调用栈区之间进行切换。

源文件被根据加载的来源进行分类。当选择其中一个源文件，该源文件将被加载到源码区显示。

Any breakpoints you've set in a source file are listed in the source list pane under the filename. The check box next to each breakpoint lets you enable/disable it. Right-clicking on the breakpoint's entry in the list shows a context menu enabling you to:

enable, disable or remove this breakpoint, all breakpoints, or all breakpoints except this one
make this breakpoint conditional (or edit its conditions, if it is already conditional)

The three icons at the bottom of the source list pane enable you to black box a source, pretty-print minified JS files, and disable/enable all breakpoints.

Call stack pane

调试器左边的另一个标签显示垂直调用栈。

Each row represents a level in the call stack, with the current stack frame on top. The row shows the name of the function currently executing, and a link to its source file and line number.

Source pane 源码区

源码区显示从源码列表区选择的当前源文件。断点是一个在行号旁边的蓝色圆点，当调试到该断点的时候，该断点内部将显示一个蓝色的箭头。

在源码区，通过上下文菜单可以实现：

设置一个断点
设置一个条件断点
add a watch expression for the selection
使用脚本过滤器搜索或过滤

Variables popup 变量弹出框

当鼠标悬停在源码区的某个变量，一个弹出框将出现，显示当前变量的值：

通过变量弹出框可以快速查看某个变量的值，不需要通过打开和搜索变量区查看变量的值。

Variables pane 变量区

变量区可以查看和修改正在运行脚步的内部状态：

变量区和事件区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。

Events pane 事件区

事件区显示当前代码绑定的所有DOM事件。

事件区和变量区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。

事件区根据事件的类型分类显示，下面的截屏显示了四种类型的事件：Interaction, Keyboard, Mouse,和Navigation。每种分类下面列出了在代码中使用下面语法注册的所有事件。

[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.