• 前端之家
• 开发工具
• 移动端调试方法

移动端调试方法

2020-12-02 开发工具 前端之家

前端之家收集整理的这篇文章主要介绍了移动端调试方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

@H_403_14@

 

fiddler基本配置

@H_403_14@

 

2.png

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

@H_403_14@

 

3.png

@H_403_14@

 

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 可以检测到你的设备

@H_403_14@