fiddler修改请求,替换为本地文件url

fiddler这个神器,感觉还是不怎么会用,正如标题所说的:可以在本地修改文档,利用Fiddle代理重定向线上的文件,实现实时预览显示代码的效果,当然只能替换CSS、JS和图片,无法替换结构。

第一步:使用Fiddler查看页面的数据流列表,找到js文件保存到本地

保存到本地

第二步:创建重定向规则,使用本地文件

使用本地文件

第三步:刷新页面,如果看到灰色背景的请求会话,就表示生效了

刷新页面

第四步:修改本地文件,进行测试

修改本地文件之后,重新刷新页面,就可以看到修改后的效果了。 这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险, 而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试。

还有人说可以修改本地host为线上的,这个技能我还没学会。

 

fiddler抓包时,默认不显示CSS/JS文件 。如何显示css/js文件呢?

解决步骤:

1. 勾选filters,找到Request Headers,勾选Show only if URL contains项,填写需要显示的文件类型

REGEX:(?insx)/[^\?/]*\.(css|js|json|ico|jpg|png|gif|bmp|wav)(\?.*)?$

2. 执行Actions->Run Filterset Now。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流