如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）

大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码.

虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却远远不够用.

特别是当产线环境不能随意修改文件情况下,用线上环境来调试本地代码更是迫切的需求.

(往往本地测试通过,上线后却是各种bug.)

今天分享一下如何用Fiddler来修改并调试线上的JS代码.

以博客园首页为例子,用我本地的一个js文件来替换它的一个js.

查看首页源码发现一个js,就拿它开刷了.

打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求.

这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图.

接着把这个请求拖动到“AutoResponder”面板.

拖动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.

然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save.

这里我用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”.

“test fiddler.js”内容如下. 就是向body追加一段红色文字.

$(function(){var p=$("<p/>").text("这是fiddler加上的JS").css("text-align","center").css("color","red");$("body").prepend(p);
});

好了,刷新博客园首页看看效果.

可以看到,我们替换的js被执行了,接下来就可以在本地使用我们顺手的编辑器来写JS代码了,

本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样,是不是很方便?

最后想说其实你可以用同样的方式来替换图片,CSS,HTML.

总之一点就是利用线上的环境来测试你的代码,但又不对线上产生影响.

要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧.

Enjoy!

如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）相关推荐

idea使用本地代码远程调试线上运行代码---linux环境
场景: 之前介绍过windows环境上,用idea进行远程调试那么在linux环境下实战一下环境: linux 测试应用:使用docker部署的platform-multiappcenter-bas ...
使用MITM调试线上前端错误
使用MITM调试线上前端错误前言目前所在的公司每次部署上线至少半小时,如果在上线刚完成,检查线上发现有bug时,这意味着你又要等一次部署,尤其是接近下班的时候出这事的话,整个人都不好了. 首先线上 ...
【调试】——idea远程调试服务器上的代码
前提有些时候难免会出现一些线上问题,可能就需要远程调试服务器上的代码,依次快速定位错误代码,进行改正.小编最近通过idea进行了远程代码调试,特此记录一下,希望可以帮需要的朋友. 步骤 1.保证本机 ...
线上写代码的网址 jsbin
线上写代码的网址 jsbin JS Bin - Collaborative JavaScript Debugging
idea远程调试修改代码_使用IDEA远程调试线上代码
众所周知使用IDEA开发时可以通过debug进行调试并快速定位问题,但是如果代码已发布到远程服务器上,该如何调试呢?本文将告诉你如何利用IDEA调试远程服务器上的代码本文会先讲如何配置参数.调试,然 ...
ZanProxy —— 本地代码调试线上页面，环境再也不是问题
一.ZanProxy 是什么一言以蔽之,ZanProxy 是一个基于 Node.js 的代理服务器.它专注于帮助前端开发提高开发效率. 二.我们为什么需要一个代理工具在前端开发中,我们常常会碰到以 ...
使用 chrome 调试被压缩的 js 代码
有时候我们会遇到一些网上的压缩js代码,由于被压缩的原因导致可读性很差,而且不利于打断点.此时我们就可以使用 chrome 自带的开发者工具对被压缩的脚本进行处理后进行调试.能够熟练使用各种浏览器中的 ...
html实体编码遇上js代码
单双引号在js代码中在js中单.双引号引起来的是字符串,如果我们要在字符串中使用单.双引号,需要反斜杠进行转义 let str='user\'s name'; // or let str=&quo ...
汉字转html实体符号js_html实体编码遇上js代码
单双引号在js代码中在js中单.双引号引起来的是字符串,如果我们要在字符串中使用单.双引号,需要反斜杠进行转义 let str='user\'s name'; // or let str=&quo ...

如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）

如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）相关推荐

最新文章

热门文章