initial commit

4 files changed, 102 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>