可能是最全的移动端页面调试指南

Android 端

Android端一般来说浏览器分为：

系统浏览器

如果需要再系统浏览器上调试，可以去对应手机的官网上看有没有开发版的rom，例如小米手机可以刷开发版的rom，然后进行调试

webkit内核浏览器、例如chrome

首先在chrome中输入 chrome://inspect/#devices
然后USB连上手机，打开USB的调试模式就可以在上面的页面中看到自己的设备：

这里写图片描述

然后在chrome中打开https://upchat.95516.net
这里写图片描述
点击inspect

然后就可以欢乐了调试了

第三方的webkit内核浏览器，例如U聊

如果是APP内嵌的webkit内核，需要Android同时增加webView.setWebContentsDebuggingEnabled(true);，然后其余步骤和上面的一样，这里可能碰到HTTP1.1 NOT FOUND的问题，这种情况换个手机或者把手机的系统升级一下

以U聊为例子

首先让客户端同时开启debug模式，然后登陆后打开一个网页，以https://upchat.95516.net为例子
这里写图片描述
可以看到U聊的webview中有刚才打开的网页，点击inspect就可以了

微信、QQ、QQ浏览器为代表的X5内核的浏览器

x5内核的浏览器，我们可以以微信为例子，在微信中输入 http://debugx5.qq.com/,然后点击信息，选中打开TBS内核Inspector调试功能和打开TBS内核X5jscore Inspector调试功能。
然后在微信中输入https://upchat.95516.net，在chrome就可以看到：
这里写图片描述
点击inspect就可以看到：

有没有一种天下我有的感觉

UC 浏览器

首先在https://plus.ucweb.com/download/下载UC浏览器的开发版本
然后输入网址，在chrome的inspect中查看，就可以进行调试了
这里写图片描述

其他浏览器
目前没找到方法，不过一般来说这上面的浏览器如果没问题，也就没啥大问题，不行就祭出alert大法把

IOS 端

safari 中的网页

打开手机，点击设置-Safari浏览器-高级

打开JavaScript和web检查器。

打开手机上的Safari，输入一个网址http://www.baidu.com

在Mac上打开Safari，点击开发-iPhone lh-http://www.baidu.com，就可以看到以下页面

然后就可以进行调试了
第三方内嵌webkit内核的应用，例如U聊

首先还是让IOS同事去打一个Debug的版本，然后进入U聊，打开一个网址，其他的步骤和上面一样

那么问题来了，如果说要调试微信小程序、或者其他浏览器怎么办？

试想一下，如果手机端页面可以看console，是不是感觉很酷？

推荐一个库，vConsole，这个库是微信团队开源的，但是这个是有前提的，需要向我们的网页中增加一些代码。https://github.com/Tencent/vConsole

HTML结构：

<<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="./vconsole.min.js"></script>
  <script>
    // 初始化
    var vConsole = new VConsole();
    console.log('Hello world');
  </script>
</head>
<body>
  啦啦啦
</body>
</html>

在手机上打开：

这里写图片描述

这里写图片描述
这里不仅仅可以看console的日志，还可以看系统信息、网络情况、存储等等。