返回首页
当前位置: 主页 > 互联网技术 > 虚拟化 >

PMS项目使用Fiddler进行移动端开发调试的一种技巧

时间:2016-10-10 21:54来源:电脑教程学习网 www.etwiki.cn 编辑:admin

  基于Fiddler强大抓包功能,我们经常在WEB项目中使用它进行前端开发调试,但是,在进行移动端WEB开发时,手机无法安装Fiddler进行抓包,就算有类似的抓包工具,在手机上操作也非常的困难。本文通过尚岑项目管理系统项目微信端开发曾经遇到类似问题,介绍一种有效的移动前端调试技巧。
 

【正文】

调试准备

步骤一:保证PC机和手机连接同一个WIFI网络,并且是同一个IP段;
步骤二:设置Fiddler允许远程计算机连接,设置完毕重启Fiddler;

   
步骤三:设置手机WIFI网络的代理;
注意事项:代理的地址设置成PC端的IP地址,端口为步骤二Fiddler设置的端口8888.
  
   这样我们的Fiddler代理设置完成,接下来就可以开始我们的调试测试了。

调试测试

       1、使用PC端的Fiddler抓取在手机端操作的网页数据包
       (1)用手机浏览器访问网页
        在PC端打开Fiddler,用手机访问预先部署好的移动端站点,如下图所示,我们通过前面的调试准备后,使用Fiddler抓取了PC端代理的手机端网络资源文件,这样,通过这种方式我们的移动端开发调试就变得和PC端那样方便了。



2、使用PC端代理的方式,在本地调试移动端的JS文件
    (1)配置要调试的文件
     如下图配置,设置服务器JS文件与本地JS文件的匹配关系,其意义是当移动端访问【http://192.168.0.102:82/WeChat/WeChatClient/Controllers/ ctrlProjectDetail.js】时,将使用本地的【D:\Workspaces\尚岑项目管理系统\ SourceNew\NewWeb-最新合并\Trendy.ProjectManageSystem.Web\ WeChat\ WeChatClient\Controllers\ctrlProjectDetail.js】文件来替换它。在有需要的情况你还可以通过这种方式调试已发布在服务器的HTML、CSS、img文件,有效的避免了移动端开发调试的频繁开发调试。

    (2)在本地调试ProjectDetail.JS文件
    修改本地JS文件,这个修改将使两个文进运行时有不同的效果,比如弹窗。

    访问和这个JS相关的功能,测试代理替换的效果,如下图所示。   
   

小结

   在尚岑PMS项目中,我们就是遇到了移动端开发调试的繁琐问题,每次开发调试经常需要重新发布,特别是开发调试的后期,遇到的问题往往都是比较零散的问题,重新发布将提高调试的时间成本,而通过本文介绍的移动端开发技巧,有效的减少了这种时间成本,提高了移动端开发调试的灵活性
------分隔线----------------------------
标签(Tag):PMS项目 Fiddler
------分隔线----------------------------
推荐内容
猜你感兴趣