• 移动端web开发之真机调试工具的使用


    在web开发开发过程中调试时必不可少的,这篇文章就讲一下移动端web的调试。

    常用的有两种方式:1.直接在浏览器自带的移动端模拟环境上调试。2.使用Fildder抓包工具进行手机真机调试。

    浏览器调试

    谷歌的开发者工具为移动端调试做了专门的准备:打开开发者工具,点击第二个手机状图片

    即可进入手机模式浏览所有网页:

    在这里可以选择所需要的手机类型

    然后就可以进行相应的调试了,但这个毕竟是模拟环境,跟真机调试相比还是会有些许差别。我个人的话,如果只是大致看下web效果会使用这个,党进行严格的开发的时候就要使用Fiddler(下面讲使用方法)抓包进行真机调试了。

    Fiddler抓包工具

    这里所说的移动端抓包不是说通过浏览器的开发工具查看http请求,而是通过Fiddler代理抓取真机请求的http包。

    Fiddler是一款非常流行并且实用的http抓包工具,它的原理是在本机开启了一个http的代理服务器,然后它会转发所有的http请求和响应,因此,它比一般的firebug或者是chrome自带的抓包工具要好用的多。不仅如此,它还可以支持文件替换、请求重放等一些高级功能。显然它是可以支持对手机应用进行http抓包的。

    既然是代理,也就是说:客户端的所有请求都要先经过Fiddler,然后转发到相应的服务器,反之,服务器端的所有响应,也都会先经过Fiddler然后发送到客户端:

    介绍下如何用fiddler对手机应用来抓包。

    首先去fiddle官网下载最新版本并点击fiddler.exe进行安装

    安装成功后,此为运行界面

    主面板左侧:

    是http包列表,是Fiddler抓取到的每条http请求(每一条称为一个session),主要包含了请求的url,协议,状态码,body等信息,详细的字段含义如下图所示:

    主面板右侧:详情和数据统计面板。针对每条http请求的具体统计(例如发送/接受字节数,发送/接收时间,还有粗略统计世界各地访问该服务器所花费的时间)和数据包分析。

    其他的具体功能有兴趣的可以参照fiddle教程进行了解:http://kb.cnblogs.com/page/130367/

    下面讲一下真机抓包:

    这里将介绍如何使用fillder抓取手机请求包。不过通过fillder代理抓取手机包有个必备条件,就是电脑网络和手机网络是互通的,否则将无法抓包。检测PC是否可以访问到手机,可以直接ping 手机ip。

    第一步:检测fillder设置

    在抓包之前需要确保fillder的一些设置是正确的:

    顶部导航栏——Tools——Fillder Options

    确保红色框中的选项被勾选(允许电脑被连接访问),上方的端口号设置为8888!(一会手机设置会用到)
          

    第二步:获取本机 ip地址:可以在cmd里面输入ipconfig命令获取

    第三步:手机代理设置

    打开手机设置——wifi——并找到http代理选项,设置为手动并输入服务器名(既自己的电脑的IP),端口(fiddle里自己设置的端口号)

                                          

    设置完这些后在自己手机端的浏览器上打开自己开发的网页了,并进行调试。

  • 相关阅读:
    mac 终端 常用命令
    创办支持多种屏幕尺寸的Android应用
    java学习之部分笔记2
    java学习之部分笔记
    java学习之i/o
    java中String的用法
    java中List的用法
    java学习之Date的使用
    java学习之数据库
    C#中通过类来继承两个接口,父类实例化接口中的方法,子类继承父类,调用方法
  • 原文地址:https://www.cnblogs.com/qujinwei/p/5517063.html
Copyright © 2020-2023  润新知