From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/zh-cn/tools/scratchpad/index.html | 118 --------- files/zh-cn/tools/webide/index.html | 271 --------------------- files/zh-cn/tools/webide/monitor/index.html | 158 ------------ files/zh-cn/tools/webide/opening_webide/index.html | 26 -- .../index.html" | 53 ---- 5 files changed, 626 deletions(-) delete mode 100644 files/zh-cn/tools/scratchpad/index.html delete mode 100644 files/zh-cn/tools/webide/index.html delete mode 100644 files/zh-cn/tools/webide/monitor/index.html delete mode 100644 files/zh-cn/tools/webide/opening_webide/index.html delete mode 100644 "files/zh-cn/tools/webide/\351\227\256\351\242\230\346\216\222\351\231\244/index.html" (limited to 'files/zh-cn/tools') diff --git a/files/zh-cn/tools/scratchpad/index.html b/files/zh-cn/tools/scratchpad/index.html deleted file mode 100644 index ecfae26051..0000000000 --- a/files/zh-cn/tools/scratchpad/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Scratchpad -slug: Tools/Scratchpad -tags: - - Scratchpad - - 工具 - - 网页开发 - - 网页开发：工具 -translation_of: Archive/Tools/Scratchpad ---- -
{{ToolsSidebar}}
- -

Scratchpad 使用JavaScript去提供一种实验环境。你能编写，执行代码，并且查看代码和Web页面交互的结果

- -

和被设计为一次只能执行单行命更多工具令的 Web Console 不同的是， Scratchpad 让你可以编辑大段的Javascript代码, 然后就取决于你希望如何输出，有多种方式执行这些代码。

- -

{{EmbedYouTube("Pt7DZACyClM")}}

- -

使用

- -

在单独窗口中打开Scratchpad

- -

有几种不同的方式可以在独立窗口中打开Scratchpad

- - - -

这都能在单独窗口中打开Scratchpad。

- -

从工具箱中打开Scratchpad

- -
New in Firefox 47.
- -

从Firefox 47起，你能从Toolbox中打开Scratchpad。首先你需要在设置的"Default Firefox Developer Tools"部分里选中"Scratchpad"。

- -

现在你应该可以在Toolbox中使用Scratchpad了，还有其他工具，如页面检查器和Web控制台。这在拆分控制台模式下特别有用：您可以使用Scratchpad作为持久性，多行编辑器，或者控制台来与页面进行交互。

- -

编辑

- -

Scratchpad 窗口看起来如下图 (在OS X中菜单条在屏幕顶部)

- -

A screenshot of the Scratchpad

- -

如果想了解编辑器本身或者有用的键盘快捷键，请查看 Using the Source Editor

- -

File菜单提供 Javascript 代码的保存和加载，以便以后你能反复使用这些代码。

- -

代码补完

- -

Scratchpad 使用tern code analysis engine 提供自动补完建议并使用弹出窗口显示当前符号的关于信息。使用 Control + Space 便可以呼出自动补完。如果是为了显示弹出信息， 在Firefox 32中使用Shift + Space。

- -

例如，键入d, 然后按下Control + Space。 你可以看到自动补完的弹框，类似如下

- -

每个显示在建议之前的图标表明了类型，当前高亮显示的会弹出更多的信息，使用↑ 或 ↓箭头切换选项并使用Enter 或 Tab来选择高亮的选项。

- -

內连文档

- -

当鼠标位于某个标识符上时，通过按下 Ctrl + Shift + Space 进行显示内连文档的弹框. 举个例子, 当你输入 document.addEventListener, 人后按下 Ctrl + Shift + Space, 你将会看到该方法的语法摘要以及一段简介:

- -

这个"[docs]"链接指向该标志的MDN文档

- -

Executing

- -

当你写好了你的代码后，选中你想要的代码来运行。如果你没有选中任何代码，整个窗口的代码都会被执行。选择你想要的运行方式，可以通过顶部的按钮、运行菜单，或者上下文菜单。代码会在当前选中的Tab范围内被执行。你在函数外声明的变量会被加到这个标签栏的全局对象中

- -

这里有4个可用的选项：

- -

Run

- -

当你选择Run选项，选中的代码会被执行。这是用来执行那些只是操纵页面内容而不需要返回结果的函数或者其他代码的。

- -

Inspect

- -

Inspect选项会像Run选项一样执行代码，但是当代码返回时会打开一个对象检查器让你验证返回值

- -

例如，当你敲入这段代码

- -
window
-
- -

然后选择Inspect，对象检查器就会显示如下：

- -

Inspecting an object in the Scratchpad

- -

Display

- -

Display选项执行选中的代码，然后直接将结果作为一个注解插入到你的Sratchpad编辑窗口，所以你可以把它当作一个REPL

- -

Reload And Run

- -

Reload And Run选项只在执行菜单可用，它首先重新加载页面，然后当页面加载完毕执行代码。这在比较古老的运行环境中比较有用。

- -

在浏览器上下文中运行Scratchpad

- -

你可以在整个浏览器的上下文环境运行Sratchpad，而不只是在指定的网页中。这在你使用Firefox工作或开发插件时很有用。要使用这个请在Developer Tool Settings中确认允许chrome跟插件调试。设置完后环境菜单会有个浏览器选项。选中它的时候，你的作用域就是整个浏览器而不只是页面范围了，从下面的测试中可以看出一些全局变量。

- -
window
-/*
-[object ChromeWindow]
-*/
-
-gBrowser
-/*
-[object XULElement]
-*/
- -

Scratchpad的执行环境在该状态下将被设置为browser：当代码段的第一行为
- // -sp-context: browser

- -

Keyboard shortcuts

- -

{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "scratchpad") }}

- -

Source editor shortcuts

- -

{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/zh-cn/tools/webide/index.html b/files/zh-cn/tools/webide/index.html deleted file mode 100644 index 3dc19db451..0000000000 --- a/files/zh-cn/tools/webide/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: WebIDE -slug: Tools/WebIDE -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/WebIDE ---- -
{{ToolsSidebar}}
-

WebIDE是 App Manager 的替代开发工具。 像App Manager一样，WebIDE能够使你在Firefox OS模拟器 或者真实的Firefox OS设备中运行 Firefox OS 应用程序。

- -

无论如何，WebIDE也为你创建和开发Firefox OS程序提供一个编辑环境， 包括具备编辑和存储你的应用程序所有文件的树形视图，并且提供两个应用程序模板来帮助你开始。

-
- -

要使用WebIDE，你首先需要安装一个或者多个运行环境 。运行环境是你运行和调试应用程序的地方，运行环境可以是通过USB接口链接到电脑的Firefox OS设备，也可能是安装到电脑中的Firefox OS模拟器。

- -

接下来你可以 创建一个app，或者打开已有的app。 如果你正要创建一个新的app，你可以从一个包含目录结构以及你需要的最小样板文件的模板开始。或者从一个更完整的能够展现如何使用特权API的模板开始。WebIDE使用树形结构来显示你的app文件，并且可以使用WebIDE内建的代码编辑器来编辑和存储你的代码文件。当然你不必非要使用内建的编辑器，你完全能够不使用WebIDE来开发你的app，仅仅使用他来调试你的app。

- -

最后，你能够在运行环境中安装和运行你的app，并且打开常用的开发工具套件 -- Inspector, Console, JavaScript Debugger 等来检测和修改正在运行的app。

- -

使用WebIDE来开发和调试程序，你需要的所用东西就是Firefox 33或者更新的版本。为了在一个实际设备上测试，你需要Firefox OS 1.2 或者更新版本，还需要一条USB线。

- -

如果你针对的Firefox OS是1.2 或者更新版本的话， 你只能使用WebIDE调试程序。

- -

打开WebIDE

- -

在Web开发者菜单上点击WebIDE就能打开WebIDE界面， 你也能够使用快捷键 Shift + F8来启动WebIDE：你可以在左边下拉菜单"Open App"中打开已有的apps，或者创建一个新的app， 在右边的下拉菜单 "Select Runtime" 中选择一个运行环境或者安装新的运行环境。

- -

中间的按钮分别是 运行，停止，和调试功能：他们仅仅在你打开了一个应用并选择了一个运行环境时才是可用的。

- -

安装运行环境

- -

在 "Select Runtime" 下拉菜单里，运行环境分为三个类型：

- - - -

在第一次使用时，你可能不会看到任何运行环境：

- -

这部分余下的内容将描述如何安装运行环境。

- -

链接一个Firefox OS设备

- -

在这之前，有一些设置你需要完成：

- - - -
-

Linux系统:

- - -
- -
-

Windows 系统:

- - -
- -

如果有其他的Android设备连接到你的计算机，断开他们。现在你可以使用USB线连接你的设备到计算机， 你应该可以在“USB DEVICE” 下看到你的设备了:

- -

- -

如果你仍然没有看到你的设备，请看 故障排除 页面。

- -

添加模拟器

- -

Firefox OS 模拟器是Firefox OS更高层次的版本，他模拟一个Firefox OS设备， 但是运行在计算机桌面上。模拟器运行在一个与类似Firefox OS设备同样大小的窗体中，他包括Firefox OS用户界面，内建apps，并且模拟了很多Firefox OS设备APIs。

- -

这意味着在许多情况下，你没有必要使用真实的设备来测试和调试你的应用。

- -

模拟器是比较大的，所以没有集成到Firefox浏览器中，而是作为Firefox的一个附加组件 附加组件。如果你在“Select Runtime”中点击 "Install Simulator" ，你会去到一个能够安装各种版本Firefox OS模拟器的页面，如下图：你能够安装你想要的所有模拟器，耐心点，既然模拟器是比较大的，这可能需要花上好几分钟来下载。一旦你已经安装了一些模拟器，你可以关闭“Extra Componets” 窗口， 你安装的模拟器将会显示在“Select Runtime”下拉菜单上面:

- -

要进一步了解模拟器, 请看他的 文档页面 。

- -

自定义运行环境

- -

使用自定义运行环境，你能够使用任意的主机名和端口来链接远程设备。

- -

在表面之下, Firefox OS设备和Android设备使用一个叫 Android Debug Bridge, or ADB 的程序来连接到电脑桌面。默认情况下，WebIDE使用附件组件 ADB Help： 这简化了让你安装 ADB 和设置转发端口以便Firefox桌面工具能够与设备交换信息的过程。

- -

在大多数情况下这是方便的，但有时候你可能想要单独运行ADB，例如： 你或许需要在命令行上直接运行ADB。在这种情形下，你需要通过命令 adb forward 来指定一个主机和端口来连接到你的设备。
-
- 如果你想用WebIDE来像上面一样手动连接的话， 你应该禁止ADB Helper附件组件，并且使用定制的运行环境，输入主机名和端口号，那也是你要传给adb forward命令的参数。

- -

ADB Helper 目前仍然不支持连接到Android的Firefox， 所以如果你想要连接WebIDE到你的Android Firefox, 你需要设置你自己的转发端口，并使用定制的运行环境。查看更多有关使用ADB连接到Android Firefox 。

- -

选择运行环境

- -

一旦你设置好了运行环境， 你就就可以使用 “Select Runtime” 来选择你要使用他们。

- - - -

这是在WebIDE工具栏中间的 “ play ” 按钮就可以使用了， 点击它会在当前的运行环境中安装并运行app。

- -

运行环境动态

- -

当一个运行环境被选中后，下拉菜单下面有三个额外的菜单项：

- - - -

- -

- -

创建和打开app

- -

在左边下拉菜单 "Open App" 中有三个菜单项：“New App..." , "Open Packaged App... " "Open Hosted App", 分别对应 创建一个新的app， 打开一个打包的app， 打开一个主机上的app 。

- -

- -

创建一个新的app

- -

选择 "New App..." 来创建一个新的app， 你会看到如下图的对话框提供两个app模板供你选择： "Privileged Empty App" 和 "Privileged App".

- -

- -

两个模板都来自Mozilla的  app模板收集 ，为你提供了程序初始的基本结构。"Privileged App" 模板为你演示了app如何使用权限来装载跨域的远程内容。

- -

一旦你选择了一个模板，你需要命名这个app并选择一个目录来存储这些模板文件，然后你的新app就在项目编辑器中打开了。

- -

开启一个包装的app

- -

选择 "Open Packaged App..." 来打开一个 包装好的app。WebIDE会要求你选择包含 app的manifest 目录， 并且WebIDE会在 project editor 中打开app。

- -

开启一个主机上的app

- -

你可以选择 "Open Hosted App..." 来开启一个 hosted app 。你需要输入一个URL，他链接到app的manifest ，同样app会在 project editor中打开。

- -

编辑app

- -

project editor 为app提供了一个编辑环境，它的左边是app中所有文件的一个树形视图，你能够使用右键中菜单来够添加和删除文件，右边是文件的编辑窗口。

- -

app概要页面

- -

当第一次开启或创建app时， 编辑器的编辑窗口会显示app的概要信息页面，如下图所示：

- -

- -

当你需要回到这个页面时， 你可以通过点击左边视图中的根目录。

- -

Manifest验证

- -

WebIDE会自动地检查manifest一些特定的通用问题，如果发现了问题的话，WebIDE会在app的概要页面上显示app是无效的并描述发现的问题：

- -

- -

当然，你也能够在项目编辑器中将 manifest.webapp 编辑修改正确。

- -

源代码编辑器The source editor

- -

WebIDE使用 CodeMirror 源代码编辑器

- -

Source editor shortcuts

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

- -

代码补全功能

- -

当使用WebIDE编辑 CSS 和 JavaScript的代码时， 编辑器提供自动补全建议， 并且CSS自动补全的功能总是开启的。

- -

要开启JavaScript的自动补全功能，需要按 Ctrl + 空格键：

- -

内联文档

- -

编辑器也可以为JavaScript代码显示内联文档。将光标停留在相应的符号上面，按Shift＋Space键可以看到包含文档内容的弹窗。

- -

- -

如上图，点击在弹窗中的[docs],将会链接到符号的MDN页面。

- -

存储文件

- -

你需要存储你的文件才能使修改生效，对于有变化而没有存储的文件，WebIDE会在文件名前面标记星号，你可以通过菜单上的保存功能或使用 Control + S键来存储文件（在Mac OS X系统上的快捷键是 Command + S）。

- -

移除项目

- -

要从WebIDE移除一个app，到app概要页面并点击 "Remove Project" 。

- -

运行与调试app

- -

当你准备好运行app时， 你需到从"Select Runtime" 下拉菜单中选择一个运行环境 。如果你没有任何可用的运行环境，可以在 安装运行环境 章节中找到如何添加一个。

- -

现在，WebIDE 工具栏中的 "play" 按钮已经可以使用了， 点击它可以在选定的运行环境中安装并运行app。

- -

要调试app的话，点击 "Pause" 按钮， 会显示开发者工具箱Toolbox，并连接了你的app：

- -

哪些工具可以使用依赖于你选择的运行环境， 但是至少有这些基本工具：Inspector, Console, JavaScript Debugger, Style Editor, Profiler 和 Scratchpad。恰恰像在一个Web页面中一样，你在工具中所作的任何改变在app中都是可以立即可见的，但是能保存下来。 相反地，你在编辑窗口所作的改变可以保存到磁盘中，但是如果你不重启app的话是不会看到改变的。

- -

调试认证的应用程序 (包括主进程)

- -

你能够针对模拟器、b2g桌面、或者一个真实设备运行调试器。

- -

当选择了一个运行环境的同时，如果你点击app下拉菜单，你不仅可看到你的app，还可以看到运行环境中的所有app。你可以使用模拟器来调试他们，包括认证的应用程序:

- -

- -


- 无论如何，要在一个真实的设备上调试认证的应用程序：

- - - -

要启用认证应用程序调试需要连接到运行环境，然后在WebIDE主菜单 “Runtime” 中选择“Runtime Info” ， 如果你看到 "DevTools restricted privileges: yes"，意味着认证应用程序不能被调试。启用路径可能随着你针对的调试设备不同而不同：

- - - -

现在，你可以在WebIDE里面看到设备上所有的认证应用程序（B2G 桌面客户端或许需要重启一遍）。

- -

监视执行性能

- -

如果你对你的应用程序的执行性能有兴趣的话，有几个办法可以测量他们对WebIDE的运行环境的影响:

- - - -

故障排除

- -

如果你在使用WebIDE时有任何问题， 请查阅 故障排除 页面.

- -

 

- -

 

diff --git a/files/zh-cn/tools/webide/monitor/index.html b/files/zh-cn/tools/webide/monitor/index.html deleted file mode 100644 index 5a650a572d..0000000000 --- a/files/zh-cn/tools/webide/monitor/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Monitor -slug: Tools/WebIDE/Monitor -translation_of: Archive/WebIDE/Monitor ---- -
{{ToolsSidebar}}
-

The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of Firefox OS apps and devices.

-
- -

The WebIDE Monitor

- -

The Monitor is able to display live, interactive graphs to visualize time series.

- -

Available graphs

- -

The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.

- -

Unique Set Size

- -

Unique Set Size

- -

This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.

- -

Displaying your own data

- -

It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.

- -

From a Firefox OS device

- -

You can send data from a connected device by sending observer notifications.

- -

Note: If you would like to do this in a certified app, please follow these instructions.

- -

JavaScript

- -

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

- -

You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:

- -

const Services = require('Services');
-
- var start = Date.now();
- // code to benchmark
- var stop = Date.now();
-
- var data = { graph: 'Performance', myFeature: stop-start, time: stop };
- Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

- -

C++

- -

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

- -

You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:

- -

#include <time.h>
- #include "nsPrintfCString.h"
- #include "nsIObserverService.h"
-
- clock_t start = clock();
- // code to benchmark
- clock_t stop = clock();
- double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
-
- nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
- if (observerService) {
-   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
-   nsAutoString data = NS_ConvertUTF8toUTF16(str);
-   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
- }

- -

From your computer

- -

You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.

- -

By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the devtools.webide.monitorWebSocketURL preference.

- -

You can even make it accept data from your local network, or from anywhere on the Internet.

- -

Node.js

- -

TODO

- -

Python

- -

TODO

- -

Supported formats

- -

The Monitor accepts data in the form of JSON objects that generally look like this:

- -

{
-   "graph": "myGraph",
-   "curve": "myCurve",
-   "value": 42,
-   "time": 1234567890
- }

- -

That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.

- -

Arbitrary names

- -

Unrecognized entries will be considered as curve name and value.

- -

The smallest data packet you can send is something like:

- -

{ "myCurve": 42 }

- -

This will add a data point to "myCurve" in a graph with no name. The missing time will default to when the Monitor received the packet.

- -

For better precision, it's probably better to always specify a timestamp for your data:

- -

{
-   "current": 60,
-   "voltage": 500,
-   "time": 1234567890
- }

- -

Multiple values

- -

In a single update, you can send data for multiple curves:

- -

{
-   "graph": "myGraph",
-   "myCurve1": 50,
-   "myCurve2": 300,
-   "myCurve3": 9000,
-   "time": 1234567890
- }

- -

Or several data points for a single curve:

- -

{
-   "graph": "myGraph",
-   "curve": "myCurve",
-   "values": [
-     { "time": 1234567890, "value": 42 },
-     { "time": 1234567981, "value": 51 }
-   ]
- }

- -

Multiple updates

- -

And you can also send multiple data updates as an Array:

- -

[
-   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
-   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
- ]

- -

Punctual events

- -

To mark special events in a graph with a vertical bar, add an event key to your update:

- -

{
-   "graph": "myGraph",
-   "event": "myEvent",
-   "time": 1234567980
- }

diff --git a/files/zh-cn/tools/webide/opening_webide/index.html b/files/zh-cn/tools/webide/opening_webide/index.html deleted file mode 100644 index 5ca53cf1ac..0000000000 --- a/files/zh-cn/tools/webide/opening_webide/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Opening WebIDE -slug: Tools/WebIDE/Opening_WebIDE -translation_of: Archive/WebIDE/Opening_WebIDE ---- -
{{ToolsSidebar}}

有三种方式打开WebIDE:

- - - -

- -

下面是WebIDE的样子:在左边的侧边栏你可以打开已经存在的项目,或者创建新的项目.而在右边的侧边栏你可以选择一个运行环境或者新安装一个运行环境.

- -

中间的按钮分别是:运行,停止和调试app:他们只有在你打开一个项目并且选择了运行环境是才可以使用.

- -

在WebIDE中你可以使用通用的快捷键(在OS X中用Command代替Control)改变字体的大小:

- - diff --git "a/files/zh-cn/tools/webide/\351\227\256\351\242\230\346\216\222\351\231\244/index.html" "b/files/zh-cn/tools/webide/\351\227\256\351\242\230\346\216\222\351\231\244/index.html" deleted file mode 100644 index 4bb1d714d8..0000000000 --- "a/files/zh-cn/tools/webide/\351\227\256\351\242\230\346\216\222\351\231\244/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: WebIDE 问题排除 -slug: Tools/WebIDE/问题排除 -translation_of: Archive/WebIDE/Troubleshooting ---- -
{{ToolsSidebar}}

使用USB连接Firefox for Android

- -

如果你试着连接一个Android设备上的Firefox实例，但并没有成功。你可以尝试下面的解决方法：

- - - -

调试认证的应用

- -

如果你想要调试认证的app，包括内建的app，请参考：调试认证的app。

- -

启用日志功能

- -

你也可以启用详细日志功能来收集诊断信息：

- -
    -
  1. 访问 about:config, 增加一个新的配置： .console.logLevel, 将其值设置为all,并设置extensions.adbhelper@mozilla.org.debug为True。
    2. -
  2. 在插件管理器中禁用 ADB Helper add-on，然后在启用。
    3. -
  3. 打开浏览器控制台 现在你可以看到带adb前缀的控制台信息，如果这个信息对你来说没有任何用处，请寻求帮助 。
    4. -
- -

获取帮助

- -

你也可以去 IRC的devtools房间 ， 我们会尝试提供帮助。

-- cgit v1.2.3-54-g00ecf