伴随着小提琴的旋律起舞

JSFiddle 是一个很棒的原型设计和代码审查工具。它非常适合快速进行测试用例或代码概念的验证，而无需启动完整的工具链和编辑器。此外，它也是一个很棒的粘贴行为不正常的代码的地方，以便其他人可以查看它，并理想情况下帮助您找到问题的根源。

现在，您不仅可以对代码片段进行原型设计，还可以对 Firefox OS 应用进行原型设计。我们对此感到非常兴奋，因为有一段时间以来，我们一直在努力确保开发者理解创建 Firefox OS 应用就像创建 Web 应用一样。通过在浏览器中实时使用 JSFiddle 进行调整，我们认为您会发现它有多么容易，并且会更清楚地看到两者之间的相似之处。

使用 JSFiddle 设计 Firefox OS 应用：总结

以下是在使用 JSFiddle 设计 Firefox OS 应用时需要执行的步骤

1. 像平常一样编写代码，就像制作 JSFiddle 时一样
2. 将 /webapp.manifest 附加到 Fiddle URL 的末尾，然后将此链接粘贴到 Firefox OS 模拟器中以安装应用
3. 或者，将 /fxos.html 附加到 Fiddle URL 的末尾，以获得类似于典型 Firefox OS 托管应用程序的安装页面

我创建了一个演示 JSFiddle 这里，我们将在下一节中详细介绍它。

使用 JSFiddle 设计 Firefox OS 应用：详细说明

编写一些代码

让我们从一个基本的“Hello World!”开始，这是一个熟悉的最小实现。在您的 Fiddle 中实现以下代码

HTML

Hello world!

CSS

h1 {
    color: #f00;
}

JavaScript

alert(document.getElementsByTagName('h1')[0].innerHTML);

您的 Fiddle 应该类似于以下内容

然后，将 /manifest.webapp 附加到 Fiddle URL 的末尾。以我的演示 Fiddle 为例，最终得到 http://jsfiddle.net/afabbro/vrVAP/manifest.webapp

将此 URL 复制到剪贴板。根据浏览器的行为，它可能不会完整地复制“http://”。请注意，模拟器不接受协议未明确指定的任何 URL。因此，如果它不存在，请添加它。当 URL 无效时，模拟器会使用红色边框突出显示此输入框。

如果您尝试从浏览器导航栏访问 manifest.webapp，您应该最终会下载一个自动生成的清单的副本，您可以仔细阅读它。例如，这是我的测试应用的清单

{
  "version": "0",
  "name": "Hello World Example",
  "description": "jsFiddle example",
  "launch_path": "/afabbro/vrVAP/app.html",
  "icons": {
    "16": "/favicon.png",
    "128": "/img/jsf-circle.png"
  },
  "developer": {
    "name": "afabbro"
  },
  "installs_allowed_from": ["*"],
  "appcache_path": "http://fiddle.jshell.net/afabbro/vrVAP/cache.manifest",
  "default_locale": "en"
}

如果您之前没有为 Firefox OS 应用编写过清单，那么查看这个自动生成的清单将让您了解在以后从头开始创建自己的清单时需要提供哪些信息。

在模拟器中安装应用

将您复制的 URL 粘贴到如下所示的字段中。如前所述，如果您的 URL 存在任何问题，该字段将以红色突出显示。

添加后，模拟器应立即启动您的应用。

您可以看到，在我们关闭 alert() 之后，我们处于一个视图（在本例中是一个基本的 HTML 页面），其中包含一个单一的红色 h1 标签，正如我们所预期的那样。

从 Firefox OS 设备安装应用

在 Firefox OS 设备上的浏览器中或模拟器提供的浏览器中，访问 Fiddle 的 URL 并附加 /fxos.html。再次以演示 URL 为例，我们得到：http://jsfiddle.net/afabbro/vrVAP/fxos.html

点击安装，您应该可以在主屏幕上找到该应用。

注意事项

这仍然是 JSFiddle 工具的一个非常新的用途，因此仍然存在一些错误和功能，我们希望能够在长期内解决。例如，在撰写本文时，以下注意事项是真实的

1. 您一次只能在模拟器中安装一个使用 JSFiddle 设计的应用
2. 没有离线支持

感谢

这个 JSFiddle 技巧来自 Piotr Zalewa，他恰好也正在为 Firefox OS 制作 PhoneGap 构建。请在评论中告诉我们您的想法，如果您制作了一些有趣的东西想炫耀，请发布您的 Fiddle 的清单链接。