WebIDE

从Firefox 34开始可以使用WebIDE了。

你也能够在Firefox 33中使用WebIDE,你需要在浏览器中运行, about:config ,找到并设置devtools.webide.enabledtrue

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" 下拉菜单里,运行环境分为三个类型:

  • USB devices: 通过USB链接的Firefox OS设备
  • Simulators: 已经安装的Firefox OS模拟器
  • Custom: use this to connect to the WebIDE using an arbitrary name and port.

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

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

链接一个Firefox OS设备

在这之前,有一些设置你需要完成:

  • 检查你设备的Firefox OS版本:确认你的设备运行的是Firefox OS1.2/Boot2Gecko, 或者更高版本。为了检查Firefox OS版本,进入Settings > Device Information > Software。如果你没有足够高的版本OS,在 developer phone guide 中找到你的设备,并按照如下指令来升级。
  • 启用远程调试:进入 Settings > Device information > More information > Developer.
    • FirefoxOS 1.3 及更早版本:选择 "Remote Debugging" 。
    • Firefox OS 1.4 及更新版本: "Remote Debugging" 询问你要启用 ADB,ADB and DevTools还是DevTools,选择ADB and DevTools。
  • 禁用锁屏: 进入 Settings > Screen Lock 取消选择 Lock Screen, 因为当设备锁屏时,设备连接就丢失了,意味着设备不再可以用于调试了。
  • 如果你想要调试认证的app,包括内建的app,请参考:调试认证的app.

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会启动模拟器。If you select a Simulator, the WebIDE launches the Simulator.
  • 如果你现在一个Firefox OS 设备,在设备上会有一个对话框要求你按 “OK” 来证实你希望链接到WebIDE。

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

运行环境动态

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

  • Runtime Info: 当前运行环境的信息
  • Permissions Table: 当前运行环境的  app permissions 概览, 每个API和每个app type 是否允许访问(✓),禁止(✗), 或者用户是否被提示(!)。
  • Screenshot: 从运行环境中截屏

创建和打开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

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

Command Windows OS X Linux
Go to line Ctrl + J Cmd + J Ctrl + J
Find in file Ctrl + F Cmd + F Ctrl + F
Find again Ctrl + G Cmd + G Ctrl + G
Select all Ctrl + A Cmd + A Ctrl + A
Cut Ctrl + X Cmd + X Ctrl + X
Copy Ctrl + C Cmd + C Ctrl + C
Paste Ctrl + V Cmd + V Ctrl + V
Undo Ctrl + Z Cmd + Z Ctrl + Z
Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indent Tab Tab Tab
Unindent Shift + Tab Shift + Tab Shift + Tab
Move line(s) up Alt + Up Alt + Up Alt + Up
Move line(s) down Alt + Down Alt + Down Alt + Down
Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

代码补全功能

当使用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, ProfilerScratchpad。恰恰像在一个Web页面中一样,你在工具中所作的任何改变在app中都是可以立即可见的,但是能保存下来。 相反地,你在编辑窗口所作的改变可以保存到磁盘中,但是如果你不重启app的话是不会看到改变的。

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

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

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


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

  • 设备必须是运行Firefox OS 1.2以上版本的开发构建系统
  • 你必须启用认证应用程序调试

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

  • 真实设备
    • 如果设备能够被root,点击"request higher privileges" 启用认证应用程序调试 ,Firefox OS将会重启,你或许需要再次在'Select Runtime' 中选择你的运行设备 。
  • 模拟器
    • 模拟器默认已经启用认证应用程序调试
  • B2G 桌面
    • 在连接之前手动编辑B2G桌面客户端的配置preferences 来启用认证应用程序调试

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

监视执行性能

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

  • WebIDE的 Monitor 提供了一个非常好设备性能视图,这能够帮助你发现问题,例如:一个应用程序突然过度占用内存(内存泄露)。
  • 工具 Profiler 提供了另外一个分析单个应用程序详细足迹的方法, 这个对于你调查已知的性能问题非常有用。

故障排除

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

 

 

文档标签和贡献者

 此页面的贡献者: shiozghost, zqq90, Richard.Hong, mdas
 最后编辑者: shiozghost,