此文章与 Cordova 中有关调试的内容相匹配。 这些步骤与工具和功能介绍（大约为开始后的四分钟）之后的视频内容相匹配。

1. 按 F5 启动调试器。

2. 在 Ripple 中加载 ToDoList 应用后，添加另一个任务项以验证该应用正常工作。

3. 添加断点后，编辑器如下所示。

4. 在正在运行的应用中，添加另一个 ToDoList 任务项。

   现在，当你输入项时，调试器将中断代码。

   • 将鼠标悬停在变量上以查看其当前值（参见前面的插图）。

   • 按 F10 单步执行代码，以便检查更新后的值。

   • 打开选定变量的快捷菜单，然后选择 “添加监视”。

     “监视”窗口中将显示选定变量，这样便可以很好地查看多个变量及其值，即使在单步执行代码的过程中这些变量和值发生变化时。

   • 使用“本地变量”窗口和“调用堆栈”窗口查看有关调试时应用的状态的详细信息。

5. 运行应用时，选择 选项卡。

   在 DOM 资源管理器左侧，可以看到实时 DOM 视图。

6. 选择“选择元素” 按钮，然后在 Ripple 仿真器中选择一些元素（如列表项）。

   选择元素后，相应的元素将在 DOM 资源管理器中突出显示。

   右侧显示当前选定元素的 CSS 属性值。

   • “样式”选项卡显示与该元素相关的 CSS 样式，这些样式按 CSS 选择器名称排列。

   • “计算”选项卡显示该元素的实时 CSS 样式属性值。

   • “布局”选项卡显示该元素的方框模型。

   你可以在 DOM 资源管理器中对（实时 DOM 视图、“样式”和“布局”选项卡中的）UI 进行更改，并确定更改是否立即反映在正在运行的应用中。 这使得 UI 更易于调试。

   例如，你可以编辑“样式”选项卡中列表项（<input> 元素）的字体大小。

7. 选择一个元素，如 ToDo 列表项下的位置（<h3> 元素），然后编辑该值。

   你的更改将出现在 Ripple 仿真器内的应用中。

   你还可以使用 JavaScript 控制台窗口来读取正在运行的应用发出的错误和消息，也可用于评估在当前脚本上下文内运行的 JavaScript 代码行。

8. 查看 JavaScript 控制台窗口中的输出以查看消息。

9. 你可以通过按 Enter（单行模式）或通过选择绿色箭头按钮（多行模式）来运行代码。

10. 按 Enter 查看控制台窗口中文档对象的值。

    在代码中设置断点以使应用进入期望的状态，然后使用 JavaScript 控制台检查变量并评估代码。

使用“调用堆栈”窗口可以查看当前堆栈上的函数或过程调用。

“调用堆栈”窗口显示每个函数的名称以及编写它所用的编程语言。 函数或过程名称可能包含可选信息，如模块名称、行号、参数名称、类型和值。 可以打开或关闭这些可选信息的显示。

一个黄色箭头标识执行指针当前所位于的堆栈帧。 默认情况下，该帧的信息显示在源、“反汇编”、“局部变量”、“监视”和“自动”窗口中。 如果想将上下文更改为堆栈上的另一个帧，可以在“调用堆栈”窗口中执行相应的操作。

当调试符号对部分调用堆栈不可用时，“调用堆栈”窗口也许就不能显示那部分调用堆栈的正确信息。 将出现以下表示法：

[下面的帧可能不正确和/或缺失，没有为 Framework 符号或系统符号，也可以是正在调试的计算机上的某个符号路径中的符号。