diff options
Diffstat (limited to 'files/zh-cn/tools/webide/index.html')
| -rw-r--r-- | files/zh-cn/tools/webide/index.html | 271 |
1 files changed, 0 insertions, 271 deletions
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 ---- -<div>{{ToolsSidebar}}</div><div class="summary"> -<p>WebIDE是 <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> 的替代开发工具。 像App Manager一样，WebIDE能够使你在<a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS模拟器</a> 或者真实的Firefox OS设备中运行 <a href="/en-US/Firefox_OS">Firefox OS</a> 应用程序。</p> - -<p>无论如何，WebIDE也为你创建和开发Firefox OS程序提供一个编辑环境， 包括具备编辑和存储你的应用程序所有文件的树形视图，并且提供两个应用程序模板来帮助你开始。</p> -</div> - -<p>要使用WebIDE，你首先需要安装<a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">一个或者多个运行环境</a> 。运行环境是你运行和调试应用程序的地方，运行环境可以是通过USB接口链接到电脑的Firefox OS设备，也可能是安装到电脑中的Firefox OS模拟器。</p> - -<p>接下来你可以<a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps"> 创建一个app，或者打开已有的app</a>。 如果你正要创建一个新的app，你可以从一个包含目录结构以及你需要的最小样板文件的模板开始。或者从一个更完整的能够展现如何使用特权API的模板开始。WebIDE使用树形结构来显示你的app文件，并且可以使用WebIDE内建的代码编辑器来编辑和存储你的代码文件。当然你不必非要使用内建的编辑器，你完全能够不使用WebIDE来开发你的app，仅仅使用他来调试你的app。</p> - -<p>最后，<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">你能够在运行环境中安装和运行你的app</a>，并且打开常用的开发工具套件 -- <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> 等来检测和修改正在运行的app。</p> - -<p>使用WebIDE来开发和调试程序，你需要的所用东西就是Firefox 33或者更新的版本。为了在一个实际设备上测试，你需要Firefox OS 1.2 或者更新版本，还需要一条USB线。</p> - -<p>如果你针对的Firefox OS是1.2 或者更新版本的话， 你只能使用WebIDE调试程序。</p> - -<h2 id="打开WebIDE">打开WebIDE</h2> - -<p>在Web开发者菜单上点击WebIDE就能打开WebIDE界面， 你也能够使用快捷键 Shift + F8来启动WebIDE：<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">你可以在左边下拉菜单"Open App"中打开已有的apps，或者创建一个新的app， 在右边的下拉菜单 "Select Runtime" 中选择一个运行环境或者安装新的运行环境。</p> - -<p>中间的按钮分别是 运行，停止，和调试功能：他们仅仅在你打开了一个应用并选择了一个运行环境时才是可用的。</p> - -<h2 id="安装运行环境">安装运行环境</h2> - -<p>在 "Select Runtime" 下拉菜单里，运行环境分为三个类型：</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: 通过USB链接的Firefox OS设备</li> - <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: 已经安装的Firefox OS模拟器</li> - <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li> -</ul> - -<p>在第一次使用时，你可能不会看到任何运行环境：</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">这部分余下的内容将描述如何安装运行环境。</p> - -<h3 id="链接一个Firefox_OS设备">链接一个Firefox OS设备</h3> - -<p>在这之前，有一些设置你需要完成：</p> - -<ul> - <li><strong>检查你设备的Firefox OS版本：确认你的设备运行的是Firefox OS1.2/Boot2Gecko, 或者更高版本。为了检查Firefox OS版本，进入Settings > Device Information ><code> Software。如果你没有足够高的版本OS，在</code></strong> <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> 中找到你的设备，并按照如下指令来升级。</li> - <li><strong>启用远程调试：</strong>进入 Settings > <code>Device information > More information > Developer</code>. - <ul> - </ul> - - <ul> - <li>FirefoxOS 1.3 及更早版本：选择 "Remote Debugging" 。</li> - <li>Firefox OS 1.4 及更新版本: "Remote Debugging" 询问你要启用 ADB，ADB and DevTools还是DevTools，选择ADB and DevTools。</li> - </ul> - </li> - <li><strong>禁用锁屏:</strong> 进入 Settings > <code>Screen Lock</code> 取消选择 <code>Lock Screen</code>， 因为当设备锁屏时，设备连接就丢失了，意味着设备不再可以用于调试了。</li> - <li><strong>如果你想要调试认证的app，包括内建的app，请参考：</strong><a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">调试认证的app</a>.</li> -</ul> - -<div class="note"> -<p><strong>Linux系统:</strong></p> - -<ul> - <li>增加一个 udev规则文件，按照<a class="external-icon external" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第3步的说明。Geeksphone分配使用的idVendor是05c6， 并且在<a class="external-icon external" href="http://developer.android.com/tools/device.html#VendorIds">这一页</a>中有列出其他厂商的idVendor值。</li> -</ul> -</div> - -<div class="note"> -<p><strong>Windows 系统:</strong></p> - -<ul> - <li>你需要根据<a class="external-icon external" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第三步来安装驱动程序，可以在<a class="external-icon external" href="http://downloads.geeksphone.com/">Geeksphone </a>网站上找到Geeksphone设备的驱动程序。Windows 8在默认情况下不能够安装未签名的驱动程序，可以参考 <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"如何在Window 8上安装未签名的驱动"</a>。</li> - <li>如果上面所有的方法都不能让WebIDE找到你的设备的话，你或许不得不编辑<a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"> adb_usb.ini</a>。</li> -</ul> -</div> - -<p>如果有其他的Android设备连接到你的计算机，断开他们。现在你可以使用USB线连接你的设备到计算机， 你应该可以在“USB DEVICE” 下看到你的设备了:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> - -<p>如果你仍然没有看到你的设备，请看 <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">故障排除</a> 页面。</p> - -<h3 id="添加模拟器">添加模拟器</h3> - -<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 模拟器</a>是Firefox OS更高层次的版本，他模拟一个Firefox OS设备， 但是运行在计算机桌面上。模拟器运行在一个与类似Firefox OS设备同样大小的窗体中，他包括Firefox OS用户界面，内建apps，并且模拟了很多Firefox OS设备APIs。</span></p> - -<p><span style="line-height: 1.5;">这意味着在许多情况下，你没有必要使用真实的设备来测试和调试你的应用。</span></p> - -<p>模拟器是比较大的，所以没有集成到Firefox浏览器中，而是作为Firefox的一个附加组件 <a href="/en-US/Add-ons">附加组件</a>。如果你在“Select Runtime”中点击 "Install Simulator" ，你会去到一个能够安装各种版本Firefox OS模拟器的页面，如下图：<img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">你能够安装你想要的所有模拟器，耐心点，既然模拟器是比较大的，这可能需要花上好几分钟来下载。一旦你已经安装了一些模拟器，你可以关闭“Extra Componets” 窗口， 你安装的模拟器将会显示在“Select Runtime”下拉菜单上面:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">要进一步了解模拟器, 请看他的 <a href="/en-US/docs/Tools/Firefox_OS_Simulator">文档页面 </a> 。</p> - -<h3 id="自定义运行环境">自定义运行环境</h3> - -<p>使用自定义运行环境，你能够使用任意的主机名和端口来链接远程设备。</p> - -<p>在表面之下, Firefox OS设备和Android设备使用一个叫 Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a> 的程序来连接到电脑桌面。默认情况下，WebIDE使用附件组件 ADB Help： 这简化了让你安装 ADB 和设置转发端口以便Firefox桌面工具能够与设备交换信息的过程。</p> - -<p>在大多数情况下这是方便的，但有时候你可能想要单独运行ADB，例如： 你或许需要在命令行上直接运行ADB。在这种情形下，你需要通过命令 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> 来指定一个主机和端口来连接到你的设备。<br> - <br> - 如果你想用WebIDE来像上面一样手动连接的话， 你应该<a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">禁止ADB Helper附件组件</a>，并且使用定制的运行环境，输入主机名和端口号，那也是你要传给adb forward命令的参数。</p> - -<p>ADB Helper 目前仍然不支持连接到Android的Firefox， 所以如果你想要连接WebIDE到你的Android Firefox, 你需要设置你自己的转发端口，并使用定制的运行环境。查看<a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">更多有关使用ADB连接到Android Firefox</a> 。</p> - -<h2 id="选择运行环境">选择运行环境</h2> - -<p>一旦你设置好了运行环境， 你就就可以使用 “Select Runtime” 来选择你要使用他们。</p> - -<ul> - <li>如果选择模拟器，WebIDE会启动模拟器。If you select a Simulator, the WebIDE launches the Simulator.</li> - <li>如果你现在一个Firefox OS 设备，在设备上会有一个对话框要求你按 “OK” 来证实你希望链接到WebIDE。</li> -</ul> - -<p>这是在WebIDE工具栏中间的 “ play ” 按钮就可以使用了， 点击它会在当前的运行环境中安装并运行app。</p> - -<h3 id="运行环境动态">运行环境动态</h3> - -<p>当一个运行环境被选中后，下拉菜单下面有三个额外的菜单项：</p> - -<ul> - <li><strong>Runtime Info</strong>: 当前运行环境的信息</li> - <li><strong>Permissions Table</strong>: 当前运行环境的 <a href="/en-US/Apps/Build/App_permissions">app permissions</a> 概览, 每个API和每个<a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a> 是否允许访问(✓)，禁止(✗)， 或者用户是否被提示(!)。</li> - <li><strong>Screenshot</strong>: 从运行环境中截屏</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p> - -<h2 id="创建和打开app">创建和打开app</h2> - -<p>在左边下拉菜单 "Open App" 中有三个菜单项：“New App..." , "Open Packaged App... " "Open Hosted App", 分别对应 创建一个新的app， 打开一个打包的app， 打开一个主机上的app 。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> - -<h3 id="创建一个新的app">创建一个新的app</h3> - -<p>选择 "New App..." 来创建一个新的app， 你会看到如下图的对话框提供两个app模板供你选择： "Privileged Empty App" 和 "Privileged App".</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> - -<p>两个模板都来自Mozilla的 <a href="https://github.com/mozilla/mortar">app模板收集 </a>，为你提供了程序初始的基本结构。"Privileged App" 模板为你演示了app如何使用权限来装载跨域的远程内容。</p> - -<p>一旦你选择了一个模板，你需要命名这个app并选择一个目录来存储这些模板文件，然后你的新app就在<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">项目编辑器</a>中打开了。</p> - -<h3 id="开启一个包装的app">开启一个包装的app</h3> - -<p>选择 "Open Packaged App..." 来打开一个 <a href="/en-US/Marketplace/Options/Packaged_apps">包装好的app</a>。WebIDE会要求你选择包含 app的<a href="/en-US/Apps/Build/Manifest">manifest</a> 目录， 并且WebIDE会在 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a> 中打开app。</p> - -<h3 id="开启一个主机上的app">开启一个主机上的app</h3> - -<p>你可以选择 "Open Hosted App..." 来开启一个 <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a> 。你需要输入一个URL，他链接到app的<a href="/en-US/Apps/Build/Manifest">manifest</a> ，同样app会在 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>中打开。</p> - -<h2 id="编辑app">编辑app</h2> - -<p><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a> 为app提供了一个编辑环境，它的左边是app中所有文件的一个树形视图，你能够使用右键中菜单来够添加和删除文件，右边是文件的编辑窗口。</p> - -<h3 id="app概要页面">app概要页面</h3> - -<p>当第一次开启或创建app时， 编辑器的编辑窗口会显示app的概要信息页面，如下图所示：</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> - -<p>当你需要回到这个页面时， 你可以通过点击左边视图中的根目录。</p> - -<h3 id="Manifest验证">Manifest验证</h3> - -<p>WebIDE会自动地检查manifest一些特定的通用问题，如果发现了问题的话，WebIDE会在app的概要页面上显示app是无效的并描述发现的问题：</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> - -<p>当然，你也能够在项目编辑器中将 <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> 编辑修改正确。</p> - -<h3 id="源代码编辑器The_source_editor">源代码编辑器The source editor</h3> - -<p>WebIDE使用 <a href="http://codemirror.net/">CodeMirror</a> 源代码编辑器</p> - -<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> - -<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> - -<h4 id="代码补全功能">代码补全功能</h4> - -<p>当使用WebIDE编辑 CSS 和 JavaScript的代码时， 编辑器提供自动补全建议， 并且CSS自动补全的功能总是开启的。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">要开启JavaScript的自动补全功能，需要按 Ctrl + 空格键：<img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> - -<h4 id="内联文档">内联文档</h4> - -<p>编辑器也可以为JavaScript代码显示内联文档。将光标停留在相应的符号上面，按Shift＋Space键可以看到包含文档内容的弹窗。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> - -<p>如上图，点击在弹窗中的<code>[docs],</code>将会链接到符号的MDN页面。</p> - -<h4 id="存储文件">存储文件</h4> - -<p>你需要存储你的文件才能使修改生效，对于有变化而没有存储的文件，WebIDE会在文件名前面标记星号，你可以通过菜单上的保存功能或使用 Control + S键来存储文件（在Mac OS X系统上的快捷键是 Command + S）。</p> - -<h3 id="移除项目">移除项目</h3> - -<p>要从WebIDE移除一个app，到<a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app概要页面</a>并点击 "Remove Project" 。</p> - -<h2 id="运行与调试app">运行与调试app</h2> - -<p>当你准备好运行app时， 你需到<a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">从"Select Runtime" 下拉菜单中选择一个运行环境</a> 。如果你没有任何可用的运行环境，可以在 <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">安装运行环境</a> 章节中找到如何添加一个。</p> - -<p>现在，WebIDE 工具栏中的 "play" 按钮已经可以使用了， 点击它可以在选定的运行环境中安装并运行app。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">要调试app的话，点击 "Pause" 按钮， 会显示开发者工具箱<a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>，并连接了你的app：</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">哪些工具可以使用依赖于你选择的运行环境， 但是至少有这些基本工具：<a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> 和 <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>。恰恰像在一个Web页面中一样，你在工具中所作的任何改变在app中都是可以立即可见的，但是能保存下来。 相反地，你在编辑窗口所作的改变可以保存到磁盘中，但是如果你不重启app的话是不会看到改变的。</p> - -<h3 id="调试认证的应用程序_(包括主进程)">调试认证的应用程序 (包括主进程)</h3> - -<p>你能够针对模拟器、b2g桌面、或者一个真实设备运行调试器。</p> - -<p>当选择了一个运行环境的同时，如果你点击app下拉菜单，你不仅可看到你的app，还可以看到运行环境中的所有app。你可以使用模拟器来调试他们，包括<a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">认证的应用程序</a>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> - -<p><br> - 无论如何，要在一个真实的设备上调试认证的应用程序：</p> - -<ul> - <li>设备必须是运行Firefox OS 1.2以上版本的开发构建系统</li> - <li>你必须启用认证应用程序调试</li> -</ul> - -<p>要启用认证应用程序调试需要连接到运行环境，然后在WebIDE主菜单 “Runtime” 中选择“<code>Runtime Info</code>” ， 如果你看到 <code>"DevTools restricted privileges: yes</code>"，意味着认证应用程序不能被调试。启用路径可能随着你针对的调试设备不同而不同：</p> - -<ul> - <li>真实设备 - <ul> - <li>如果设备能够被root，点击<code>"request higher privileges"</code> 启用认证应用程序调试 ，Firefox OS将会重启，你或许需要再次在'Select Runtime' 中选择你的运行设备 。</li> - </ul> - </li> - <li>模拟器 - <ul> - <li>模拟器默认已经启用认证应用程序调试</li> - </ul> - </li> - <li>B2G 桌面 - <ul> - <li>在连接之前手动编辑B2G桌面客户端的配置<a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> 来启用认证应用程序调试</li> - </ul> - </li> -</ul> - -<p>现在，你可以在WebIDE里面看到设备上所有的认证应用程序（B2G 桌面客户端或许需要重启一遍）。</p> - -<h2 id="监视执行性能">监视执行性能</h2> - -<p>如果你对你的应用程序的执行性能有兴趣的话，有几个办法可以测量他们对WebIDE的运行环境的影响:</p> - -<ul> - <li>WebIDE的 <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> 提供了一个非常好设备性能视图，这能够帮助你发现问题，例如：一个应用程序突然过度占用内存（内存泄露）。</li> - <li>工具 <a href="/docs/Tools/Profiler">Profiler</a> 提供了另外一个分析单个应用程序详细足迹的方法， 这个对于你调查已知的性能问题非常有用。</li> -</ul> - -<h2 id="故障排除">故障排除</h2> - -<p>如果你在使用WebIDE时有任何问题， 请查阅 <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">故障排除</a> 页面.</p> - -<p> </p> - -<p> </p> |