很久以前

fiddler真是个好东西，自从用上了fiddler来替换生产环境的js排查问题之后，我就过上了996的快乐生活！
PC端项目这样操作没问题的，后来在app端排查问题时，也想用fiddler替换原来的js看问题是否修复了，试了一下不行，没能替换成功。后来问了下同事，原来是缓存的问题：app缓存中有js、html时，就不会重新请求资源了。解决方法很简单：清缓存 + 关app + 清理手机垃圾，正常前2项就可以了，如果还有问题就顺便清理下手机垃圾，甚至可以重启手机，狠不狠！

操作步骤

1、获取到生产环境的资源，以js为例，保存到本地；

1.1 从请求中获取生产环境资源

1.2 保存到本地

2、针对要排查的问题，修改本地保存的js

修改后保存即可…

3、用本地文件替换生产环境的文件。

3.1 创建一条待替换的rule

把请求用鼠标拖到右侧AutoResponder中，就会新生成一条记录（rule）

3.2 修改当前rule的规则

至此，修改完毕。再请求响应资源时，就不会去请求服务器，而是直接使用本地的Js，从而可以方便、快速的排查问题。
同理，我们也可以动态替换Html文件、CSS文件等。

4、说明

如果对手机抓包有疑问，可以参考本人之前发布的文章:

fiddler手机抓包问题记录201910

前端调试技巧2：fiddler能替换h5项目或者APP中的JS或者HTML嘛？相关推荐

使用HBuilderX将vue或H5项目打包app
好久没有搞过将vue项目打包成app了,这两天刚好项目需要将vue开发的H5项目打包成APP,那就简单记录一次呗(之前也写过一篇打包app,是将项目使用hbuilder打开,转为webapp什么的,就 ...
谷歌浏览器前端调试技巧01——使用F12清除缓存
对于搞前端开发的人来说,前端调试是不可避免的,使用谷歌浏览器调试更是必备手段,今天主要是给大家分享一下清楚缓存的技巧.已经了解的朋友请移步. 为什么需要清理浏览器缓存? 我们通常说的WEB应用采用BS ...
多图预警，Chrome 浏览器前端调试技巧大揭秘
(给前端大全加星标,提升前端技能) 作者:苏里 https://juejin.im/post/5d09c39ee51d4576bc1a0e07 前言相信大部分前端同学都是用 Chrome 浏览器进行 ...
【前端调试技巧】webview，企业微信
1.如何调试手机企业微信的H5 在手机企业微信内访问 debugx5.qq.com: 在打开页面选上 2. 第二步电脑浏览器访问 chrome://inspect 在这个位置会有连接上的调试页面(手机 ...
h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）
前端的写法 1.封装wxPay.js import wx from 'weixin-js-sdk' //先下载后引入 export function wexinPay(data) { return n ...
前端vue--用HbuilderX将小程序打包为h5项目
1. 找到项目中的manifest.json文件->h5配置,更改路由模式为hash模式,基础路径项改为相对路径./ 2. 发行->网站-H5手机版,如下图 3. 网站标题:不用管网站域 ...
超简单！H5项目套APP外壳
下载HBuilder 官网:http://www.dcloud.io/ (1)下载成功后邮箱注册登录 (2)文件->新建->移动App (3)创建成功后得到这样一个目录结构,manife ...
你所不知道的模块调试技巧 - npm link #17
你所不知道的模块调试技巧 - npm link #17 1. 背景 node 应用开发中,我们不可避免的需要使用或拆分为 npm 模块,经常遇到的一个问题是: 新开发或修改的 npm 模块,如何在项目 ...
electron 打开调试_构建基于 iOS 模拟器的前端调试方案
作者:imyzf 本文将为大家介绍自动化控制 iOS 模拟器的原理,为开发基于 iOS 模拟器的前端调试方案提供帮助. 我们在开发 iOS App 内的前端页面时,有一个很大的痛点,页面无法使用 Sa ...

前端调试技巧2：fiddler能替换h5项目或者APP中的JS或者HTML嘛？

答案当然是肯定的啦！要不我还怎么往下编...