From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/tools/debugger/how_to/index.html | 11 ++++++ .../debugger/how_to/open_the_debugger/index.html | 12 ++++++ .../zh-cn/tools/debugger/how_to/search/index.html | 44 ++++++++++++++++++++++ .../debugger/how_to/use_a_source_map/index.html | 35 +++++++++++++++++ 4 files changed, 102 insertions(+) create mode 100644 files/zh-cn/tools/debugger/how_to/index.html create mode 100644 files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/zh-cn/tools/debugger/how_to/search/index.html create mode 100644 files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html (limited to 'files/zh-cn/tools/debugger/how_to') 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 +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

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 +--- +
{{ToolsSidebar}}

这样打开调试器：在火狐浏览器菜单中的Web开发者子菜单中选择"Debugger"选项 (or Tools menu if you display the menu bar or are on OS X),或者同时按住"Control-Shift-S"(对于MAC用户:Command-Option-S)

+ +

打开之后,调试器工具箱 Toolbox 将在浏览器底部显示，如下图一样。

+ +

+ +

 

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 +--- +
{{ToolsSidebar}}
+ +

搜索文件

+ +

按下Ctrl + P （或者在Mac上按下 Command + P）并输入文件名来搜索文件。源码区会在你输入的过程中显示所有符合搜索条件的文件。你可以用上下箭头在列表中移动并选择文件，按下回车Return来打开文件:

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

在文件中搜索

+ +

要在源码区中搜索已打开文件的中的内容，在源码区有焦点的情况下按下Control + F（或者在Mac上按下Command + F）输入后按下回车Return开始搜索。调试器会显示符合搜索条件的数量，并高亮显示每个结果：

+ +

+ +

使用Outline

+ +

如果你正在当前的JavaScript文件中找函数，你可以用Outline来快速的找到那个函数。Outline中列出了当前文件中的函数，默认是以函数在文件中的顺序排序的。但是你可以在底部使用“根据函数名排序”（Sort by name）的功能来加快搜索。

+ +

+ +

你可以使用过滤功能来更加快速的找到想要的函数，只需要在Outline顶上的文本框中输入文字就可以过滤不需要的结果。例如我在上图中的Filter functions中输入“load”，我就可以得到以下结果：

+ +

+ +

只有函数名中包含“load”的函数会显示出来。

+ +

这个功能在搜索只有几个函数的文件时可能不会那么游泳，但是当你在一个有数十个函数的文件中找想要的函数的时候就会显得方便。

+ +

在所有文件中搜索

+ +

你也可以在所有文件中找一个字符串。按下 Shift + Ctrl + F（Windows和Linux系统）或者Shift + Cmd + F（macOS系统）并输入你想要找的字符串。

+ +

+ +

如果目标字符串存在在文件中，Debugger会显示一个列表，包含所有找到的文件和字符串对应的行号。

+ +

+ +

只需在列表中点击对应的项目就可以直接前往到那个文件中的那一行，也就是包含要搜索的字符串的地方。

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 +--- +
{{ToolsSidebar}}
+ +
被浏览器执行的JavaScript代码通常会以某种方式从开发人员创建的原始资源中转译而来。例如：
+ + + +

在这些场景下，调试原始源代码会比浏览器下载的转换后的代码更加容易。 source map 是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。

+ +

为了调试工作能够使用source map，你必须：

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

在此视频我们加载了 https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. 页面加载一个名为“main.js”的源，该源最初是用CoffeeScript编写的，并编译为JavaScript。已编译的源包含这样的注释，指向源映射：

+ +
//# sourceMappingURL=main.js.map
+ +

在调试器的 source list pane 中，原始的CoffeeScript源现在显示为“main.coffee”，我们可以像调整任何其他源一样调试它。.

-- cgit v1.2.3-54-g00ecf