diff options
Diffstat (limited to 'files/zh-cn/tools')
| -rw-r--r-- | files/zh-cn/tools/scratchpad/index.html | 118 | ||||
| -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 |
5 files changed, 0 insertions, 626 deletions
diff --git a/files/zh-cn/tools/scratchpad/index.html b/files/zh-cn/tools/scratchpad/index.html deleted file mode 100644 index ecfae26051..0000000000 --- a/files/zh-cn/tools/scratchpad/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Scratchpad -slug: Tools/Scratchpad -tags: - - Scratchpad - - 工具 - - 网页开发 - - 网页开发：工具 -translation_of: Archive/Tools/Scratchpad ---- -<div>{{ToolsSidebar}}</div> - -<p>Scratchpad 使用JavaScript去提供一种实验环境。你能编写，执行代码，并且查看代码和Web页面交互的结果</p> - -<p>和被设计为一次只能执行单行命<a class="toggler" href="https://developer.mozilla.org/zh-CN/docs/Tools/Scratchpad#">更多工具</a>令的<a href="/zh-CN/Tools/Web_Console" title="en/Using the Web Console"> Web Console</a> 不同的是， Scratchpad 让你可以编辑大段的Javascript代码, 然后就取决于你希望如何输出，有多种方式执行这些代码。</p> - -<p>{{EmbedYouTube("Pt7DZACyClM")}}</p> - -<h2 id="使用"><strong>使用</strong></h2> - -<h3 id="在单独窗口中打开Scratchpad"><strong>在单独窗口中打开Scratchpad</strong></h3> - -<p>有几种不同的方式可以在独立窗口中打开Scratchpad</p> - -<ul> - <li>按下<kbd>Shift</kbd> + <kbd>F4</kbd>, 开启Scratchpad窗口，或是从Web Developer 菜单 (在OS X 和Linux 中是Tools菜单的子菜单) 中选择Scratchpad，开启的Scratchpad包含一个提供如何使用Scratchpad的帮助信息的注释。从这里你能直接开始书写代码。</li> - <li>点击扳手图标 (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), 你可以在主工具栏或者汉堡菜单 (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">)找到, 然后选择"Scratchpad".</li> -</ul> - -<p>这都能在单独窗口中打开Scratchpad。</p> - -<h3 id="从工具箱中打开Scratchpad">从工具箱中打开Scratchpad</h3> - -<div class="geckoVersionNote">New in Firefox 47.</div> - -<p>从Firefox 47起，你能从<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>中打开Scratchpad。首先你需要在<a href="https://developer.mozilla.org/zh-CN/docs/Tools/Tools_Toolbox#Settings_2">设置</a>的"Default Firefox Developer Tools"部分里选中"Scratchpad"。</p> - -<p>现在你应该可以在Toolbox中使用Scratchpad了，还有其他工具，如页面检查器和Web控制台。这在<a href="/zh-CN/docs/Tools/Web_Console/Split_console">拆分控制台模式</a>下特别有用：您可以使用Scratchpad作为持久性，多行编辑器，或者控制台来与页面进行交互。</p> - -<h3 id="编辑"><strong>编辑</strong></h3> - -<p>Scratchpad 窗口看起来如下图 (在OS X中菜单条在屏幕顶部)</p> - -<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p> - -<p>如果想了解编辑器本身或者有用的键盘快捷键，请查看 <a href="/zh-CN/Tools/Using_the_Source_Editor" title="Using the Source Editor">Using the Source Editor</a></p> - -<p>File菜单提供 Javascript 代码的保存和加载，以便以后你能反复使用这些代码。</p> - -<h4 id="代码补完">代码补完</h4> - -<p>Scratchpad 使用<a href="http://ternjs.net/">tern code analysis engine</a> 提供自动补完建议并使用弹出窗口显示当前符号的关于信息。使用 Control + Space 便可以呼出自动补完。如果是为了显示弹出信息， 在Firefox 32中使用<kbd>Shift</kbd> + <kbd>Space</kbd>。</p> - -<p>例如，键入<kbd>d</kbd>, 然后按下<kbd>Control</kbd> + <kbd>Space</kbd>。 你可以看到自动补完的弹框，类似如下</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">每个显示在建议之前的图标表明了类型，当前高亮显示的会弹出更多的信息，使用<kbd>↑</kbd> 或 <kbd>↓</kbd>箭头切换选项并使用<kbd>Enter</kbd> 或 <kbd>Tab</kbd>来选择高亮的选项。</p> - -<h4 id="內连文档">內连文档</h4> - -<p>当鼠标位于某个标识符上时，通过按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> 进行显示内连文档的弹框. 举个例子, 当你输入 <code>document</code>.<code>addEventListener</code>, 人后按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, 你将会看到该方法的语法摘要以及一段简介:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">这个"[docs]"链接指向该标志的MDN文档</p> - -<h3 id="Executing">Executing</h3> - -<p class="note">当你写好了你的代码后，选中你想要的代码来运行。如果你没有选中任何代码，整个窗口的代码都会被执行。选择你想要的运行方式，可以通过顶部的按钮、运行菜单，或者上下文菜单。代码会在当前选中的Tab范围内被执行。你在函数外声明的变量会被加到这个标签栏的全局对象中</p> - -<p>这里有4个可用的选项：</p> - -<h4 id="Run">Run</h4> - -<p>当你选择Run选项，选中的代码会被执行。这是用来执行那些只是操纵页面内容而不需要返回结果的函数或者其他代码的。</p> - -<h4 id="Inspect">Inspect</h4> - -<p>Inspect选项会像Run选项一样执行代码，但是当代码返回时会打开一个对象检查器让你验证返回值</p> - -<p>例如，当你敲入这段代码</p> - -<pre>window -</pre> - -<p>然后选择Inspect，对象检查器就会显示如下：</p> - -<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p> - -<h4 id="Display">Display</h4> - -<p>Display选项执行选中的代码，然后直接将结果作为一个注解插入到你的Sratchpad编辑窗口，所以你可以把它当作一个<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a></p> - -<h4 id="Reload_And_Run">Reload And Run</h4> - -<p>Reload And Run选项只在执行菜单可用，它首先重新加载页面，然后当页面加载完毕执行代码。这在比较古老的运行环境中比较有用。</p> - -<h2 id="在浏览器上下文中运行Scratchpad">在浏览器上下文中运行Scratchpad</h2> - -<p>你可以在整个浏览器的上下文环境运行Sratchpad，而不只是在指定的网页中。这在你使用Firefox工作或开发插件时很有用。要使用这个请在<a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a>中确认允许chrome跟插件调试。设置完后环境菜单会有个浏览器选项。选中它的时候，你的作用域就是整个浏览器而不只是页面范围了，从下面的测试中可以看出一些全局变量。</p> - -<pre class="brush: js">window -/* -[object ChromeWindow] -*/ - -gBrowser -/* -[object XULElement] -*/</pre> - -<p>Scratchpad的执行环境在该状态下将被设置为browser：当代码段的第一行为<br> - <code>// -sp-context: browser</code></p> - -<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2> - -<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p> - -<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3> - -<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> 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> |