移动端调试方法

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

在正式开始之前,我们要先学会怎么让你的手机连上你的电脑,就是你在电脑浏览器里能访问什么页面,那么在你的手机上也可以访问到。那我们就要使用到代理软件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调试安卓
  1. 在手机chrome浏览器中输入所要打开的网页链接,也可以在浏览器 中输入url,点击open就可以在手机端打开
  2. 点击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
来源:简书

相关文章

博文目录文章目录问题描述解决方案问题描述阿里云ECS, 系统切...
博文目录文章目录创建项目创建代码仓库完成工程代码并提交推...
下载CentOS官网CentOS下载CentOS-7-x86_64-DVD-2003.isoCent...
博文目录文章目录服务端客户端测试效果服务端配置到 nginx 反...
博文目录文章目录环境下载安装配置使用环境阿里云ECS(Aliyu...
博文目录文章目录环境下载安装配置使用环境阿里云ECS(Aliyu...