手机浏览器下面如何对网页进行 debug

在 PC 上, 有各种网页 debug 工具, 如 firebug, 浏览器开发者工具等, 那么在手机上该如何去做呢?

Answers

使用 google chrome 的话, 参照这里: Google Chrome for Android Remote Debugging, 具体配置如下:

  1. Chrome for Mobile - Settings > Developer Tools > [x] Enable USB Web debugging
  2. Device - Settings > Developer options > [x] USB debugging
  3. Connect Device to Computer
  4. Enable port forwarding on Computer

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  5. Go to http://localhost:9222 in Chrome for Computer

如果使用的 Firefox, 参照这里: Remotely debugging Firefox for Android

ADB setup:

  • On the Android device
    1. Enable USB debugging on your device.

      • On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.
      • On Android 4.0 and newer, it's in Settings > Developer options.

        Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

    2. Attach the device to the desktop via USB.
  • On the desktop
    1. Install the correct version of the Android SDK for your device.
    2. Using the Android SDK, install the Android Platform Tools.
    3. 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.

Enable remote debugging:

  • Firefox for Android 24 and earlier

    To enable remote debugging on the device, you need to set the devtools.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 the devtools.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

  • 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 Settings tab

    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

  • For Firefox for Android 35 and later, go to a command prompt, and type:
    adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
  • For Firefox for Android 34 and earlier, type:
    adb forward tcp:6000 tcp:6000

Then go to the Web Developer menu on Firefox, and select "Connect...".

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.