diff options
Diffstat (limited to 'files/zh-cn/tools/webide')
| -rw-r--r-- | files/zh-cn/tools/webide/index.html | 271 | ||||
| -rw-r--r-- | files/zh-cn/tools/webide/monitor/index.html | 158 | ||||
| -rw-r--r-- | files/zh-cn/tools/webide/opening_webide/index.html | 26 | ||||
| -rw-r--r-- | files/zh-cn/tools/webide/问题排除/index.html | 53 |
4 files changed, 0 insertions, 508 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> diff --git a/files/zh-cn/tools/webide/monitor/index.html b/files/zh-cn/tools/webide/monitor/index.html deleted file mode 100644 index 5a650a572d..0000000000 --- a/files/zh-cn/tools/webide/monitor/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Monitor -slug: Tools/WebIDE/Monitor -translation_of: Archive/WebIDE/Monitor ---- -<div>{{ToolsSidebar}}</div><div class="summary"> -<p>The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of <a href="/en-US/Firefox_OS">Firefox OS</a> apps and devices.</p> -</div> - -<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p> - -<p>The Monitor is able to display live, interactive graphs to visualize time series.</p> - -<h2 id="Available_graphs">Available graphs</h2> - -<p>The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.</p> - -<h3 id="Unique_Set_Size">Unique Set Size</h3> - -<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p> - -<p>This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.</p> - -<h2 id="Displaying_your_own_data">Displaying your own data</h2> - -<p>It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.</p> - -<h3 id="From_a_Firefox_OS_device">From a Firefox OS device</h3> - -<p>You can send data from a connected device by sending observer notifications.</p> - -<p>Note: If you would like to do this in a <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">certified app</a>, please follow <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">these instructions</a>.</p> - -<h4 id="JavaScript">JavaScript</h4> - -<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> - -<p>You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:</p> - -<p><code>const Services = require('Services');<br> - <br> - var start = Date.now();<br> - // code to benchmark<br> - var stop = Date.now();<br> - <br> - var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br> - Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p> - -<h4 id="C">C++</h4> - -<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p> - -<p>You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:</p> - -<p><code>#include <time.h><br> - #include "nsPrintfCString.h"<br> - #include "nsIObserverService.h"<br> - <br> - clock_t start = clock();<br> - // code to benchmark<br> - clock_t stop = clock();<br> - double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br> - <br> - nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br> - if (observerService) {<br> - nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br> - nsAutoString data = NS_ConvertUTF8toUTF16(str);<br> - observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br> - }</code></p> - -<h3 id="From_your_computer">From your computer</h3> - -<p>You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.</p> - -<p>By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the <code>devtools.webide.monitorWebSocketURL</code> preference.</p> - -<p>You can even make it accept data from your local network, or from anywhere on the Internet.</p> - -<h4 id="Node.js">Node.js</h4> - -<p><code>TODO</code></p> - -<h4 id="Python">Python</h4> - -<p><code>TODO</code></p> - -<h3 id="Supported_formats">Supported formats</h3> - -<p>The Monitor accepts data in the form of JSON objects that generally look like this:</p> - -<p><code>{</code><br> - <code> "graph": "myGraph",<br> - "curve": "myCurve",<br> - "value": 42,<br> - "time": 1234567890<br> - }</code></p> - -<p>That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.</p> - -<h4 id="Arbitrary_names">Arbitrary names</h4> - -<p>Unrecognized entries will be considered as curve name and value.</p> - -<p>The smallest data packet you can send is something like:</p> - -<p><code>{ "myCurve": 42 }</code></p> - -<p>This will add a data point to "myCurve" in a graph with no name. The missing <code>time</code> will default to when the Monitor received the packet.</p> - -<p>For better precision, it's probably better to always specify a <code>timestamp</code> for your data:</p> - -<p><code>{<br> - "current": 60,</code><br> - <code> "voltage": 500,<br> - <code>"time": 1234567890</code><br> - }</code></p> - -<h4 id="Multiple_values">Multiple values</h4> - -<p>In a single update, you can send data for multiple curves:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "myCurve1": 50,<br> - "myCurve2": 300,<br> - "myCurve3": 9000,<br> - "time": 1234567890<br> - }</code></p> - -<p>Or several data points for a single curve:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "curve": "myCurve",<br> - "values": [<br> - { "time": 1234567890, "value": 42 },<br> - { "time": 1234567981, "value": 51 }<br> - ]<br> - }</code></p> - -<h4 id="Multiple_updates">Multiple updates</h4> - -<p>And you can also send multiple data updates as an Array:</p> - -<p><code>[<br> - { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br> - { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br> - ]</code></p> - -<h4 id="Punctual_events">Punctual events</h4> - -<p>To mark special events in a graph with a vertical bar, add an <code>event</code> key to your update:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "event": "myEvent",<br> - "time": 1234567980<br> - }</code></p> diff --git a/files/zh-cn/tools/webide/opening_webide/index.html b/files/zh-cn/tools/webide/opening_webide/index.html deleted file mode 100644 index 5ca53cf1ac..0000000000 --- a/files/zh-cn/tools/webide/opening_webide/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Opening WebIDE -slug: Tools/WebIDE/Opening_WebIDE -translation_of: Archive/WebIDE/Opening_WebIDE ---- -<div>{{ToolsSidebar}}</div><p>有三种方式打开WebIDE:</p> - -<ul> - <li>路由到浏览器Tools>Web Developer菜单,点击<em>WebIDE</em> 选项进入.</li> - <li>使用键盘快捷键 <em>Shift + F8</em>.</li> - <li>点击Firefox工具栏专用的图标.如果你使用 <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>版本的Firefox的话他会默认存在, 并且在Firefox 版本大于 <a href="/en-US/Firefox/Releases/36">version 36</a> 上,只要你曾经打开过WebIDE的话,他会出现在工具栏:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> - -<p>下面是WebIDE的样子:<img alt="" src="https://mdn.mozillademos.org/files/12147/webide.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">在左边的侧边栏你可以打开已经存在的项目,或者创建新的项目.而在右边的侧边栏你可以选择一个运行环境或者<a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">新安装一个运行环境</a>.</p> - -<p>中间的按钮分别是:运行,停止和调试app:他们只有在你打开一个项目并且选择了运行环境是才可以使用.</p> - -<p>在WebIDE中你可以使用通用的快捷键(在OS X中用Command代替Control)改变字体的大小:</p> - -<ul> - <li><code>Ctrl +</code> 增大字体的大小.</li> - <li><code>Ctrl -</code> 减小字体的大小.</li> - <li><code>Ctrl 0</code> 设置字体大小为默认值.</li> -</ul> diff --git a/files/zh-cn/tools/webide/问题排除/index.html b/files/zh-cn/tools/webide/问题排除/index.html deleted file mode 100644 index 4bb1d714d8..0000000000 --- a/files/zh-cn/tools/webide/问题排除/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: WebIDE 问题排除 -slug: Tools/WebIDE/问题排除 -translation_of: Archive/WebIDE/Troubleshooting ---- -<div>{{ToolsSidebar}}</div><h2 id="使用USB连接Firefox_for_Android">使用USB连接Firefox for Android</h2> - -<p>如果你试着连接一个Android设备上的Firefox实例，但并没有成功。你可以尝试下面的解决方法：</p> - -<ul> - <li>检查你设备上Firefox的版本，确认你的设备运行的是Firefox 36或更高，因为低于此版本的话，WebIDE将不能自动侦测到设备。当然，如果你当前运行的版本确实低于要求的最低版本，你可以选择更新你的浏览器（推荐），你也可以选择手动开启端口转发并且连接到这个设备开启的端口（参考文档：<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remote debugging on Firefox for Android</a>）</li> - <li>确认你是否在设备的Firefox中开启了远程调试功能，<code>Firefox > Menu > Settings > Advanced > Remote debugging via USB</code></li> - <li>确认设备是否开启USB调试（因为不同的机型设置方式不同，此处不予详细步骤）</li> - <li>如果你在WebIDE内仍然没有看到你的设备，尝试以下操作 - <ul> - <li>拔下USB数据线并关闭<code>Remote debugging via USB</code>选项</li> - <li>重新插上USB数据线，重新打开Firefox并开启<code>Remote debugging via USB</code>选项</li> - <li>再次连接WebIDE</li> - </ul> - </li> - <li>确认你连接你的Firefox OS设备到你的电脑上的同时没有其他Android电话设备也连接到电脑上面。</li> - <li>使用你电脑上不同的USB接口。</li> - <li>更换USB线， 电话附带的USB线通常质量比较差，可能导致连接失败。</li> - <li>尝试使用更短的USB线。</li> - <li>在Settings中重复禁用和启用 Remote Debugging 功能，并且尝试多次插拔USB线。</li> - <li>如果你禁用 <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"> ADB Addon Helper</a>, 看看你还是否能成功地运行命令 adb forward ？</li> - <li>如果你使用的是Linux系统，确认你已经增加了udev规则文件。在<a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第3步有记录说明。Geeksphone分配使用的idVendor是05c6， 并且在<a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">这一页</a>中有列出其他厂商的idVendor值。</li> - <li>如果你电脑使用的是Windows系统: - <ul> - <li>你需要根据<a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第三步来安装驱动程序，可以在<a class="external external-icon" 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">"如何在Windows 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> - </li> - <li>如果你是EasyTether的用户，尝试卸载或者禁用EasyTether： <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> -</ul> - -<h2 id="调试认证的应用">调试认证的应用</h2> - -<p>如果你想要调试认证的app，包括内建的app，请参考：<a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">调试认证的app</a>。</p> - -<h2 id="启用日志功能">启用日志功能</h2> - -<p>你也可以启用详细日志功能来收集诊断信息：</p> - -<ol start="1" style="list-style-type: decimal;"> - <li>访问 <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, 增加一个新的配置： <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, 将其值设置为a<code>ll,</code></span></span><span class="message"><span class="content"><code>并设置</code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code>为True。</code></span></span></li> - <li>在<a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">插件管理器</a>中禁用 ADB Helper add-on，然后在启用。</li> - <li>打开<a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">浏览器控制台</a> 现在你可以看到带adb前缀的控制台信息，如果这个信息对你来说没有任何用处，<a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">请寻求帮助</a> 。</li> -</ol> - -<h2 id="获取帮助">获取帮助</h2> - -<p>你也可以去 <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">IRC的devtools房间</a> ， 我们会尝试提供帮助。</p> |