zoukankan      html  css  js  c++  java
  • 移动端调试方法

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

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

  • 相关阅读:
    为什么 PCB 生产时推荐出 Gerber 给工厂?
    Fedora Redhat Centos 有什么区别和关系?
    【KiCad】 如何给元件给元件的管脚加上划线?
    MCU ADC 进入 PD 模式后出现错误的值?
    FastAdmin 生产环境升级注意
    EMC EMI 自行评估记录
    如何让你的 KiCad 在缩放时不眩晕?
    KiCad 5.1.0 正式版终于发布
    一次单片机 SFR 页引发的“事故”
    java基础之集合
  • 原文地址:https://www.cnblogs.com/z937741304/p/12938772.html
Copyright © 2011-2022 走看看