FireFox调试手机浏览器

https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android

IN THIS ARTICLE

  1. Prerequisites
    1. ADB setup
      1. On the Android device

      2. On the desktop

    2. Enable remote debugging
      1. Firefox for Android 24 and earlier

      2. Firefox for Android 25 and later

      3. On the desktop

  2. Connecting
      1. On the desktop

      2. On the Android device

      3. On the desktop

This guide explains how to use remote
debugging
to inspect or debug code running inFirefox
for Android
over USB.

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.

Prerequisites

First, you‘ll need:

  • a desktop or laptop computer with Firefox running on it

  • an Android device capable
    of running Firefox for Android
     with Firefox for Android running on
    it

  • a USB cable to connect the two devices

ADB setup

Next, you‘ll need to get the desktop and the Android device talking to each
other using the adb command-line
tool.

On the Android device



On the desktop


  • Install the correct version of the Android
    SDK
     for your device.

  • Using the Android SDK, install the Android
    Platform Tools
    .

  • Android Platform Tools installs adb in the "platform-tools" directory
    under the directory in which you installed the Android SDK. Make sure the
    "platform-tools" directory is in your path.

To check it worked, open up a command shell on the desktop and type:

adb devices

You should see some output like:

List of devices attached
51800F220F01564 device

(The long hex string will be different.)

If you do, then adb has found your device and you‘ve
successfully set up ADB.

Enable remote debugging

Next, you need to enable remote debugging on both the Android device and the
desktop.

Firefox for Android 24 and
earlier

To enable remote debugging on the device, you need to set
thedevtools.debugger.remote-enabled preference
to true.

Go to about:config in Firefox for Android, type
"devtools" into the search box and press the Search key. You‘ll see all the
devtools preferences. Find
thedevtools.debugger.remote-enabled preference, and press
"Toggle".

Firefox for Android 25
and later

On Firefox for Android 25 and later, there‘s a menu item to enable remote
debugging. Open the 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:

The browser will display a notification reminding you to set up port
forwarding, which we‘ll do later on.

On the desktop

On the desktop, remote debugging is enabled by a setting in the
Toolbox. Open
the Toolbox
, click the "Settings" button in the toolbar,
and check "Enable remote debugging" in the Settingstab:

If you‘re using a version of Firefox older than 27, you‘ll
need to restart the browser for the setting to take effect.

You‘ll then see a new option in the Web Developer menu labeled
"Connect...":

Connecting

Now you can connect the remote debugging tools to the device. First, attach
the device to the desktop with a USB cable, if you haven‘t already.

On the desktop

Go to a command prompt, and type:

adb forward tcp:6000 tcp:6000

(If you‘ve changed the value the Android device uses for a debugging port,
you‘ll need to adjust this accordingly.)

For Firefox OS, type:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

You‘ll need to reissue this command each time you physically attach desktop
and device with the USB cable.

Then go to the Web Developer menu on Firefox, and select "Connect...". You‘ll
see a page that looks like this:

Unless
you‘ve changed the port numbers, choose 6000 and press the "Connect" button.

On the Android device

Next you‘ll see a dialog on the Android device asking you to confirm the
connection:

Press
"OK". The desktop waits for a few seconds to give you time to acknowledge this
dialog: if it times out, just press "Connect" in the desktop dialog again.

On the desktop

Next, the desktop shows you a dialog that looks something like this:

This
is asking whether you want to debug web content running in a browser tab, or to
debug the browser code itself.

  • You‘ll see one entry under "Available remote tabs" for each open tab, and
    clicking it will attach the debugging tools to the web content hosted by that
    tab. If you want to debug your web content, you‘ll choose the relevant content
    tab.

  • You‘ll see one entry under "Available remote processes": this is the
    browser process itself. You‘ll choose this option if you want to debug the
    browser‘s own code.

Let‘s choose to attach to the mozilla.org website. The Toolbox will open in
its own window, attached to the Firefox for Android tab that‘s currently hosting
mozilla.org:

The Toolbox, and the tools it hosts, work in just the same way as they do
when attached to local content.

Attachments





































































File Size Date Attached by
remote-debugger-about-config-toggle

95831 bytes 2013-08-01 15:36:19 wbamberg
remote-debugging-connect-menuitem

81023 bytes 2013-08-01 17:15:16 wbamberg
remote-debugging-deskopt-connect

85186 bytes 2013-08-01 17:20:07 wbamberg
remote-debugging-device-connect

167472 bytes 2013-08-01 17:26:11 wbamberg
remote-debugging-deskopt-select-target

90358 bytes 2013-08-01 19:41:30 wbamberg
remote-debugging-console

124892 bytes 2013-08-01 20:35:29 wbamberg
remote-debugging-debugger

266637 bytes 2013-08-01 20:35:45 wbamberg
remote-debugger-toolbox-settings

123586 bytes 2013-08-01 23:09:18 wbamberg
remote-debugging-device-enable

45182 bytes 2013-08-02 09:37:26 wbamberg
remote-debugging-overview

394293 bytes 2013-08-02 12:25:02 wbamberg

FireFox调试手机浏览器,布布扣,bubuko.com

时间: 2024-11-03 21:34:15

FireFox调试手机浏览器的相关文章

电脑连接并调试手机浏览器的网页

直接在浏览器上 用浏览器的手机模式 模拟手机环境有时候不是太准确,所以想办法 实现在手机上能连接,并调试手机正在访问的网页,文本给出了解决方法(没有苹果手机,所以只做了安卓的) 下图就是电脑上连接好的效果: 需要做一下步骤 一, 手机端的准备: 1.usb数据线,第一次连接电脑跟手机 可能还需要装驱动: 2.打开开发者模式,打开选择USB配置,设置成USB连接(一定注意),具体手机连接可以不太一样 ,但是都需要设置成usb连接方式 3,下载手机版谷歌浏览器,调试的时候 用的是谷歌浏览器 二,电脑

使用Fiddler调试手机页面请求

从事前端开发的同学一定对Fiddler不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行google一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中Network面板或Firefox的HttpWatch插件的功能. 我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看.(当然,大部分情况下,你可以直接在电脑上用Ch

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

手机浏览器调试建议

使用电脑远程调试安卓手机上浏览器的JS (2014-01-14 22:44:04) 转载▼     有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法. 1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件 1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上): 2)安装了安卓的SDK: 3)手机上也安装谷歌浏览器(Chrome for

UC浏览器开发者版调试手机页面

1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置PC上来调试小屏幕.低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI). 1.1主要功能 Android平台UC浏览器开发者版,主要支持以下功能: DOM查看和修改 JavaScript调试.CSS调试 网络状态查看 资源文件查看 Console控制台

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

PC上测试移动端网站和模拟手机浏览器

一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面.右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加以下语句:“–user-agent=”Android””,如下图: 注意user前面是两个“-”,并且“chrome.exe”与“–user”

在PC上测试移动端网站和模拟手机浏览器的5大方法

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

利用firefox调试安卓手机端web

分2部分: 手机: 1.安装最新版firefox 2.打开浏览器,输入about:config 3.设置 devtools.debugger.remote-enabled 值为true devtools.debugger.force-local 值为false (这里比pc上多设置一个) 4.重启firefox pc: 1.pc安装15以上版本firefox 2.打开浏览器,输入 about:config(可能会有个警告,继续就行了) 3.设置  devtools.debugger.remote