7 files changed, 369 insertions, 0 deletions
diff --git a/files/zh-cn/tools/debugger/how_to/index.html b/files/zh-cn/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html b/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..ccb9c8c108
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,12 @@
+---
+title: Open the debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div><p>这样打开调试器：在火狐浏览器菜单中的Web开发者子菜单中选择"Debugger"选项 (or Tools menu if you display the menu bar or are on OS X),或者同时按住"Control-Shift-S"(对于MAC用户:Command-Option-S)</p>
+
+<p>打开之后,调试器工具箱 <a href="/en-US/docs/Tools/Tools_Toolbox" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> 将在浏览器底部显示，如下图一样。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7019/01-overview-startup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/debugger/how_to/search/index.html b/files/zh-cn/tools/debugger/how_to/search/index.html
new file mode 100644
index 0000000000..13eee9b662
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/search/index.html
@@ -0,0 +1,44 @@
+---
+title: 搜索
+slug: Tools/Debugger/How_to/Search
+translation_of: Tools/Debugger/How_to/Search
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="搜索文件">搜索文件</h2>
+
+<p>按下<kbd>Ctrl</kbd> + <kbd>P</kbd> （或者在Mac上按下 <kbd>Command</kbd> + <kbd>P</kbd>）并输入文件名来搜索文件。<a href="/zh-CN/docs/Tools/Debugger/UI_Tour#Source_pane">源码区</a>会在你输入的过程中显示所有符合搜索条件的文件。你可以用上下箭头在列表中移动并选择文件，按下回车<kbd>Return</kbd>来打开文件:</p>
+
+<p>{{EmbedYouTube("xXsfYx0THWg")}}</p>
+
+<h2 id="在文件中搜索">在文件中搜索</h2>
+
+<p>要在<a href="/zh-CN/docs/Tools/Debugger/UI_Tour#Source_pane">源码区</a>中搜索已打开文件的中的内容，在源码区有焦点的情况下按下<kbd>Control</kbd> + <kbd>F</kbd>（或者在Mac上按下<kbd>Command</kbd> + <kbd>F</kbd>）输入后按下回车<kbd>Return</kbd>开始搜索。调试器会显示符合搜索条件的数量，并高亮显示每个结果：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16906/search_code.png" style="border: 1px solid black; display: block; height: 236px; margin: 0px auto; width: 545px;"></p>
+
+<h3 id="使用Outline">使用Outline</h3>
+
+<p>如果你正在当前的JavaScript文件中找函数，你可以用Outline来快速的找到那个函数。Outline中列出了当前文件中的函数，默认是以函数在文件中的顺序排序的。但是你可以在底部使用“根据函数名排序”（Sort by name）的功能来加快搜索。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16907/outline_sorted.png" style="display: block; margin: 0 auto;"></p>
+
+<p>你可以使用过滤功能来更加快速的找到想要的函数，只需要在Outline顶上的文本框中输入文字就可以过滤不需要的结果。例如我在上图中的Filter functions中输入“load”，我就可以得到以下结果：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16908/outline_filtered.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>只有函数名中包含“load”的函数会显示出来。</p>
+
+<p>这个功能在搜索只有几个函数的文件时可能不会那么游泳，但是当你在一个有数十个函数的文件中找想要的函数的时候就会显得方便。</p>
+
+<h2 id="在所有文件中搜索">在所有文件中搜索</h2>
+
+<p>你也可以在所有文件中找一个字符串。按下 <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>F</kbd>（Windows和Linux系统）或者<kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>F</kbd>（macOS系统）并输入你想要找的字符串。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16790/searchInAllFiles.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p>
+
+<p>如果目标字符串存在在文件中，Debugger会显示一个列表，包含所有找到的文件和字符串对应的行号。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16789/ctrlShiftF.png" style="border: 1px solid black; display: block; height: 342px; margin: 0px auto; width: 800px;"></p>
+
+<p>只需在列表中点击对应的项目就可以直接前往到那个文件中的那一行，也就是包含要搜索的字符串的地方。</p>
diff --git a/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html b/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..720ef16622
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,35 @@
+---
+title: 使用 source map
+slug: Tools/Debugger/How_to/Use_a_source_map
+tags:
+  - Use a source map
+  - source map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<div>被浏览器执行的JavaScript代码通常会以某种方式从开发人员创建的原始资源中转译而来。例如：</div>
+
+<ul>
+ <li>源码通常会合并和最小化以高效的从服务器端获取</li>
+ <li>页面中运行的JavaScript通常是机器生成的，就像从CoffeeScript或TypeScript这样的语言编译时一样。</li>
+</ul>
+
+<p>在这些场景下，调试原始源代码会比浏览器下载的转换后的代码更加容易。 <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> 是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。</p>
+
+<p>为了调试工作能够使用source map，你必须：</p>
+
+<ul>
+ <li>生产一个source map</li>
+ <li>加入一个注释在转换后的文件，它指向source map。注释的语法类似：</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>在此视频我们加载了 <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. 页面加载一个名为“main.js”的源，该源最初是用CoffeeScript编写的，并编译为JavaScript。已编译的源包含这样的注释，指向源映射：</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>在调试器的 <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a> 中，原始的CoffeeScript源现在显示为“main.coffee”，我们可以像调整任何其他源一样调试它。.</p>
diff --git a/files/zh-cn/tools/debugger/index.html b/files/zh-cn/tools/debugger/index.html
new file mode 100644
index 0000000000..39c4b178a6
--- /dev/null
+++ b/files/zh-cn/tools/debugger/index.html
@@ -0,0 +1,84 @@
+---
+title: 调试器
+slug: Tools/Debugger
+tags:
+  - 工具
+  - 开发工具
+  - 火狐操作系统
+  - 调试器
+  - 调试技术
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>JavaScript Debugger允许单步调试，进入到你的Javascript代码中审查并修改相应的值，便于追踪缺陷。</p>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>你可以运用JS Debugger来调试并运行在远程或本地的代码，比如在火狐OS或安卓设备上。远程调试请查看 <em><u><a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">远程调试</a>  </u></em>，来学习如何将调试器与远程目标连接起来 。</p>
+
+<p>这里有一份<a href="/zh-CN/docs/Tools/Debugger/UI_Tour">快速指南</a>来帮助你熟悉JS Debugger的界面。</p>
+
+<h2 id="如何使用？">如何使用？</h2>
+
+<p>你可以参考以下文档来了解如何使用Debugger。</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Open_the_debugger">打开Debugger</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">美化源代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Search">搜索</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">使用source map</a></li>
+</ul>
+</div>
+
+<h3 id="暂停执行">暂停执行</h3>
+
+<p>有时你可能想暂停正在执行的代码，来了解代码的各个部分在做什么。为了告诉Debugger何时暂停执行，有以下多种不同的方法：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_a_breakpoint">设置断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">设置条件断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_an_XHR_breakpoint">设置XHR断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_event_listener_breakpoints">设置Event Listener断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Breaking_on_exceptions">设置异常断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Use_watchpoints">使用watchpoints</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Break_on_DOM_mutation">设置DOM变化断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Disable_breakpoints">禁用断点</a></li>
+</ul>
+</div>
+
+<h3 id="控制执行">控制执行</h3>
+
+<p>代码暂停执行之后能够做什么？</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Step_through_code">单步执行</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Black_box_a_source">忽略源代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Debug_worker_threads">调试worker线程代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Debug_eval_sources">调试eval()中的代码</a></li>
+</ul>
+</div>
+
+<h3 id="观察变量">观察变量</h3>
+
+<p>在执行期间或暂停时，有时你可能会想观察变量或表达式的值。</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_a_logpoint">设置日志点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_Watch_Expressions">设置watch表达式</a></li>
+</ul>
+
+<hr>
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>
+  <p><a href="/zh-CN/docs/Tools/Debugger/Keyboard_shortcuts">Debugger键盘快捷键</a></p>
+ </li>
+ <li>
+  <p><a href="/zh-CN/docs/Tools/Debugger/Source_map_errors">Source map错误</a></p>
+ </li>
+</ul>
diff --git a/files/zh-cn/tools/debugger/source_map_errors/index.html b/files/zh-cn/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..89ad97c20f
--- /dev/null
+++ b/files/zh-cn/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,68 @@
+---
+title: Source map errors
+slug: Tools/Debugger/Source_map_errors
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Reference
+  - Source maps
+  - Tools
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div><p class="summary"><span style="">源映射是JSON文件，它提供了一种方法，可以将转换的源代码与开发人员所看到的原始资源关联起来，就像浏览器所看到的那样。您有时可能会遇到使用源映射的问题。这一页解释了最常见的问题以及如何修复它们。</span></p>
+
+<div class="note">
+<p><span style="">注意:如果你是新手地图的新手，你可以在如何使用源地图上了解更多的信息。</span></p>
+</div>
+
+<h2 id="通用源映射错误报告"><span style="">通用源映射错误报告</span></h2>
+
+<p><span style="">如果您确实看到了问题，将在webconsole中显示一条消息。该消息将显示一个错误消息、资源URL和源映射URL:</span></p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span style="">这里，资源URL告诉我们这个bundle。js提到了一个源映射，源映射URL告诉我们在哪里找到源映射数据(在本例中是相对于资源的)。这个错误告诉我们源映射不是JSON数据，所以我们正在为错误的文件服务。</span></p>
+
+<p><span style="">有一些常见的方法可以使源图出错;下面几节将详细介绍这些内容。</span></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="缺少或无法访问的源映射"><span style="">缺少或无法访问的源映射</span></h2>
+
+<p><span style="">源映射资源可能会丢失或无法访问。</span></p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p><span style="">这里的解决方法是确保文件已经被服务并且可以访问浏览器</span></p>
+
+<h2 id="无效的源图"><span style="">无效的源图</span></h2>
+
+<p><span style="">源映射数据可能是无效的——要么根本不是一个JSON文件，要么是一个不正确的结构。典型的错误消息是:</span></p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="原始失踪"><span style="">原始失踪</span></h2>
+
+<p><span style="">一个原始的源可能会丢失。在调试器中尝试打开原始源代码时，您可能会遇到这种情况。在这种情况下，信息看起来有点不同:</span></p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p><span style="">在这种情况下，错误也会显示在调试器的source选项卡中:</span></p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
diff --git a/files/zh-cn/tools/debugger/ui_tour/index.html b/files/zh-cn/tools/debugger/ui_tour/index.html
new file mode 100644
index 0000000000..6ba5320fca
--- /dev/null
+++ b/files/zh-cn/tools/debugger/ui_tour/index.html
@@ -0,0 +1,115 @@
+---
+title: UI Tour
+slug: Tools/Debugger/UI_Tour
+translation_of: Tools/Debugger/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>本文对JavaScript Debugger的用户图形界面的主要部分进行快速的介绍。UI分成六个主要部分,后面将单独介绍这六个部分.</p>
+
+<ul>
+ <li><a href="#toolbar">Toolbar 工具栏</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Source list pane 源文件列表区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack_pane">Call stack pane 调用栈区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">Source pane 源码区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane">Variables pane 变量区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Events_pane">Events pane 事件区</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7063/03-ui-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Toolbar"><a name="toolbar">Toolbar</a></h2>
+
+<p>工具栏由下面四部分组成:</p>
+
+<ul>
+ <li>一组控制脚本跳转的按钮</li>
+ <li>调用栈的可视化</li>
+ <li>脚本过滤器</li>
+ <li>buttons to:
+  <ul>
+   <li>关闭/打开变量和事件面板</li>
+   <li>控制debugger的按钮</li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7035/09-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">左边的四个按钮完成以下的功能:</p>
+
+<ul>
+ <li><strong>Pause/Resume</strong> (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.</li>
+ <li><strong>Step Over</strong> (F10): steps across the current line of JavaScript code.</li>
+ <li><strong>Step Into</strong> (F11): steps into the function call on the current line of JavaScript code.</li>
+ <li><strong>Step Out</strong> (Shift-F11): runs the script until the current function exits.</li>
+</ul>
+
+<p>调用栈的可视化显示正在中断的执行代码点的调用栈。</p>
+
+<h2 id="Source_list_pane_源文件列表区">Source list pane 源文件列表区</h2>
+
+<p>源文件列表区显示了所有被加载到当前页面的JS源文件，可以在这些源文件中选择其中一个进行调试。源文件列表区和调用栈区共享一块屏幕区域，可以使用该区域最上方的标签按钮在源文件列表区和调用栈区之间进行切换。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7025/04-source-list.png" style="display: block; margin-left: auto; margin-right: auto;">源文件被根据加载的来源进行分类。当选择其中一个源文件，该源文件将被加载到源码区显示。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7071/24-source-list-details.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ 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:</p>
+
+<ul>
+ <li>enable, disable or remove this breakpoint, all breakpoints, or all breakpoints except this one</li>
+ <li>make this breakpoint conditional (or edit its conditions, if it is already conditional)</li>
+</ul>
+
+<p>The three icons at the bottom of the source list pane enable you to <a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">black box a source</a>, <a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">pretty-print minified JS files</a>, and <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">disable/enable all breakpoints</a>.</p>
+
+<h2 id="Call_stack_pane">Call stack pane</h2>
+
+<p>调试器左边的另一个标签显示垂直调用栈。</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7081/23-call-stack.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
+
+<h2 id="Source_pane_源码区">Source pane 源码区</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9829/debugger-source-pane.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>源码区显示从源码列表区选择的当前源文件。断点是一个在行号旁边的蓝色圆点，当调试到该断点的时候，该断点内部将显示一个蓝色的箭头。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7031/07-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>在源码区，通过上下文菜单可以实现：</p>
+
+<ul>
+ <li>设置一个断点</li>
+ <li>设置一个条件断点</li>
+ <li>add a watch expression for the selection</li>
+ <li>使用脚本过滤器搜索或过滤</li>
+</ul>
+
+<h3 id="Variables_popup_变量弹出框">Variables popup 变量弹出框</h3>
+
+<p>当鼠标悬停在源码区的某个变量，一个弹出框将出现，显示当前变量的值：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7033/08-variable-popup.png" style="display: block; margin-left: auto; margin-right: auto;">通过变量弹出框可以快速查看某个变量的值，不需要通过打开和搜索变量区查看变量的值。</p>
+
+<h2 id="Variables_pane_变量区">Variables pane 变量区</h2>
+
+<p>变量区可以查看和修改正在运行脚步的内部状态：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7037/10-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">变量区和事件区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。</p>
+
+<p> </p>
+
+<h2 id="Events_pane_事件区">Events pane 事件区</h2>
+
+<p><span>事件区显示当前代码绑定的所有DOM事件。</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7041/12-events.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>事件区和变量区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。</p>
+
+<p>事件区根据事件的类型分类显示，下面的截屏显示了四种类型的事件：Interaction, Keyboard, Mouse,和Navigation。每种分类下面列出了在代码中使用下面语法注册的所有事件。</p>
+
+<pre>[event name] on [event target] in [source file]</pre>
+
+<p>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.</p>
+
+<p> </p>