移动端网页调试

移动端网页调试

参考：

1. 9102了，你还不会移动端真机调试
2. Mac用Safari调试手机和模拟器web页面

大晚上等方案--，总结下最近移动端页面调试工具的使用收获；

一、三种方法调试移动端网页

1. windows调试安卓（强大）
2. mac调试safari（强大）
3. eruda页面小齿轮控制台调试 （轻便）

二、windows调试安卓

第一次使用spy-debugger（也能在ios上使用）

1. 命令行安装spy-debugger，如果不行，管理员模式；

    npm install –g spy-debugger

2. 通过上边网址的二维码或者在命令行执行spy-debugger initCA生成证书，证书在用户根目录node-mitmproxy内node-mitmproxy.ca.crt； 比如：C:\Users\hostname\node-mitmproxy

3. 手机获得这个证书，点击安装；

4. 设置HTTP代理：手机和pc连同一个wifi，然后手机在wifi设置内，开启手动代理，设置pc此时ip地址和端口，默认是9888，指定端口，启动是比如spy-debugger –p 8888；

5. 第一次使用需要安装证书，如果没有启用，需要pc端命令行执行 ：spy-debugger start

界面功能介绍

1. 手机同一个网络，进入需要调试的网页，在Pc网页上点击target,即选中调试的网页，之后可以控制台、元素、network等调试；
2. 可以单独抓包，包括app的包；
3. target似乎默认只能调试网页，包括webview；

三、MAC调试safari

1. iphone,设置 -> safari -> 高级 -> 开启web检查器；
2. 在mac上打开safari，偏好设置 -> 高级 -> 勾选显示开发菜单；
3. iphone与mac连接，打开safari需要调试的网页，在mac的safari 的开发->找到手机名称，选中要调试的网站；
4. 还可以，一般pc的简单的调试都可以；
5. 数据线连上去，没反应，多插拔几次，也可以重启iphone；

四、eruda

1. 最简单的，引入一个js，最轻，但是调试功能不强，可以看到部分信息；
2. git地址：eruda
3. 用法：

    <script type="text/javascript" src="js/eruda.js"></script>
	<script type="text/javascript">
            eruda.init()
	</script>

4. 优点很多，很轻便，随到随用，也可以给测试看日志，是我移动端用的最多的调试工具；
5. 缺陷，一些信息不好看到，不好调试，但是控制台的console和执行功能还是很强的，虽然worker线程的打印不会输出；