• 【前端开发】利用Fiddler抓包工具进行本地调试


    解决什么问题:

    解决前端在本地联调页面 || 样式 || 脚本时经常修改服务器代码,浪费太多时间。

    避免多人同时修改代码产生冲突问题。可以在本地调完代码之后,再贴到服务器上。

    其实这个问题老早就开始想过一些办法了。但是之前都是要在服务器中引入本地文件进行调试。有很多缺点。只适合部分场景。

    现在这种方案受老吉上次分享会上的启发。稍微做了一些修改写的。可以说基本的前端问题都可以用这种方法来快速联调解决。

    利用Fiddler抓包工具进行本地调试方案:

    所需工具(一次安装及配置):

    Fiddler:百度下载或(https://pan.baidu.com/s/1qYUii88

    Php服务器:http://pan.baidu.com/s/1qXDljgK

    对移动端抓包配置:

    手机和电脑同时连接一个wifi。如:MIGU

    对该wifi进行设置 (你的电脑IP与你的fiddler端口)

    image.png

    对移动端请求进行抓包:

    打开fiddler工具

    image.png

    移动端访问页面:

    image.png

    工具抓取到移动端的请求列表:

    image.png

    找到你要本地化的请求:(如:

    http://wap.cmread.com/rbc/t/content/repository/ues/js/s109/indexV7.js?time=201712291849

    )àAdd Rule

    image.png

    创建本地服务器:

    下载一个本地php服务器安装包(如上所需工具

    下一步下一步安装即可(一次安装配置)

    安装完成后,进入桌面的某个文件夹:

    image.png

    在文件夹内创建你要调试的文件(如:将你要调的文件另存到本地指定位置):

    image.png

    启动php服务器,端口号设置80,开始&访问http://你的ip:80

    image.png

    得出你创建的脚本的地址为:http://你的ip/cmread/rbc/t/indexV7.js

    工具实现请求重定向到本地文件:

    替换:

    image.png

    修改本地代码:

    image.png

    刷新手机页面结果:(本地调试起作用了,且并不影响现网)

    image.png

    本地调试完之后,将调试成功的代码放现网,再将工具的此勾选去掉即可验证现网。

    image.png

  • 相关阅读:
    CSRF-防御与攻击
    windows 命令
    Integer.parseInt(String str, int i)
    springCloud springmvc 七牛云存储整合百度富文本编辑器
    jsp 文件
    标签的使用
    富文本编辑器
    项目总结 js
    namenode 和 datanode 节点
    Hadoop wordcount
  • 原文地址:https://www.cnblogs.com/wuhairui/p/fiddler-text.html
Copyright © 2020-2023  润新知