可能是最全的移动端页面调试指南
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的日志,还可以看系统信息、网络情况、存储等等。