编辑注: 如果您想在最近的 Nightly 版本上帮助测试,您可以在 about:config 中切换 devtools.webide.enabled 偏好设置。WebIDE 今天在 工具 > Web 开发者 > 应用管理器 中可用,并将在明天的 Nightly 版本中重命名为 WebIDE。
如果您一直在关注 Mozilla Hacks 博客上的 开发者工具系列,您就会看到开发者工具从纯粹的检查演变为一个调试环境,既适用于桌面和移动端的网站,也适用于应用程序。今天,我们想向您介绍下一个演变步骤:在跨设备添加浏览器内编辑功能。
WebIDE
开发者告诉我们,他们不确定如何开始在 Web 上进行应用程序开发,因为他们需要从各种不同的来源下载许多不同的工具和模板。我们通过直接内置于 Firefox 的 WebIDE 来解决这个问题。与从零开始相比,我们为您提供了一个只需单击按钮即可获得的正常运行的蓝图应用程序。然后,您拥有开始创建基于坚实基础的应用程序所需的所有工具。WebIDE 帮助您直接在浏览器中创建、编辑和测试新的 Web 应用程序。它允许您在 Firefox OS 设备和模拟器上安装和测试应用程序,并集成了 Firefox 开发者工具,以实现跨这些设备的无缝调试和检查。这是朝着使用开放式远程调试 API 通过 WiFi 在各种平台和设备上进行调试迈出的第一步。
入门
打开 WebIDE 后,您可以通过几次点击开始创建新的应用程序。您可以从一组示例入门模板中选择,并且我们正在与社区合作构建各种其他示例。您可以访问 https://github.com/mozilla/mortar 来帮助创建模板。
编辑
开始项目后,您可以在 WebIDE 中编辑源文件。它的集成编辑器基于开源 CodeMirror 编辑器 和 tern.js 代码分析框架,为您提供了针对 HTML、JavaScript 和 CSS 文件的简单但功能强大的编辑器。
在使用 Web 应用程序清单 时,应用程序验证器将帮助您在提交到 应用商店 之前找到常见问题。
虽然这足以满足您的基本编辑需求,但您可能希望改用自己的首选编辑器。为此,您可以使用一个简单的 API,该 API 允许外部编辑器访问该工具的所有高级功能——其运行时管理、将应用程序推送到不同设备以及连接 Firefox 开发者工具。您可以关闭我们的内部编辑器,并将 WebIDE 变成一个简单、干净的界面,用于管理运行时和验证应用程序。我们希望让任何代码编辑器的用户都能轻松地将代码传输到各种设备。
运行时和测试
准备好测试应用程序后,请选择一个运行时——我们将为您安装 Firefox OS 模拟器,或者帮助您连接到您的 Firefox OS 设备。连接到运行时后,您可以使用您在桌面 Firefox 中习惯使用的工具来尝试您的应用程序。您拥有与桌面 Web 开发一样快速的迭代,只需按 Ctrl/Command+R 即可重新加载设备或模拟器上的应用程序。您可以获取有关设备和运行时的信息并截取屏幕截图。
看一下
您可以查看 此屏幕录制 中的 WebIDE 实际操作。
虽然我们正在进行一些最后的润色,但 WebIDE 已签入 Firefox Nightly,但隐藏在 pref 后面——如果您想在最近的 Nightly 版本上帮助测试,您可以在 about:config 中切换 devtools.webide.enabled 偏好设置。
未来:为整个 Web 开发
WebIDE 的核心是 Firefox 远程调试协议。Firefox 开发者工具团队付出了很多努力来确保我们所有的工具都可以在通过 USB 运行的远程设备上工作,但这仅仅是开始。有了 WebIDE 管理这些连接,我们可以在任何地方使用 Firefox 开发者工具——以及任何想要使用我们协议的其他工具。
目前,此协议适用于 Firefox 桌面、Firefox Android 和 Firefox OS。但我们并不止步于此。我们正在开发一个协议适配器,它将允许使用 Firefox 远程调试协议的客户端(包括开发者工具和 WebIDE)与所有移动浏览器通信,而不管渲染引擎或运行时如何。我们的首要目标是 Chrome for Android 和 iOS 上的 Safari。
这个 Web 无处不在的项目尚未准备好进行测试,但如果您很兴奋想要参与或了解它的实现方式,它目前位于 https://github.com/campd/fxdt-adapters。
如果您正在构建工具并想要开始使用该协议,您可以立即开始,针对 Firefox 桌面、Firefox Android 和 Firefox OS 进行开发。有关远程调试协议的信息,请查看 文档。
感谢阅读。我们期待在评论中、我们的 UserVoice 反馈渠道 以及 Twitter 上 @firefoxdevtools 听到您的反馈。
关于 Robert Nyman [名誉编辑]
技术布道师和 Mozilla Hacks 编辑。发表有关 HTML5、JavaScript 和开放式 Web 的演讲和博客文章。Robert 是 HTML5 和开放式 Web 的坚定支持者,自 1999 年以来一直在从事 Web 前端开发工作——在瑞典和纽约市。他还经常在 http://robertnyman.com 上写博客,喜欢旅行和结识新朋友。
72 条评论