大家平时肯定都用过火狐的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代码的更多相关文章

  1. 使用Fiddler调试线上JS代码

    在下面的命令框输入“select script”回车来筛选js请求 将HTTP请求重定向到本地的文件,进行web调试.这种调试方式不需要发布到线上再验证,避免了修改不成功.对用户造成影响的风险 左边一 ...

  2. 如何用 fiddler 调试线上代码

    有时代码上线了,突然就碰到了坑爹的错误.或者有时看别人家线上的代码,对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地,都可以使用 fiddler 的线上调试功能. 比方说我们打开携程的首 ...

  3. [javascript] 利用chrome的overrides实时调试线上js

    chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方.我 ...

  4. 利用Chrome浏览器调试线上代码

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...

  5. 【原】fiddler修改线上的内容

    摘要:当我们线上的代码出bug了,咋办呢?有时候本地的代码跟线上的代码还是运行环境还是有区别的.比如有些封装的方法需要运动到手机上可以调试,而浏览器是无法调试的.如果不想每次修改完再放上到测试环境看效 ...

  6. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  7. 分享下使用 svn,测试服务器代码自动更新、线上服务器代码手动更新的配置经验

    分享下使用 svn,测试服务器代码自动更新.线上服务器代码手动更新的配置经验 利用SVN的POST-COMMIT钩子自动部署代码 Linux SVN 命令详解 Linux SVN 命令详解2 使用sv ...

  8. 用fiddler替换线上网页资源调试界面

    fiddler 是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有进出fiddler的数据(指cookie,html,js,css等文件,这些都 ...

  9. 使用Fiddler改变线上js文件的引用路径

    一般的项目开发都是先在本地环境开发,测试环境中完成测试,最后再提交到线上环境. 但是由于版本构建工具有时出现bug或者一些缓存的因素导致测试环境代码可能和线上不一样,这是多么蓝瘦的事情.此处说的是在原 ...

随机推荐

  1. 解决yum错误Error: requested datatype primary not available

    服务器信息: [mvj3@sdk2 ~]$ cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@ca-build10.us.oracle ...

  2. python csv tsv处理

    空行: http://www.crifan.com/python_csv_writer_writerow_redundant_new_line/

  3. php面向对象的三大特征 封装,继承,多态

    对象的主要三个特性 对象的行为:可以对 对象施加那些操作,开灯,关灯就是行为. 对象的形态:当施加那些方法是对象如何响应,颜色,尺寸,外型. 对象的表示:对象的表示就相当于身份证,具体区分在相同的行为 ...

  4. jsp导出excel

    很多时候,我们都知道在java项目里面采用poi来导出excel很方便,但是如果你的项目采用的是jsp你可以用更简单的方法来导出.首先你要在顶部引入:<jsp:directive.page im ...

  5. 用root直接登入ubuntu 14_04

    官网下载地址:http://www.ubuntu.com/download/desktop64位桌面版:http://www.ubuntu.com/ubuntu-releases/14.04/ubun ...

  6. 第六讲(二) Hibernate HQL查询

    HQL查询:Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此Hibe ...

  7. Git超级实用使用教程

    一篇git入门实用教程,原文地址http://www.cnblogs.com/tugenhua0707/p/4050072.html 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. ...

  8. Mybatis传递多个参数

    方法一: //DAO层的函数方法Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  9. MKNetworkKit: 网络处理又一利器

    没有认识MK之前,即便ASI已经不再更新,也没有启用ASI.因为ASI对于网络的处理更偏向于底层,适合针对各种情形的扩展. 但是,今天我要开始使用 MKNetworkKit了,项目在github上,使 ...

  10. acdream 1681 跳远女王(BFS,暴力)

    Problem Description 娜娜觉得钢琴很无趣了,就抛弃了钢琴,继续往前走,前面是一片湖,娜娜想到湖的对岸,可惜娜娜找了好久都没找到小桥和小船,娜娜也发现自己不是神仙,不能像八仙过海一样. ...