blob: 72b03dd937f6dc8981a70686bb2815ce9c06e14e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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>
|