From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/tools/3d_view/index.html | 102 +++++++++++ files/zh-cn/tools/add-ons/index.html | 6 - files/zh-cn/tools/deprecated_tools/index.html | 122 ++++++++++++++ .../zh-cn/tools/page_inspector/3d_view/index.html | 102 ----------- .../page_inspector/how_to/edit_fonts/index.html | 22 +++ .../page_inspector/how_to/view_fonts/index.html | 22 --- files/zh-cn/tools/profiler/index.html | 140 ---------------- .../index.html | 38 +++++ .../index.html | 38 ----- .../zh-cn/tools/responsive_design_mode/index.html | 83 +++++++++ .../zh-cn/tools/responsive_design_view/index.html | 83 --------- files/zh-cn/tools/storage_inspector/index.html | 186 +++++++++++++++++++++ files/zh-cn/tools/tips/index.html | 135 +++++++++++++++ .../zh-cn/tools/using_the_source_editor/index.html | 93 ----------- files/zh-cn/tools/web_audio_editor/index.html | 38 +++++ .../index.html" | 38 ----- .../index.html" | 122 -------------- .../index.html" | 186 --------------------- .../index.html" | 135 --------------- 19 files changed, 726 insertions(+), 965 deletions(-) create mode 100644 files/zh-cn/tools/3d_view/index.html delete mode 100644 files/zh-cn/tools/add-ons/index.html create mode 100644 files/zh-cn/tools/deprecated_tools/index.html delete mode 100644 files/zh-cn/tools/page_inspector/3d_view/index.html create mode 100644 files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html delete mode 100644 files/zh-cn/tools/profiler/index.html create mode 100644 files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html delete mode 100644 files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html create mode 100644 files/zh-cn/tools/responsive_design_mode/index.html delete mode 100644 files/zh-cn/tools/responsive_design_view/index.html create mode 100644 files/zh-cn/tools/storage_inspector/index.html create mode 100644 files/zh-cn/tools/tips/index.html delete mode 100644 files/zh-cn/tools/using_the_source_editor/index.html create mode 100644 files/zh-cn/tools/web_audio_editor/index.html delete mode 100644 "files/zh-cn/tools/web\351\237\263\351\242\221\347\274\226\350\276\221\345\231\250/index.html" delete mode 100644 "files/zh-cn/tools/\344\270\215\346\216\250\350\215\220\347\232\204\345\267\245\345\205\267/index.html" delete mode 100644 "files/zh-cn/tools/\345\255\230\345\202\250\346\237\245\347\234\213\345\231\250/index.html" delete mode 100644 "files/zh-cn/tools/\345\260\217\346\212\200\345\267\247/index.html" (limited to 'files/zh-cn/tools') diff --git a/files/zh-cn/tools/3d_view/index.html b/files/zh-cn/tools/3d_view/index.html new file mode 100644 index 0000000000..60ea480269 --- /dev/null +++ b/files/zh-cn/tools/3d_view/index.html @@ -0,0 +1,102 @@ +--- +title: 三维视图 +slug: Tools/Page_Inspector/3D_view +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +
+

三维视图在 Firefox 47 被移除。

+
+ +

{{ fx_minversion_header("11") }}

+ +

当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.

+ +

3dview.png

+ +

按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 HTML面板和Style面板显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.

+ +

如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看blocklisted drivers page了解更多信息.

+ +

控制三维视图

+ +

通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能键盘快捷键 鼠标操作
放大/缩小+/-             滚轮向上/向下滚动
向左/向右旋转a / d按住左键向左/向右拖动
向上/向下旋转w / s按住左键向上/向下拖动
向左/向右平移← / →按住右键向左/向右拖动
向上/向下平移↑ / ↓按住右键向上/向下拖动
重置放大级别到默认状态0无
将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}f无
重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}r无
隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}x无
+ +

三维视图的用途

+ +

三维视图在很多种情形下都会派上用场:

+ + + +

相关链接

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/zh-cn/tools/add-ons/index.html b/files/zh-cn/tools/add-ons/index.html deleted file mode 100644 index 7c50cee424..0000000000 --- a/files/zh-cn/tools/add-ons/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 组件 -slug: Tools/Add-ons -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}

开发者工具没有内置到Firefox里面，而是作为组件的方式存在。

diff --git a/files/zh-cn/tools/deprecated_tools/index.html b/files/zh-cn/tools/deprecated_tools/index.html new file mode 100644 index 0000000000..f7bb80e5bf --- /dev/null +++ b/files/zh-cn/tools/deprecated_tools/index.html @@ -0,0 +1,122 @@ +--- +title: 不推荐的工具 +slug: Tools/不推荐的工具 +translation_of: Tools/Deprecated_tools +--- +

{{ToolsSidebar}}

+ +

在devtools的开发过程中，我们添加了几个实验面板来尝试新的想法。并不是所有这些都被广泛采用，而且由于维护成本的原因，很少使用的面板最终被移除。

+ +

我们已经创建了这个不推荐使用或删除的面板列表。此页记录不推荐使用的面板和跟踪其删除的错误。尽管这些面板已经被删除，但是您仍然可以访问旧代码，并且有其他的web扩展，您可以尝试获得类似的功能。

+ +


+ 当我们否决某个小组时，我们首先从社区获得反馈，以确定删除该小组的影响。一旦我们决定移除面板，我们将提供一条警告消息，最后，我们将从代码库中移除面板。

+ +


+ 尝试激活已弃用的面板时，可能会看到警告消息，如下图所示：

+ +

+ +

此外，如果打开其中一个工具的面板，您还将看到有关删除该工具的警告消息。

+ +

+ +

草稿行

+ +

从firefox 70开始，scratchpad将被弃用 ({{bug(1565380)}}).

+ +

它将在将来被删除（目前版本号未知)  （{{bug(1519103)}}).

+ +

说明

+ +

scratchpad提供了一个测试javascript代码的环境。您可以编写、运行和检查与网页交互的代码的结果。

+ +

Screenshot of the Scratchpad window with a deprecation message

+ +

选择

+ +

您可以在web控制台中编写多行javascript代码，使其类似于scratchpad。如果您在控制台中输入的javascript代码可以解释为多行语句的开头, Enter 在输入中添加新行，您可以使用 Ctrl + Enter (Cmd + Enter 在 macOS).

+ +

Screenshot of the Webconsole multiline input, showing an evaluation with a Syntax Error and another, correct one.

+ +

在计算时，输入不会被清除，这使得在代码片段上快速排列成为可能。

+ +


+ 结果显示在控制台输出中，在输入的右侧，提供即时反馈。与scratchpad不同，错误在输出中以可扩展的stacktrace正确显示，这使得调试当前编写的代码更加容易。

+ +

WebIDE和连接页

+ +

WebIDE在Firefox 69中被弃用

+ +

从 Firefox 70 弃用 ({{bug(1539451)}}).

+ +

从 Firefox 71 删除 ({{bug(1539462)}}).

+ +

说明

+ +

webide允许您将firefox开发工具连接到远程浏览器，比如firefox for android。它还旨在支持firefox操作系统的应用程序开发。

+ +

+ +

选择

+ +

远程调试可在  “关于：从Firefox 68开始调试”  中找到。未移植到about的功能有：wifi调试，firefox for android，应用程序开发。已计划但尚未移植的功能：远程浏览器屏幕截图和编辑远程浏览器配置。有关邮件列表线程的更多详细信息。

+ +

Canvas 调试器

+ +

Bugzilla 问题: {{bug(1403938)}}

+ +

从Firefox 67删除

+ +

说明

+ +

canvas调试器允许用户检查canvas元素并查看给定函数的调用频率。由于没有使用，它被弃用了。

+ +


+ 我们没有画布调试器的专用文档。

+ +

+ +

Alternatives

+ +

Spector.js 是一个webextension，可以为这些特性提供3d说明文。

+ +

Web Audio editor（网络音频编辑器）

+ +

Bugzilla 问题: {{bug(1403944)}}

+ +

从Firefox 67删除

+ +

说明

+ +

web音频编辑器允许您检查在页面中构造的音频上下文，并提供其图形的可视化。这提供了其操作的高级视图，并使您能够确保所有节点都按预期方式连接。可以为图中的每个节点编辑audioparam属性。一些非AudioParam属性，如振荡节点的类型属性，也被显示和编辑。由于没有使用，它被弃用了。

+ +


+ 更多关于Web Audio Editor

+ +

+ +

选择

+ +

替代方案包括 AudioN 和 https://github.com/spite/WebAudioExtension web extensions.

+ +

Shader editor

+ +

Bugzilla 问题: {{bug(1342237)}}

+ +

从Firefox 67删除

+ +

说明

+ +

The Shader Editor

+ +

允许用户检查和编辑webgl顶点和片段着色器的源。由于使用和维护成本较低，已弃用。

+ +


+ 更多关于Shader Editor

+ +

+ +

Alternatives

+ +

此面板的另一个选择是此扩展：https://github.com/spite/ShaderEditorExtension, 或 Spector.js 还支持一个着色器编辑器，该编辑器需要一个库来使用着色器重载器挂钩。目前只有巴比伦图书馆。

diff --git a/files/zh-cn/tools/page_inspector/3d_view/index.html b/files/zh-cn/tools/page_inspector/3d_view/index.html deleted file mode 100644 index 60ea480269..0000000000 --- a/files/zh-cn/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 三维视图 -slug: Tools/Page_Inspector/3D_view -translation_of: Tools/3D_View ---- -
{{ToolsSidebar}}
- -
-

三维视图在 Firefox 47 被移除。

-
- -

{{ fx_minversion_header("11") }}

- -

当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.

- -

3dview.png

- -

按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 HTML面板和Style面板显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.

- -

如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看blocklisted drivers page了解更多信息.

- -

控制三维视图

- -

通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
功能键盘快捷键 鼠标操作
放大/缩小+/-             滚轮向上/向下滚动
向左/向右旋转a / d按住左键向左/向右拖动
向上/向下旋转w / s按住左键向上/向下拖动
向左/向右平移← / →按住右键向左/向右拖动
向上/向下平移↑ / ↓按住右键向上/向下拖动
重置放大级别到默认状态0无
将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}f无
重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}r无
隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}x无
- -

三维视图的用途

- -

三维视图在很多种情形下都会派上用场:

- - - -

相关链接

- - - -

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html new file mode 100644 index 0000000000..a5a6ae1e6e --- /dev/null +++ b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html @@ -0,0 +1,22 @@ +--- +title: View fonts +slug: Tools/Page_Inspector/How_to/View_fonts +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}

font-family tooltip 字体系列提示

+ +

当鼠标悬停在样式规则视图中的一个字体系列类型，将出现应用该字体类型的样例提示：

+ +

 

+ +

+ +

Fonts view 字体视图

+ +

Fonts view字体视图显示当前选中元素所应用的所有字体类型。需要注意的是，它显示的是浏览器当前系统使用的字体，这可能和CSS样式指定的字体不一样。

+ +

+ +

字体视图默认显示的文本是"Abc"，从Firefox 41开始，这个预览文本可以自由编辑。

+ +

 

diff --git a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html deleted file mode 100644 index a5a6ae1e6e..0000000000 --- a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: View fonts -slug: Tools/Page_Inspector/How_to/View_fonts -translation_of: Tools/Page_Inspector/How_to/Edit_fonts ---- -
{{ToolsSidebar}}

font-family tooltip 字体系列提示

- -

当鼠标悬停在样式规则视图中的一个字体系列类型，将出现应用该字体类型的样例提示：

- -

 

- -

- -

Fonts view 字体视图

- -

Fonts view字体视图显示当前选中元素所应用的所有字体类型。需要注意的是，它显示的是浏览器当前系统使用的字体，这可能和CSS样式指定的字体不一样。

- -

- -

字体视图默认显示的文本是"Abc"，从Firefox 41开始，这个预览文本可以自由编辑。

- -

 

diff --git a/files/zh-cn/tools/profiler/index.html b/files/zh-cn/tools/profiler/index.html deleted file mode 100644 index e2f7da543c..0000000000 --- a/files/zh-cn/tools/profiler/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript Profiler -slug: Tools/Profiler -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -
{{ToolsSidebar}}

使用Profiler工具找到你的JavaScript代码的瓶颈. Profiler会定期统计JavaScript样本的堆栈信息.

- -

你可以通过在Web Developer菜单下选择Profiler来启动它. 在Linux和OS X下，你可以在Tools菜单下找到Web Developer，而在windows下，Web Developer则在FIrefox菜单下.

- -

当Profiler被选择后，工具箱就会被打开.

- -

抽样分析器

- -

JavaScript Profiler是一个抽样分析器. 这意味着它会定期对JavaScript引擎的状态取样， 并且记录取样时代码运行的堆栈信息. 统计学上, 我们运行可接受样本数量的函数，花费的时间相当于浏览器运行它的时间，所以你可以很好的从你的代码里找到瓶颈。
-
- 例如，考虑这样一个程序:

- -
function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                   // -> sample A
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;
-}
-
-function logTheValue(x) {
- console.log(x);               // -> sample B, sample C
-}
-
-doSomething();
- -

Suppose we run this program with the profiler active, and in the time it takes to run, the profiler takes three samples, as indicated in the inline comments above.

- -

They're all taken from inside doSomething(), but the second two are inside the logTheValue() function called by doSomething(). So the profile would consist of three stack traces, like this:

- -
Sample A: doSomething()
-Sample B: doSomething() > logTheValue()
-Sample C: doSomething() > logTheValue()
- -

This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that logTheValue() is the bottleneck in our code.

- -

Creating a profile

- -

点击探查器中的秒表按钮来开始记录。当探查器正在记录时，秒表按钮是高亮状态。当我们再一次点击秒表按钮时，记录将停止并保存为一个新的Profile:

- -

- -

Once you've clicked "Stop", the new profile will open automatically:

- -

- -

This pane's divided into two parts:

- - - -

Analyzing a profile

- -

The profile is split into two parts:

- - - -

Profile timeline

- -

The profile timeline occupies the top part of the profile display:

- -

The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.

- -

Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using requestAnimationFrame and Workers.

- -

You can examine a specific range within the profile by clicking and dragging inside the timeline:

- -

- -

A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:

- -


-

- -

Profile details

- -

The profile details occupy the bottom part of the profile display:

- -

When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.

- -

- -

Running time shows the total number of samples in which this function appeared1, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the detectImage() function.

- -

Self shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the simple example above, doSomething() would have a Running time of 3 (samples A, B, and C), but a Self value of 1 (sample A).

- -

The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.

- -

Expanding the call tree

- -

In a given row, if there are any samples taken while we were in a function called by this function (that is, if Running Time is greater than Self for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.

- -

In the simple example above, the fully-expanded call tree would look like this:

- - - - - - - - - - - - - - - - - - - -
Running TimeSelf 
3            100%1doSomething()
2              67%2logTheValue()
- -

To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the detectImage() function. But all of them were taken in functions called by detectImage() (the Self cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:

- -

- -

This tells us that 6 samples were taken when we were actually executing detectAtScale(), 12 when we were executing getRect() and so on.

- -

Footnotes

- -
    -
  1. If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like forEach will appear multiple times in the call tree.
    2. -
- -

 

diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..13f27d0a4a --- /dev/null +++ b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -0,0 +1,38 @@ +--- +title: Debugging Firefox for Android with WebIDE +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +
{{ToolsSidebar}}

This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards.

+

It's been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, though, this was a fairly complex and error-prone process. From Firefox 36 we've made the process much simpler: in particular, you don't need to deal directly with the adb tool at all. Now you connect using  WebIDE, which takes care of setting up adb behind the scenes.

+
+

For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device. If you need to use an earlier version, see the older instructions for connecting the developer tools to Firefox for Android.

+
+

 

+

+

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.

+

Prerequisites

+

First, you'll need:

+ +

ADB Helper

+

Your desktop Firefox also needs to have the ADB Helper add-on, version 0.7.1 or higher. This should be installed for you automatically the first time you open WebIDE. To check the version, type about:addons into the browser's address bar and you should see ADB listed.

+

If you don't have ADB Helper version 0.7.1 or higher, select "Manage Extra Components" from the "Projects" menu, and you'll see the "Extra Components" window, which will contain an entry for ADB Helper:

+

Click "uninstall" then "install", and you should now have the latest version.

+

Setting up the Android device

+

First, enable USB debugging by following steps 2 and 3 of this link only.

+

Next, enable remote debugging in Firefox for Android. Open the browser, open its menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

+

+

The browser might display a notification reminding you to set up port forwarding, which you can ignore.

+

Connecting

+

Connect the Android device to the desktop with the USB cable, open WebIDE, and open the "Runtimes" menu. You will see Firefox for Android listed as a debugging target under "USB DEVICES":

+

+

Select it. On the Android device, you'll now see a warning message:

+

+

Click OK. Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device:

+

+

Select a tab to attach the developer tools to it:

+

+

Now you should be able to use all the Firefox developer tools that support remote debugging. See the page on remote debugging for more details.

diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html deleted file mode 100644 index 13f27d0a4a..0000000000 --- a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Debugging Firefox for Android with WebIDE -slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone ---- -
{{ToolsSidebar}}

This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards.

-

It's been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, though, this was a fairly complex and error-prone process. From Firefox 36 we've made the process much simpler: in particular, you don't need to deal directly with the adb tool at all. Now you connect using  WebIDE, which takes care of setting up adb behind the scenes.

-
-

For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device. If you need to use an earlier version, see the older instructions for connecting the developer tools to Firefox for Android.

-
-

 

-

-

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.

-

Prerequisites

-

First, you'll need:

- -

ADB Helper

-

Your desktop Firefox also needs to have the ADB Helper add-on, version 0.7.1 or higher. This should be installed for you automatically the first time you open WebIDE. To check the version, type about:addons into the browser's address bar and you should see ADB listed.

-

If you don't have ADB Helper version 0.7.1 or higher, select "Manage Extra Components" from the "Projects" menu, and you'll see the "Extra Components" window, which will contain an entry for ADB Helper:

-

Click "uninstall" then "install", and you should now have the latest version.

-

Setting up the Android device

-

First, enable USB debugging by following steps 2 and 3 of this link only.

-

Next, enable remote debugging in Firefox for Android. Open the browser, open its menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

-

-

The browser might display a notification reminding you to set up port forwarding, which you can ignore.

-

Connecting

-

Connect the Android device to the desktop with the USB cable, open WebIDE, and open the "Runtimes" menu. You will see Firefox for Android listed as a debugging target under "USB DEVICES":

-

-

Select it. On the Android device, you'll now see a warning message:

-

-

Click OK. Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device:

-

-

Select a tab to attach the developer tools to it:

-

-

Now you should be able to use all the Firefox developer tools that support remote debugging. See the page on remote debugging for more details.

diff --git a/files/zh-cn/tools/responsive_design_mode/index.html b/files/zh-cn/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..b0ea0712a4 --- /dev/null +++ b/files/zh-cn/tools/responsive_design_mode/index.html @@ -0,0 +1,83 @@ +--- +title: 响应式设计视图 +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}

响应式设计采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。

+ +

{{EmbedYouTube("LBcE72sG2s8")}}

+ +

下面的截屏是在328*480分辨率下展示的一个维基百科移动版页面。

+ +

响应式设计视图使用非常方便，您可以快速和精确地改变展示区域的大小。

+ +

当然，您可以改变浏览器窗口本身的大小。但是如果把浏览器窗口变小，其他的浏览器内容也会相应变小，可能会使得浏览器界面变得不那么好用了。

+ +

当你打开响应式视图，你可以继续正常地进行浏览。While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.

+ +

打开和关闭

+ +

有两个方法打开响应式视图：

+ + + +

有三个方法关闭响应式视图

+ + + +

改变大小

+ +

有两个方法改变内容区域的大小：

+ + + +

如果您使用拖放的方式改变大小，可以按住Control键（Mac OS X下用Cmd键）来减缓改变的速度，可以更精确地控制大小。

+ +
+

响应式视图控件

+ +

在响应式视图窗口的顶部有五个控件：

+ + + + + + + + + + + + + + + + + + + + + + + + +
Close关闭响应式视图，回到正常浏览模式
Select size从预设的分辨率组合内选择，或者自定义分辨率
Portrait/Landscape选择屏幕的水平或者垂直模式
+

Simulate touch events

+ 		+

打开/关闭模拟触摸事件，鼠标事件将被模拟为触摸事件.

+
+

Take screenshot

+ 		内容区域的截屏，截屏内容保存到火狐的默认下载位置
+
+ +

 

diff --git a/files/zh-cn/tools/responsive_design_view/index.html b/files/zh-cn/tools/responsive_design_view/index.html deleted file mode 100644 index b0ea0712a4..0000000000 --- a/files/zh-cn/tools/responsive_design_view/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 响应式设计视图 -slug: Tools/Responsive_Design_View -translation_of: Tools/Responsive_Design_Mode ---- -
{{ToolsSidebar}}

响应式设计采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。

- -

{{EmbedYouTube("LBcE72sG2s8")}}

- -

下面的截屏是在328*480分辨率下展示的一个维基百科移动版页面。

- -

响应式设计视图使用非常方便，您可以快速和精确地改变展示区域的大小。

- -

当然，您可以改变浏览器窗口本身的大小。但是如果把浏览器窗口变小，其他的浏览器内容也会相应变小，可能会使得浏览器界面变得不那么好用了。

- -

当你打开响应式视图，你可以继续正常地进行浏览。While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.

- -

打开和关闭

- -

有两个方法打开响应式视图：

- - - -

有三个方法关闭响应式视图

- - - -

改变大小

- -

有两个方法改变内容区域的大小：

- - - -

如果您使用拖放的方式改变大小，可以按住Control键（Mac OS X下用Cmd键）来减缓改变的速度，可以更精确地控制大小。

- -
-

响应式视图控件

- -

在响应式视图窗口的顶部有五个控件：

- - - - - - - - - - - - - - - - - - - - - - - - -
Close关闭响应式视图，回到正常浏览模式
Select size从预设的分辨率组合内选择，或者自定义分辨率
Portrait/Landscape选择屏幕的水平或者垂直模式
-

Simulate touch events

- 		-

打开/关闭模拟触摸事件，鼠标事件将被模拟为触摸事件.

-
-

Take screenshot

- 		内容区域的截屏，截屏内容保存到火狐的默认下载位置
-
- -

 

diff --git a/files/zh-cn/tools/storage_inspector/index.html b/files/zh-cn/tools/storage_inspector/index.html new file mode 100644 index 0000000000..198d5d5b92 --- /dev/null +++ b/files/zh-cn/tools/storage_inspector/index.html @@ -0,0 +1,186 @@ +--- +title: 存储查看器 +slug: Tools/存储查看器 +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

存储查看器使你能够查看网页使用的多种存储类型。如今，它能够查看如下存储类型：

+ + + +

目前，Storage Inspector仅为您提供存储的只读视图。 但我们正努力让您在将来的版本中编辑存储内容。

+ +

打开存储查看器

+ +

你可以在火狐菜单面板（或工具菜单中显示菜单栏或在 Mac OS X 上）或在键盘上按Shift + F9的web开发者工具的子菜单上打开“存储查看器”

+ +

工具箱显示在浏览器窗口的底部，当打开存储查看器，在工具箱中会被称为“存储”

+ +

+ +

存储查看器用户接口

+ +

存储查看器UI被分为三个主要部分：

+ + + +

+ +

存储树

+ +

存储树列出了存储查看器能够查看的所有存储类型:

+ +

+ +

在每种类型下，对象都是按源组织。对于cache，协议不会区分源。对于IndexedDB或本地存储，源由协议与主机名组成。举个栗子，"http://mozilla.org" and "https://mozilla.org" 是两个不同的源，所有本地存储项不能在它们之间共享。

+ +

在“缓存存储”下，对象按域名和cache的名称进行组织：

+ +

+ +

IndexedDB对象按源组织，然后按数据库名称，最后按对象存储名称：

+ +

+ +

关于Cookies,本地存储和Session存储类型,层级结构它们只有一个级别, 因此存储项直接列在每个域名下

+ +

+ +

你可以点击树中的每个项去扩展或折叠它的子项.树是活动的，所有如果添加一个新的源(例如通过添加iframes)，它将自动添加到每个存储类型中。

+ +

点击一个树项目将在右侧的表部件显示所选项的具体信息。例如点击Cookies存储类型下的源，将会显示所有属于该域名下的cookies信息。

+ +

表部件

+ +

表部件是列出与所选树项（不管是域名还是数据库）一致的所有项的位置。根据存储类型和树项的不同，表中的列数也会有所不同。

+ +

所有表部件的列都可以调整大小的，你可以通过表头的内容-点击去隐藏和显示列和选择你想看到的列。

+ +

+ +

搜索

+ +

在表部件的顶部有一个搜索框:

+ +

+ +

它将对表进行过滤，只显示与搜索项匹配的项。如果它们的任何字段(包括您隐藏的列的字段)包含搜索项。

+ +

从火狐50版本之后, 你可以使用Ctrl + F (Cmd + F on a Mac) 来显示搜索框.

+ +

添加和更新存储

+ +

在最新版本的火狐浏览器中，你还可以使用按钮去刷新当前查看到的存储类型视图，而且在适用情况下添加一个存储条目(你不能在IndexedDB或cache添加新的条目):

+ +

侧边栏

+ +

当你在存储表部件选择任何一行时，侧边栏就会显示所选行的详细信息。如果选中cookie，侧边栏将列出该cookie的所有详细信息

+ +

侧边栏能够解析cookie的值或本地存储项或IndexedDB项，并且将其转换成有意义的对象而不仅仅是字符串。举个栗子:

+ + + +

还可以使用工具箱侧边栏顶部的搜索框过滤显示的值

+ +

Cache 存储

+ +

在Cache存储类型下，你能够看到使用Cache API创建的任何DOM缓存的内容。如果你选择一个cache，你将看到该caches包含的资源列表。对应每个资源，你能看到如下信息：

+ + + +

+ +

Cookies

+ +

当你从存储树中选择Cookies存储类型的一个源时，会在表格小部件中列出该cookies的所有源。cookies表有以下列：

+ + + +
+

提示: 有一些列不会默认显示 — 如果要改变部分列的显示,在已有的表格标题上单击鼠标右键/Ctrl-鼠标左键，而后使用生成的上下文菜单显示/隐藏列

+
+ +

您可以通过双击表格小组件中的单元格内部并编辑它们包含的值来编辑cookie，并通过单击“加号”（+）按钮添加新的cookie，然后将生成的新行编辑为所需的值。
+
+ 您还可以使用每行上下文菜单删除cookie：

+ +

本地存储/Session存储

+ +

当选择与本地存储或会话存储相对应的源时，该表将列出与本地存储或会话存储相对应的所有项的名称和值。

+ +

您可以通过双击Table Widget中的单元格内部并编辑它们包含的值来编辑本地和会话存储项：

+ +

{{EmbedYouTube("oeQzhpoMByw")}}

+ +

您还可以使用上下文菜单删除本地存储和会话存储条目：

+ +

+ +

最后，您可以通过单击“加号”（+）按钮添加新的存储项，然后将生成的新行编辑为所需的值。

+ +

IndexedDB

+ +

在存储树中的索引数据库存储类型中选择源时，该表列出了该源存在的所有数据库的详细信息。 数据库具有以下详细信息：

+ + + +

在存储树中选择IndexedDB数据库时，表中列出了有关所有对象存储的详细信息。 任何对象存储都具有以下详细信息：

+ + + +

+ +

在存储树中选择对象库时，该对象库中的所有项都列在表中。 所有项目都有一个键和一个与之关联的值。

+ +

从Firefox 49开始，您可以使用存储树视图中的上下文菜单删除IndexedDB数据库：

+ +

+ +

如果无法删除数据库（最常见的原因是仍存在与数据库的活动连接），则存储查看器中将显示一条警告消息：

+ +

从Firefox 50开始，您可以使用表格小部件中的上下文菜单删除对象库或特定项目中的所有项目：

+ +

+ +

 

diff --git a/files/zh-cn/tools/tips/index.html b/files/zh-cn/tools/tips/index.html new file mode 100644 index 0000000000..c7a2cfc304 --- /dev/null +++ b/files/zh-cn/tools/tips/index.html @@ -0,0 +1,135 @@ +--- +title: 小技巧 +slug: Tools/小技巧 +tags: + - 开发工具 + - 网络开发 +translation_of: Tools/Tips +--- +
{{ToolsSidebar}}
+ +

常规

+ +

截图:

+ + + +

设置:

+ + + +

页面查看器

+ +

在 标签视图中:

+ + + +

在 选择元素时:

+ + + +

在 规则视图中:

+ + + +

网页控制台

+ +

在所有面板:

+ + + +

命令行:

+ + + +

控制台输出:

+ + + +

调试

+ + + +

样式编辑器

+ + + +

网络

+ + + +

存储

+ + + +

开发者工具条

+ + diff --git a/files/zh-cn/tools/using_the_source_editor/index.html b/files/zh-cn/tools/using_the_source_editor/index.html deleted file mode 100644 index f1169710b4..0000000000 --- a/files/zh-cn/tools/using_the_source_editor/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 使用源代码编辑器 -slug: Tools/Using_the_Source_Editor -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor ---- -
{{ToolsSidebar}}

源代码编辑器是一个编辑器组件,由源editor.jsm的Java Script代码模块的提供,这是共享的几个开发工具,包括暂存器和样式编辑器。它也可以被使用的Firefox扩展。本文说明如何使用编辑器来编辑文本。.

-

键盘命令

-

这些都是标准命令的快捷键;注意，某些附加产品，他们可能会有所不同。但火狐使用的总是这些。.

-
- 注：在Mac OS X,使用Command键来代替控制键.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
功能键盘
选择所有Ctrl-A
复制Ctrl-C
查找Ctrl-F
查找下一个Ctrl-G
跳转行Ctrl-L
重做Ctrl-Shift-Z
粘贴Ctrl-V
剪切Ctrl-X
恢复Ctrl-Z
行缩进(s)Tab
取消行缩进Shift-Tab
移动行(s) 上Alt-↑
- (Ctrl-Option-↑ on Mac OS X)
移动行(s) 下Alt-↓
- (Ctrl-Option-↓ on Mac OS X)
切换注释选择Ctrl-/ {{fx_minversion_inline("14.0")}}
Move to bracket openingCtrl-[ {{fx_minversion_inline("14.0")}}
Move to bracket closingCtlr-] {{fx_minversion_inline("14.0")}}
-

参阅

- diff --git a/files/zh-cn/tools/web_audio_editor/index.html b/files/zh-cn/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..cc5c8bd4f7 --- /dev/null +++ b/files/zh-cn/tools/web_audio_editor/index.html @@ -0,0 +1,38 @@ +--- +title: Web 音频编辑器 +slug: Tools/Web音频编辑器 +tags: + - 工具 +translation_of: Tools/Web_Audio_Editor +--- +
{{ToolsSidebar}}
+

Web 音频编辑器在 Firefox 32 推出。

+
+

开发者通过 Web Audio API 可以创建 {{domxref ("AudioContext", "audio context")}}。在该上下文环境中，开发者可以构建多个 {{domxref ("AudioNode", "audio nodes")}}，它们包括:

+ +

每个节点可能没有也可能具有多个 可以配置它们的行为的 {{domxref ("AudioParam")}} 属性。例如，{{domxref ("GainNode")}} 这个节点拥有一个 gain 属性，而 {{domxref ("OscillatorNode")}} 节点则拥有 frequency 和detune 两个属性。

+

开发者可以在图像中连接每个节点，而整个图像则定义了音频流的行为。

+

Web 音频编辑器检测创建于页面中的音频上下文环境，然后提供一个可视化的图像，从高可视化角度帮助您查看 Web 音频编辑器的操作，也使您能够确认每一个节点都以您的语预期连接在一起。然后您可以检测并编辑每一个图像中的节点 AudioParam 属性。部分不是 AudioParam 的属性也会显示出来，如 OscillatorNode 的 type 属性，您同样可以编辑这些属性。

+

这个工具仍然处于实验阶段。如果您发现了问题，欢迎您到 Bugzilla 提交这些问题。如果您希望反馈信息或者提供新特征的建议，请您到 ffdevtools.uservoice.com 或者 Twitter 提交这些信息。

+

打开 Web 音频编辑器

+

在 Firefox 32 的默认条件下 Web 音频编辑器并没启用，您可以打开 开发者工具 然后勾选"Web 音频"来启用 Web 音频编辑器。现在，在 开发者工具栏 那里会多出一个"Web音频“选项卡。点击这个选项卡，然后加载创建了音频上下文环境的页面。 这里有两个演示：

+ +

可视化图像

+

Web 音频编辑器现在可以显示一张加载完成后的音频上下文环境的图像。下图是 Violent Theremin 演示的图像：

+

你可以看到，它使用了三个节点：作为源输入的 {{domxref ("OscillatorNode")}} ，作为音量控制的 {{domxref ("GainNode")}}，以及作为音源输出的 {{domxref ("GainNode")}} 。

+

与 AudioParams 连接

+
+

显示与 AudioParams 连接的功能在 Firefox 34 版本中推出。

+
+

我们使用了直线线条来显示节点与节点之间的连接。然而，如果你把一个节点连接到了另一个节点的 AudioParam，那么这两个节点之间的连接将显示为一条虚线，并且标记了 AudioParam 的属性名称：

+

检测与修改 AudioNodes

+

如果你点击了一个节点，这个节点将被高亮，然后在右手边你将看到一个节点查看器。这个节点检查器列出了当前节点的 AudioParam 各个属性的值。例如，下图显示的是  OscillatorNode 节点:

+

当用户的鼠标左右移动的时候，Violent Theremin 会随之修改 frequency 参数，您可以在节点查看器中查看到新的参数值。但是，这个参数值并非实时更新：您必须再次点击节点，才能看到更新后的值。

+

如果您在节点检查器中点击了某一个属性值，那么你就可以修改这个属性值：按下回车或者 Tab 键就可以使新的属性值立即生效。

diff --git "a/files/zh-cn/tools/web\351\237\263\351\242\221\347\274\226\350\276\221\345\231\250/index.html" "b/files/zh-cn/tools/web\351\237\263\351\242\221\347\274\226\350\276\221\345\231\250/index.html" deleted file mode 100644 index cc5c8bd4f7..0000000000 --- "a/files/zh-cn/tools/web\351\237\263\351\242\221\347\274\226\350\276\221\345\231\250/index.html" +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Web 音频编辑器 -slug: Tools/Web音频编辑器 -tags: - - 工具 -translation_of: Tools/Web_Audio_Editor ---- -
{{ToolsSidebar}}
-

Web 音频编辑器在 Firefox 32 推出。

-
-

开发者通过 Web Audio API 可以创建 {{domxref ("AudioContext", "audio context")}}。在该上下文环境中，开发者可以构建多个 {{domxref ("AudioNode", "audio nodes")}}，它们包括:

- -

每个节点可能没有也可能具有多个 可以配置它们的行为的 {{domxref ("AudioParam")}} 属性。例如，{{domxref ("GainNode")}} 这个节点拥有一个 gain 属性，而 {{domxref ("OscillatorNode")}} 节点则拥有 frequency 和detune 两个属性。

-

开发者可以在图像中连接每个节点，而整个图像则定义了音频流的行为。

-

Web 音频编辑器检测创建于页面中的音频上下文环境，然后提供一个可视化的图像，从高可视化角度帮助您查看 Web 音频编辑器的操作，也使您能够确认每一个节点都以您的语预期连接在一起。然后您可以检测并编辑每一个图像中的节点 AudioParam 属性。部分不是 AudioParam 的属性也会显示出来，如 OscillatorNode 的 type 属性，您同样可以编辑这些属性。

-

这个工具仍然处于实验阶段。如果您发现了问题，欢迎您到 Bugzilla 提交这些问题。如果您希望反馈信息或者提供新特征的建议，请您到 ffdevtools.uservoice.com 或者 Twitter 提交这些信息。

-

打开 Web 音频编辑器

-

在 Firefox 32 的默认条件下 Web 音频编辑器并没启用，您可以打开 开发者工具 然后勾选"Web 音频"来启用 Web 音频编辑器。现在，在 开发者工具栏 那里会多出一个"Web音频“选项卡。点击这个选项卡，然后加载创建了音频上下文环境的页面。 这里有两个演示：

- -

可视化图像

-

Web 音频编辑器现在可以显示一张加载完成后的音频上下文环境的图像。下图是 Violent Theremin 演示的图像：

-

你可以看到，它使用了三个节点：作为源输入的 {{domxref ("OscillatorNode")}} ，作为音量控制的 {{domxref ("GainNode")}}，以及作为音源输出的 {{domxref ("GainNode")}} 。

-

与 AudioParams 连接

-
-

显示与 AudioParams 连接的功能在 Firefox 34 版本中推出。

-
-

我们使用了直线线条来显示节点与节点之间的连接。然而，如果你把一个节点连接到了另一个节点的 AudioParam，那么这两个节点之间的连接将显示为一条虚线，并且标记了 AudioParam 的属性名称：

-

检测与修改 AudioNodes

-

如果你点击了一个节点，这个节点将被高亮，然后在右手边你将看到一个节点查看器。这个节点检查器列出了当前节点的 AudioParam 各个属性的值。例如，下图显示的是  OscillatorNode 节点:

-

当用户的鼠标左右移动的时候，Violent Theremin 会随之修改 frequency 参数，您可以在节点查看器中查看到新的参数值。但是，这个参数值并非实时更新：您必须再次点击节点，才能看到更新后的值。

-

如果您在节点检查器中点击了某一个属性值，那么你就可以修改这个属性值：按下回车或者 Tab 键就可以使新的属性值立即生效。

diff --git "a/files/zh-cn/tools/\344\270\215\346\216\250\350\215\220\347\232\204\345\267\245\345\205\267/index.html" "b/files/zh-cn/tools/\344\270\215\346\216\250\350\215\220\347\232\204\345\267\245\345\205\267/index.html" deleted file mode 100644 index f7bb80e5bf..0000000000 --- "a/files/zh-cn/tools/\344\270\215\346\216\250\350\215\220\347\232\204\345\267\245\345\205\267/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 不推荐的工具 -slug: Tools/不推荐的工具 -translation_of: Tools/Deprecated_tools ---- -

{{ToolsSidebar}}

- -

在devtools的开发过程中，我们添加了几个实验面板来尝试新的想法。并不是所有这些都被广泛采用，而且由于维护成本的原因，很少使用的面板最终被移除。

- -

我们已经创建了这个不推荐使用或删除的面板列表。此页记录不推荐使用的面板和跟踪其删除的错误。尽管这些面板已经被删除，但是您仍然可以访问旧代码，并且有其他的web扩展，您可以尝试获得类似的功能。

- -


- 当我们否决某个小组时，我们首先从社区获得反馈，以确定删除该小组的影响。一旦我们决定移除面板，我们将提供一条警告消息，最后，我们将从代码库中移除面板。

- -


- 尝试激活已弃用的面板时，可能会看到警告消息，如下图所示：

- -

- -

此外，如果打开其中一个工具的面板，您还将看到有关删除该工具的警告消息。

- -

- -

草稿行

- -

从firefox 70开始，scratchpad将被弃用 ({{bug(1565380)}}).

- -

它将在将来被删除（目前版本号未知)  （{{bug(1519103)}}).

- -

说明

- -

scratchpad提供了一个测试javascript代码的环境。您可以编写、运行和检查与网页交互的代码的结果。

- -

Screenshot of the Scratchpad window with a deprecation message

- -

选择

- -

您可以在web控制台中编写多行javascript代码，使其类似于scratchpad。如果您在控制台中输入的javascript代码可以解释为多行语句的开头, Enter 在输入中添加新行，您可以使用 Ctrl + Enter (Cmd + Enter 在 macOS).

- -

Screenshot of the Webconsole multiline input, showing an evaluation with a Syntax Error and another, correct one.

- -

在计算时，输入不会被清除，这使得在代码片段上快速排列成为可能。

- -


- 结果显示在控制台输出中，在输入的右侧，提供即时反馈。与scratchpad不同，错误在输出中以可扩展的stacktrace正确显示，这使得调试当前编写的代码更加容易。

- -

WebIDE和连接页

- -

WebIDE在Firefox 69中被弃用

- -

从 Firefox 70 弃用 ({{bug(1539451)}}).

- -

从 Firefox 71 删除 ({{bug(1539462)}}).

- -

说明

- -

webide允许您将firefox开发工具连接到远程浏览器，比如firefox for android。它还旨在支持firefox操作系统的应用程序开发。

- -

- -

选择

- -

远程调试可在  “关于：从Firefox 68开始调试”  中找到。未移植到about的功能有：wifi调试，firefox for android，应用程序开发。已计划但尚未移植的功能：远程浏览器屏幕截图和编辑远程浏览器配置。有关邮件列表线程的更多详细信息。

- -

Canvas 调试器

- -

Bugzilla 问题: {{bug(1403938)}}

- -

从Firefox 67删除

- -

说明

- -

canvas调试器允许用户检查canvas元素并查看给定函数的调用频率。由于没有使用，它被弃用了。

- -


- 我们没有画布调试器的专用文档。

- -

- -

Alternatives

- -

Spector.js 是一个webextension，可以为这些特性提供3d说明文。

- -

Web Audio editor（网络音频编辑器）

- -

Bugzilla 问题: {{bug(1403944)}}

- -

从Firefox 67删除

- -

说明

- -

web音频编辑器允许您检查在页面中构造的音频上下文，并提供其图形的可视化。这提供了其操作的高级视图，并使您能够确保所有节点都按预期方式连接。可以为图中的每个节点编辑audioparam属性。一些非AudioParam属性，如振荡节点的类型属性，也被显示和编辑。由于没有使用，它被弃用了。

- -


- 更多关于Web Audio Editor

- -

- -

选择

- -

替代方案包括 AudioN 和 https://github.com/spite/WebAudioExtension web extensions.

- -

Shader editor

- -

Bugzilla 问题: {{bug(1342237)}}

- -

从Firefox 67删除

- -

说明

- -

The Shader Editor

- -

允许用户检查和编辑webgl顶点和片段着色器的源。由于使用和维护成本较低，已弃用。

- -


- 更多关于Shader Editor

- -

- -

Alternatives

- -

此面板的另一个选择是此扩展：https://github.com/spite/ShaderEditorExtension, 或 Spector.js 还支持一个着色器编辑器，该编辑器需要一个库来使用着色器重载器挂钩。目前只有巴比伦图书馆。

diff --git "a/files/zh-cn/tools/\345\255\230\345\202\250\346\237\245\347\234\213\345\231\250/index.html" "b/files/zh-cn/tools/\345\255\230\345\202\250\346\237\245\347\234\213\345\231\250/index.html" deleted file mode 100644 index 198d5d5b92..0000000000 --- "a/files/zh-cn/tools/\345\255\230\345\202\250\346\237\245\347\234\213\345\231\250/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: 存储查看器 -slug: Tools/存储查看器 -translation_of: Tools/Storage_Inspector ---- -
{{ToolsSidebar}}
- -

存储查看器使你能够查看网页使用的多种存储类型。如今，它能够查看如下存储类型：

- - - -

目前，Storage Inspector仅为您提供存储的只读视图。 但我们正努力让您在将来的版本中编辑存储内容。

- -

打开存储查看器

- -

你可以在火狐菜单面板（或工具菜单中显示菜单栏或在 Mac OS X 上）或在键盘上按Shift + F9的web开发者工具的子菜单上打开“存储查看器”

- -

工具箱显示在浏览器窗口的底部，当打开存储查看器，在工具箱中会被称为“存储”

- -

- -

存储查看器用户接口

- -

存储查看器UI被分为三个主要部分：

- - - -

- -

存储树

- -

存储树列出了存储查看器能够查看的所有存储类型:

- -

- -

在每种类型下，对象都是按源组织。对于cache，协议不会区分源。对于IndexedDB或本地存储，源由协议与主机名组成。举个栗子，"http://mozilla.org" and "https://mozilla.org" 是两个不同的源，所有本地存储项不能在它们之间共享。

- -

在“缓存存储”下，对象按域名和cache的名称进行组织：

- -

- -

IndexedDB对象按源组织，然后按数据库名称，最后按对象存储名称：

- -

- -

关于Cookies,本地存储和Session存储类型,层级结构它们只有一个级别, 因此存储项直接列在每个域名下

- -

- -

你可以点击树中的每个项去扩展或折叠它的子项.树是活动的，所有如果添加一个新的源(例如通过添加iframes)，它将自动添加到每个存储类型中。

- -

点击一个树项目将在右侧的表部件显示所选项的具体信息。例如点击Cookies存储类型下的源，将会显示所有属于该域名下的cookies信息。

- -

表部件

- -

表部件是列出与所选树项（不管是域名还是数据库）一致的所有项的位置。根据存储类型和树项的不同，表中的列数也会有所不同。

- -

所有表部件的列都可以调整大小的，你可以通过表头的内容-点击去隐藏和显示列和选择你想看到的列。

- -

- -

搜索

- -

在表部件的顶部有一个搜索框:

- -

- -

它将对表进行过滤，只显示与搜索项匹配的项。如果它们的任何字段(包括您隐藏的列的字段)包含搜索项。

- -

从火狐50版本之后, 你可以使用Ctrl + F (Cmd + F on a Mac) 来显示搜索框.

- -

添加和更新存储

- -

在最新版本的火狐浏览器中，你还可以使用按钮去刷新当前查看到的存储类型视图，而且在适用情况下添加一个存储条目(你不能在IndexedDB或cache添加新的条目):

- -

侧边栏

- -

当你在存储表部件选择任何一行时，侧边栏就会显示所选行的详细信息。如果选中cookie，侧边栏将列出该cookie的所有详细信息

- -

侧边栏能够解析cookie的值或本地存储项或IndexedDB项，并且将其转换成有意义的对象而不仅仅是字符串。举个栗子:

- - - -

还可以使用工具箱侧边栏顶部的搜索框过滤显示的值

- -

Cache 存储

- -

在Cache存储类型下，你能够看到使用Cache API创建的任何DOM缓存的内容。如果你选择一个cache，你将看到该caches包含的资源列表。对应每个资源，你能看到如下信息：

- - - -

- -

Cookies

- -

当你从存储树中选择Cookies存储类型的一个源时，会在表格小部件中列出该cookies的所有源。cookies表有以下列：

- - - -
-

提示: 有一些列不会默认显示 — 如果要改变部分列的显示,在已有的表格标题上单击鼠标右键/Ctrl-鼠标左键，而后使用生成的上下文菜单显示/隐藏列

-
- -

您可以通过双击表格小组件中的单元格内部并编辑它们包含的值来编辑cookie，并通过单击“加号”（+）按钮添加新的cookie，然后将生成的新行编辑为所需的值。
-
- 您还可以使用每行上下文菜单删除cookie：

- -

本地存储/Session存储

- -

当选择与本地存储或会话存储相对应的源时，该表将列出与本地存储或会话存储相对应的所有项的名称和值。

- -

您可以通过双击Table Widget中的单元格内部并编辑它们包含的值来编辑本地和会话存储项：

- -

{{EmbedYouTube("oeQzhpoMByw")}}

- -

您还可以使用上下文菜单删除本地存储和会话存储条目：

- -

- -

最后，您可以通过单击“加号”（+）按钮添加新的存储项，然后将生成的新行编辑为所需的值。

- -

IndexedDB

- -

在存储树中的索引数据库存储类型中选择源时，该表列出了该源存在的所有数据库的详细信息。 数据库具有以下详细信息：

- - - -

在存储树中选择IndexedDB数据库时，表中列出了有关所有对象存储的详细信息。 任何对象存储都具有以下详细信息：

- - - -

- -

在存储树中选择对象库时，该对象库中的所有项都列在表中。 所有项目都有一个键和一个与之关联的值。

- -

从Firefox 49开始，您可以使用存储树视图中的上下文菜单删除IndexedDB数据库：

- -

- -

如果无法删除数据库（最常见的原因是仍存在与数据库的活动连接），则存储查看器中将显示一条警告消息：

- -

从Firefox 50开始，您可以使用表格小部件中的上下文菜单删除对象库或特定项目中的所有项目：

- -

- -

 

diff --git "a/files/zh-cn/tools/\345\260\217\346\212\200\345\267\247/index.html" "b/files/zh-cn/tools/\345\260\217\346\212\200\345\267\247/index.html" deleted file mode 100644 index c7a2cfc304..0000000000 --- "a/files/zh-cn/tools/\345\260\217\346\212\200\345\267\247/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 小技巧 -slug: Tools/小技巧 -tags: - - 开发工具 - - 网络开发 -translation_of: Tools/Tips ---- -
{{ToolsSidebar}}
- -

常规

- -

截图:

- - - -

设置:

- - - -

页面查看器

- -

在 标签视图中:

- - - -

在 选择元素时:

- - - -

在 规则视图中:

- - - -

网页控制台

- -

在所有面板:

- - - -

命令行:

- - - -

控制台输出:

- - - -

调试

- - - -

样式编辑器

- - - -

网络

- - - -

存储

- - - -

开发者工具条

- - -- cgit v1.2.3-54-g00ecf