移动端调试方法

Posted 2020-11-30 z937741304

随着手机等移动设备的普及，适配移动端的页面变得越来越有必要。这也意味着移动端的调试变得越来越频繁，那么就会发生以下悲惨的故事。

在正式开始之前，我们要先学会怎么让你的手机连上你的电脑，就是你在电脑浏览器里能访问什么页面，那么在你的手机上也可以访问到。那我们就要使用到代理软件fiddler。

Fiddler是一个http调试代理，它能够记录所有你电脑和互联网之间的http通讯，Fiddler可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思，它还可以抓取进程发送的HTTP报文）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。

1、配置fiddler 允许远程连接
打开Fiddler, Tools-> Fiddler Options 。 （配置完后记得要重启Fiddler）.
选中"Decrpt HTTPS traffic", Fiddler就可以截获HTTPS请求
选中"Allow remote computers to connect". 是允许别的机器把HTTP/HTTPS请求发送到Fiddler上来

 

fiddler基本配置

 

2.png

然后获取手机的ip 10.240.xxx.xx,手机连接电脑的wifi或者连接相同路由器的wifi，长按wifi名称，弹出（iphone手机设置会更简单，其他手机也类似）

 

3.png

 

4.png

选择修改网络 --> 显示高级选项--> 代理改为手动 -->输入电脑IP 端口、密保-->保存

这样就可以连接上电脑的代理了，手机就可以访问电脑端能访问的任何页面了。而且在fiddler中，还能捕获到手机发出的请求。然后就可以结合weinre来测试移动端的页面了，不管pc端是测试环境还是线上环境，手机端都可以测试了，而且还可以测试webView页面。

那一年，你还是个孩子，pc页面写多了没意思，听说移动端页面挺流行的，你也想写个出来玩玩，于是你写啊写啊。写完了在chrome模拟器调试完了觉得不错，但是你想放到手机上去看看效果，然后你把html文件发送到了手机打开一看，乱得简直惨不忍睹。于是呢你在电脑上改一点就往手机上发一遍html文件，调的你都想吐了。于是聪明的你找了个方法：

apache 调试静态页面方法

1. 安装Apache服务器，一直下一步直到安装完成。xampp 集成包下载链接
2. 安装完成之后运行apache control panel 然后运行apche、在浏览器输入localhost:80,就可以看到apache主页
3. 修改Apache服务器的根目录指向你的工程文件夹，点击config按钮、修改http.conf DocumentRoot "H:/workspace" 与<Directory "H:/workspace">，把路径修改成你项目的目录，然后重启。再访问localhost:80/ index.html就可以访问到你workspace文件夹的index.html文件了
4. 手机与电脑连在同一个路由器的wifi、或者手机连着电脑开启的wifi。然后在手机的浏览器中输入电脑ip地址 + 端口 + 访问文件的目录
5. 然后你在浏览器上修改页面，只需要在手机浏览器中刷新一下页面，修改的代码就生效了。

注意：apache 默认端口是80，如果有冲突的话可以在apache/conf目录下修改http.conf文件中修改listen 80,比如我修改为listen 8081，保 存重新运行，浏览器中输入locahost:8081,也可以访问到

默认情况下，apache可以访问的文件是放在xampp/htdocs/目录下的文件的，所以一般我们都会在此目录下建立工程。在浏览器中输入的locahost:8081对应到的是xampp/htdocs/目录，比如在htdocs目录下建了一个mytest文件夹，并且文件夹里新建一个demo.html,当我们需要访问这个页面的时候，只需要在浏览器中输入localhost:8081/mytest/index.html 就ok了。

现在起一个静态文件服务器越来越简单了，方法也有很多，这个方法比较适合学过php的人。现在学node的人也比较多，自己写几行代码就可以起个服务器了

好了、现在你的问题解决了。

后来你进了一家公司。有那么一天，产品经理一拍脑子，提出了一个蛋疼的想法，想做一个移动端页面。找你唧唧歪歪一阵子之后，你也觉得做就做吧，不就是个移动端页面嘛。于是蛋开始疼了然后你切图、写html、css、javascript 一气呵成。使用chrome模拟调试顺顺利利，搞定收工、发布到测试环境。然后把链接扔给了产品经理，自己翘着二郎腿喝咖啡去了。当你咖啡还没喝完。产品经理跑过来跟你说、你写的页面有问题啊，你这个按钮怎么点不了啊。你喝着咖啡慢悠悠着说，你手机有问题吧，然后产品经理说，xxx的手机也是这样啊。这时候你不淡定了说，不可能吧，那我看看吧。然后你打开电脑、拿出手机、连上usb数据线、方法如下：

1. 调试准备：
   window7系统安装chrome
   安卓手机安装chrome for android
   usb数据线

2. 步骤

1. USB设置 在你的手机里打开"设置"->"开发人员工具"->"USB调试" 打开USB调试。
2. 假设你已经将手机设置为"USB调试"打开的状态 将手机连接到电脑 手机会弹出是否链接 点击确定
3. 打开电脑的chrome 在地址栏输入 chrome://inspect 选中 Discover USB devices 可以检测到你的设备

 

安卓chrome调试安卓

4. 在手机chrome浏览器中输入所要打开的网页链接，也可以在浏览器 中输入url，点击open就可以在手机端打开
5. 点击inspect ，就会显示chrome控制台，就可以正常的在chrome调试手机页面了

检查控制台发现、的确是js脚本报错了、是因为某个方法使用由兼容性问题。于是你改完又扔给产品经理了，可是没过几分钟，产品经理又跑过来了，说这个页面显示的有问题啊，你看这个图片不居中了啊。我靠刚才不是好好的嘛， 产品经理说，我现在用的是uc浏览器，然后你。。。。。。。哦、我看看。

这个时候，你终于要爆发了，拿出你的终极大招 weinre，方法如下：

1. Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面，中文意思是远程Web检查器，有了Weinre，在PC上可以即时修改目标网页的HTML/CSS/Javascript，调试过程可实时显示移动设备上页面的预览效果，并同步显示设备页面的错误和警告信息，可以查看网络资源的信息，不过weinre不支持断点调试。该项目目前是 Apache Cordova 的一部分。

2. weinre工作原理

 

7.png

上述三层结构示意图的含义：
Debug客户端（client）：本地的WebInspector，远程调试客户端。
Debug服务端（agent）：本地的HTTPServer，为Debug目标页面与Debug客户端建立通信。
Debug目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。
客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。
由于Weinre的debug客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。

3、安装weinre
Weinre支持Windows与Mac（Weinre是运行在java环境下的，请确保机器上有正确的java运行环境），以前Weinre是用安装包安装的方式，现在Weinre 也发布到 NPM 上了。
首先安装 Weinre：
npm install -g weinre
安装完成之后，在本地开启一个监听服务器，获取本机的局域网地址：your-pc-ip，这时候执行如下命令开启：
weinre --httpPort 8910 --boundHost -all-（your-pc-ip）
说明：weinre默认使用8080端口，服务器主机名默认使用localhost，需要修改可在上述命令中进行设置，比如可以绑定为开发机器的内网IP地址。为了能在本地使用localhost打开，又能在移动设备或本地环境用IP地址打开Weinre调试工具，我们需要设置boundHost为"-all-"，同时要确保调试页面所在设备与当前开发环境（包括Debug客户端和Debug服务端）都处于同一网段内。Weinre绑定端口一定不能与本地环境已监听的端口冲突，确保绑定的是闲置端口，例如我设置的是8910。
Weinre还提供了下面的启动参数:
--help : 显示Weinre的Help
--httpPort [portNumber] : 设置Weinre使用的端口号， 默认是8080
--boundHost [hostname| ip address | -all-] : 默认是‘localhost‘， 这个参数是为了限制可以访问Weinre Server的设备， 设置为-all-或者指定ip， 那么任何设备都可以访问Weinre Server。
--verbose [true | false] : 如果想看到更多的关于Weinre运行情况的输出， 那么可以设置这个选项为true， 默认为false；
--debug [true | false] : 这个选项与--verbose类似， 会输出更多的信息。默认为false。
--readTimeout [seconds] : Server发送信息到Target/Client的超时时间， 默认为5s。
--deathTimeout [seconds] : 默认为3倍的readTimeout， 如果页面超过这个时间都没有任何响应， 那么就会断开连接。

4、在浏览器中输入http:your-pc-ip:8910/

![Uploading 8_910698.png . . .]
把<script src="http://your-pc-ip:8910/target/target-script-min.js#anonymous"></script>复制到你需要调试的页面，然后在浏览器打开页面。点击
进入到调试页面，点击页面链接，变绿色，表示调试此页面

 

9.png

然而在本地是可以打开调试的，但是我们的目的是通过手机端来调试，那么我们就得把需要调试的页面发布到线上，然后在手机浏览器上打开页面，

发现这样是可以调试的，但是如果我们需要在本地或者测试环境调试，那就不行了，所以我们需要手机能访问我们电脑连接的测试环境，那就需要代理软件了。
总结：
选择哪种调试方式根据实际开发需求来选择，如果只是调试页面的适配各个手机，各种浏览器的话，那么可以使用第一种，
如果只是要调试脚本的话，那么可以使用第二种
对于第三种的weinre，是比较强大的，但是步骤也相对繁琐点，但是功能可以包含以上两种。

如果以上的方法还不能满足你，这里有更多的更详细的调试方式

作者：木白no1
链接：https://www.jianshu.com/p/5b025d2842f2
来源：简书