diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/tools/remote_debugging | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/tools/remote_debugging')
3 files changed, 169 insertions, 0 deletions
diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html new file mode 100644 index 0000000000..13f27d0a4a --- /dev/null +++ b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html @@ -0,0 +1,38 @@ +--- +title: Debugging Firefox for Android with WebIDE +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +<div>{{ToolsSidebar}}</div><p>This article describes how to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to Firefox for Android from Firefox 36 onwards.</p> +<p>It's been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, though, this was a fairly complex and error-prone process. From Firefox 36 we've made the process much simpler: in particular, you don't need to deal directly with the <a href="http://developer.android.com/tools/help/adb.html">adb</a> tool at all. Now you connect using <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, which takes care of setting up adb behind the scenes.</p> +<div class="note"> + <p>For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device. If you need to use an earlier version, see the older instructions for <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connecting the developer tools to Firefox for Android</a>.</p> +</div> +<p> </p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.</p> +<h2 id="Prerequisites">Prerequisites</h2> +<p>First, you'll need:</p> +<ul> + <li>a desktop or laptop computer with Firefox 36 or higher running on it</li> + <li>an Android device <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android 35 or higher running on it</li> + <li>a USB cable to connect the two devices</li> +</ul> +<h3 id="ADB_Helper">ADB Helper</h3> +<p>Your desktop Firefox also needs to have the ADB Helper add-on, version 0.7.1 or higher. This should be installed for you automatically the first time you open WebIDE. To check the version, type <code>about:addons</code> into the browser's address bar and you should see ADB listed.</p> +<p>If you don't have ADB Helper version 0.7.1 or higher, select "Manage Extra Components" from the "Projects" menu, and you'll see the "Extra Components" window, which will contain an entry for ADB Helper:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Click "uninstall" then "install", and you should now have the latest version.</p> +<h3 id="Setting_up_the_Android_device">Setting up the Android device</h3> +<p>First, enable USB debugging by following <a class="external external-icon" href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">steps 2 and 3 of this link only</a>.</p> +<p>Next, enable remote debugging in Firefox for Android. Open the browser, open its menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>The browser might display a notification reminding you to set up port forwarding, which you can ignore.</p> +<h2 id="Connecting">Connecting</h2> +<p>Connect the Android device to the desktop with the USB cable, open <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, and open the <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">"Runtimes" menu</a>. You will see Firefox for Android listed as a debugging target under "USB DEVICES":</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>Select it. On the Android device, you'll now see a warning message:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>Click OK. Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>Select a tab to attach the developer tools to it:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>Now you should be able to use all the Firefox developer tools that support remote debugging. See the page on <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging</a> for more details.</p> diff --git a/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html b/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..72b03dd937 --- /dev/null +++ b/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,84 @@ +--- +title: 远程调试安卓版Firefox浏览器 +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +<div>{{ToolsSidebar}}</div><p>本文将介绍通过usb连接对<a href="/en-US/docs/Mozilla/Firefox_for_Android">安卓版Firefox</a>进行远程调试的方法</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>本文分成两个部分:第一部分为“前期准备”,属于只需要设置一次的内容,第二部分为“连接”,属于每次连接设备都需要做的工作。</p> +<h2 id="前期准备">前期准备</h2> +<p>首先,你需要:</p> +<ul> + <li>一台安装了Firefox 15及更高版本的台式机或笔记本</li> + <li>一台运行着<a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">安卓版Firefox</a> 15及更高版本的Android设备</li> + <li>一条能够连接两台设备的USB线</li> +</ul> +<h3 id="配置ADB工具">配置ADB工具</h3> +<p>接下来,你需要使用 <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> 命令行工具来使两台设备相互通信。</p> +<h4 class="note" id="配置Android设备">配置Android设备</h4> +<ul> + <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">开启USB调试 (详细步骤位于链接内容的第二章节)</a>。</li> + <li>通过USB连接Android设备与电脑。</li> +</ul> +<h4 class="note" id="配置电脑">配置电脑</h4> +<ul> + <li>安装设备相对应的 <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK(软件开发工具包)</a> 。</li> + <li>通过Android SDK安装 <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>。</li> + <li>将Android Platform Tools 中的adb工具安装在 Android SDK的安装目录中的"platform-tools" 目录,请确保"platform-tools" 目录位于此路径下。</li> +</ul> +<p>检查ADB的工作状态, 打开电脑的cmd命令提示符并输入如下命令:</p> +<pre>adb devices</pre> +<p>你应当看到如下输出提示:</p> +<pre>List of devices attached +51800F220F01564 device +</pre> +<p>(其中的十六进制字符串将会有所不同.)</p> +<p>如果您的情况与上文符, 说明您已成功配置<code>adb</code> 工具并且成功与安卓设备连接。</p> +<h3 id="启用远程调试">启用远程调试</h3> +<p>接下来, 你需要在安卓设备与电脑之间开启远程调试。</p> +<h4 id="安卓版Firefox_24_及更早的版本">安卓版Firefox 24 及更早的版本</h4> +<p>要在设备上启用远程调试,你需要将<code>devtools.debugger.remote-enable</code> 选项设置为 <code>true(开启)</code>.</p> +<p> 进入安卓版Firefox浏览器的<code>about(关于):config(配置)</code> 选项, 在搜索框中输入 "devtools" 并点击搜索键,你将看到所有关于devtools的选项. 找到关于 <code>devtools.debugger.remote-enabled</code> 的选项, 并按下 "Toggle(切换)".</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<h4 class="note" id="安卓版Firefox_25_及更高版本">安卓版Firefox 25 及更高版本</h4> +<p>在安卓版Firefox 25 及更高版本中,拥有一个开启远程调试的菜单项,打开菜单, 选择 "Settings(设置)", 接下来选择"Developer tools(开发工具)" (在某些安卓设备中,你需要选择"More(更多)"后才能看到"Settings(设置)"). 选中 "Remote debugging(远程调试)" 的复选框(即打勾):</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>浏览器将会显示一个通知,提示您配置转发端口,我们将在稍后进行此步骤</p> +<h4 id="电脑方面">电脑方面</h4> +<p>在电脑上,远程调试需要在工具箱的设置中启用。 <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">打开工具箱</a>, 在其 <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar(工具栏)</a>中单机“setting”(设置)选项,并选中有关"Enable remote debugging" (开启远程调试)的 <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">设置 </a>选项():</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<div class="Note"> + 如果您使用Firefox 27及更高版本,你需要重启浏览器来使设置生效。</div> +<p>然后你将会看到web开发(Web Developer) 中多出一个标有"Connect...(连接...)"的新选项:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<h2 id="连接">连接</h2> +<p>现在你可以将远程调试工具与安卓设备连接,如果您还没有做好某些准备工作的话,请首先用usb线将安卓设备与电脑相连</p> +<h4 class="note" id="电脑方面_2">电脑方面</h4> +<p>对于安卓版Firefox 35及更高版本,请进入cmd命令提示符,并输入:</p> +<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre> +<>p对于其他类型的安卓版Firefox浏览器, 代码中的 org.mozilla.firefox 部分需要参照下文进行更改:<p></p> + + <li>org.mozilla.firefox_beta (用于beat测试版)</li> + <li>org.mozilla.fennec_aurora (用于Aurora极光版)</li> + <li>org.mozilla.fennec (用于nightly每夜版)</li> + <li>对于安卓版Firefox34及更早版本,请输入如下代码</li> + <pre>adb forward tcp:6000 tcp:6000</pre> +<p>(如果你已经修改了Android设备使用的调试端口值,则需要相应地调整输入代码中的端口值)</p> +<p>对于Firefox OS, 请输入如下命令符:</p> +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> +<p>你每次使用usb线将物理桌面与安卓设备连接时都需要输入此命令。</p> +<p>然后进入Firefox中的 Web Developer (Web开发菜单),并且选择"Connect...(连接...)"。你将会看到如下页面:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">除非您已经修改了端口值,否则请选择6000,然后按“connecting(连接)”按钮。</p> +<h4 class="note" id="安卓设备方面">安卓设备方面</h4> +<p>接下来您会在安卓设备上看到如下的对话框,要求您确认连接</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">请按下“OK”。桌面会等待几秒钟来使您确认此对话框:如果出现超时(time out),只需在桌面的对话框中再次按下“连接”按钮后重复上述操作即可。</p> +<h4 class="note" id="电脑方面_3">电脑方面</h4> +<p>接下来,电脑将会显示如下界面:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">这是在询问调试的对象是正在运行的网页内容还是是浏览器本身的代码</p> +<ul> + <li>你将在每个打开的选项卡下看到“Available remote tabs(可用的远程选项卡)”一项,点击它将会给相应选项卡中的网页内容附加调试工具,如果你想调试某个网页内容,请选择对应的内容选项卡。</li> + <li>你将看到“Available remote processes(可用远程进程)”选项:这是浏览器本身的进程。如果您需要调试的浏览器的代码,请选择此选项。</li> +</ul> +<p>让我们选择附加到mozilla.org网站。该工具箱将打开一独立窗口,连接到安卓版Firefox浏览器正与Mozilla.org连接的选项卡(如下图):</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>这个工具箱与其所含的工具,在与安卓设备连接时,其工作原理与调试方法与本地连接时的相同。<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/zh-cn/tools/remote_debugging/index.html b/files/zh-cn/tools/remote_debugging/index.html new file mode 100644 index 0000000000..9ce762b8f4 --- /dev/null +++ b/files/zh-cn/tools/remote_debugging/index.html @@ -0,0 +1,47 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +tags: + - Tools + - 环境 + - 远程调试 +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>您可以使用<a href="/zh-CN/docs/Tools">Firefox开发者工具</a>在桌面上来远程调试在同一设备上的不同浏览器或一个完全不同的设备上的 Web 站点或者是 Web app。其他浏览器可能是在同一设备上的工具或在不同的设备上,比如使用 USB 连接手机。</p> + +<p>连接开发人员的工具的详细说明会在运行时特定说明</p> + +<h2 id="Gecko-based_环境">Gecko-based 环境</h2> + +<p>首先,你可以用开发者工具连接 Gecko-based 环境,诸如 Firefox Desktop, Firefox for Android, Firefox OS, and Thunderbird。</p> + +<ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox Desktop</a></li> + <li>Firefox for Android + <ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">over USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">over WiFi</a></li> + </ul> + </li> + <li>Firefox OS + <ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">over USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">over WiFi</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> + +<h2 id="其他环境">其他环境</h2> + +<p>试运行的 <a href="/en-US/docs/Tools/Valence">Valence</a> 扩展附件能让你调试在非 Gecko 环境下的 Web 站点,诸如 Google Chrome Desktop, Chrome on Android, and Safari on iOS 。</p> + +<p>Valence 在 <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> 中默认启用。</p> + +<ul> + <li><a href="/en-US/docs/Tools/Valence">Chrome for Android</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Chrome_Desktop">Chrome Desktop</a></li> + <li><a href="/en-US/docs/Tools/Valence">Safari on iOS</a></li> +</ul> |
