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

比方说我们打开携程的首页 www.ctrip.com,看到个叫 allsearch.js 的 js 文件,想往里加点代码调试下。

我们先把这个 js 文件下载到本地。

然后打开 fiddler(当然首先得下载安装 fiddler,参考如何用 fiddler 代理调试本地手机页面),浏览器访问 www.ctrip.com,fiddler 能捕获到所有请求,我们找到 allsearch.js 这个 session。

右侧面板切换到 AutoResponser ,勾上前两个选项,并把左边我们找到的这个文件拖到右边如图位置处。

右下角 “Rule Editor” 最下面的下拉选择 “Find a file”,选择之前下载到本地的那个文件。这时线上的该文件 url 就映射到本地的那个文件了。

我们在本地往该 js 文件的开头添加一句 alert('hello world');,刷新 www.ctrip.com,就有效果了。

如何用 fiddler 调试线上代码的更多相关文章

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

    大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...

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

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

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

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

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

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

  5. 不停机替换线上代码? 你没听错,Arthas它能做到

    写在前边 有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工 ...

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

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

  7. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  8. Springboot拦截器线上代码失效

    今天想测试下线上代码,能否正常的执行未登录的拦截.所以把拦截器的代码给开放出来,但是没想到线上代码addInerceptors(InterceptorRegistry registry) 这个方法一直 ...

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

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

随机推荐

  1. org.apache.jasper.JasperException: Unable to compile class for JSP

    项目启动时报错 : The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory S ...

  2. CStdioFile CString 读写中文

    TCHAR* old_locale = _tcsdup( _tsetlocale(LC_CTYPE,NULL) ); _tsetlocale( LC_CTYPE, _T("chs" ...

  3. 查看Android支持的硬解码信息

    通过/system/etc/media_codecs.xml可以确定当前设备支持哪些硬解码.通过/system/etc/media_profiles.xml可以知道设备支持的具体profile和lev ...

  4. Java基础语法总结1

    一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...

  5. html5移动端Meta设置

    1.   强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta name="viewport" content= ...

  6. MySQL Database on Azure 的用户名

    MySQL Database on Azure是中国版Windows Azure上的一个PaaS服务,类似于AWS上的RDS.MySQL Database on Azure的用户名与on-premis ...

  7. 关于TP3.2微信开发那点事(基础篇)

    许久没有为博客更新内容,今天我将过去一周做的微信服务号的相关心得体会在此分享,具体如何申请成为服务号的相关流程文档都有,可根据要求完成: 开发第一步:开发前配置: AppID-->微信号的&qu ...

  8. 连载《一个程序猿的生命周期》-28、被忽悠来的单身HR(女同志)

    一个程序猿的生命周期 微信平台 口   号:职业交流,职业规划:面对现实,用心去交流.感悟. 公众号:iterlifetime 百木-ITer职业交流奋斗 群:141588103    微   博:h ...

  9. 第26章 创建型模式大PK

    26.1 工厂方法模式 VS 建造者模式 26.1.1 按工厂方法建造超人 (1)产品:两类超人,成年超人和未成年超人. (2)工厂:这里选择简单工厂 [编程实验]工厂方法建造超人 //创建型模式大P ...

  10. 第18章 图元文件_18.2 增强型图元文件(emf)(2)

    18.2.7 增强型图元文件的查看和打印程序 (1)传递EMF到剪贴板,剪贴板类型应为:CF_ENHMETAFILE (2)CopyEnhMetaFile用于复制图元文件 (3)剪贴板中的图元文件会自 ...