你可以在左边下拉菜单"Open App"中打开已有的apps，或者创建一个新的app， 在右边的下拉菜单 "Select Runtime" 中选择一个运行环境或者安装新的运行环境。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调试程序。
在Web开发者菜单上点击WebIDE就能打开WebIDE界面， 你也能够使用快捷键 Shift + F8来启动WebIDE：你可以在左边下拉菜单"Open App"中打开已有的apps，或者创建一个新的app， 在右边的下拉菜单 "Select Runtime" 中选择一个运行环境或者安装新的运行环境。
中间的按钮分别是 运行，停止，和调试功能：他们仅仅在你打开了一个应用并选择了一个运行环境时才是可用的。
在 "Select Runtime" 下拉菜单里，运行环境分为三个类型：
在第一次使用时，你可能不会看到任何运行环境：
这部分余下的内容将描述如何安装运行环境。
在这之前，有一些设置你需要完成：
Software。如果你没有足够高的版本OS，在 developer phone guide 中找到你的设备，并按照如下指令来升级。Device information > More information > Developer.
Screen Lock 取消选择 Lock Screen， 因为当设备锁屏时，设备连接就丢失了，意味着设备不再可以用于调试了。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。
当一个运行环境被选中后，下拉菜单下面有三个额外的菜单项：
在左边下拉菜单 "Open App" 中有三个菜单项：“New App..." , "Open Packaged App... " "Open Hosted App", 分别对应 创建一个新的app， 打开一个打包的app， 打开一个主机上的app 。
选择 "New App..." 来创建一个新的app， 你会看到如下图的对话框提供两个app模板供你选择： "Privileged Empty App" 和 "Privileged App".
两个模板都来自Mozilla的 app模板收集 ，为你提供了程序初始的基本结构。"Privileged App" 模板为你演示了app如何使用权限来装载跨域的远程内容。
一旦你选择了一个模板，你需要命名这个app并选择一个目录来存储这些模板文件，然后你的新app就在项目编辑器中打开了。
选择 "Open Packaged App..." 来打开一个 包装好的app。WebIDE会要求你选择包含 app的manifest 目录， 并且WebIDE会在 project editor 中打开app。
你可以选择 "Open Hosted App..." 来开启一个 hosted app 。你需要输入一个URL，他链接到app的manifest ，同样app会在 project editor中打开。
project editor 为app提供了一个编辑环境，它的左边是app中所有文件的一个树形视图，你能够使用右键中菜单来够添加和删除文件，右边是文件的编辑窗口。
当第一次开启或创建app时， 编辑器的编辑窗口会显示app的概要信息页面，如下图所示：
当你需要回到这个页面时， 你可以通过点击左边视图中的根目录。
WebIDE会自动地检查manifest一些特定的通用问题，如果发现了问题的话，WebIDE会在app的概要页面上显示app是无效的并描述发现的问题：
当然，你也能够在项目编辑器中将 manifest.webapp 编辑修改正确。
WebIDE使用 CodeMirror 源代码编辑器
{{ 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时， 你需到从"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"，意味着认证应用程序不能被调试。启用路径可能随着你针对的调试设备不同而不同：
"request higher privileges" 启用认证应用程序调试 ，Firefox OS将会重启，你或许需要再次在'Select Runtime' 中选择你的运行设备 。现在，你可以在WebIDE里面看到设备上所有的认证应用程序（B2G 桌面客户端或许需要重启一遍）。
如果你对你的应用程序的执行性能有兴趣的话，有几个办法可以测量他们对WebIDE的运行环境的影响:
如果你在使用WebIDE时有任何问题， 请查阅 故障排除 页面.