fiddle的功能相当的强悍,用户也非常广,不过今天我就教大家用fiddle进行前端调试。

首先下载软件fiddle,点击对应的版本下载安装。

安装成功后打开看到右侧的导航栏:

点击AutoResponder

接下来出现的三个选项全部都要勾选,具体什么意思就是英文翻译了。

然后:

添加一个rule

在rule editor中第一个文本框里粘贴你要替换的原地址,比如:

然后进行下一步,在第二个框中点击选择find a file,具体意思你懂得,找个本地的文件替换上个url文件:

接下来就是最后一步了:

点击save,你就可以编辑你本地的文件,然后刷新线上的文件,fiddle就能拦截转发你的文件了。

fiddle不光可以拦截文件,还可以替换拦截请求,连接等,具体强大的功能就慢慢探索吧。

第一次做这种文章,欢迎拍砖!

前端利器,如何使用fiddle拦截在线css进行先下调试的更多相关文章

  1. 【27前端】在线css三角

    我们都知道利用css边框的属性可以画出三角形,这里为了方便,我做了一个简单的demo页面供大家使用. 在线css三角

  2. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  3. 前端利器Emmet

    前端利器Emmet Emmet可以通过缩写生成代码片段,可以提升前端开发的效率.使用方法就是输入HTML或者CSS的缩写,然后按tab键自动生成.原文在这里 后代 > <!-- nav&g ...

  4. 【干货分享】前端面试知识点锦集02(CSS篇)——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  5. 前端利器:SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  6. 前端开发【第2篇:CSS】

    鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到 ...

  7. 前端vue实现pdf文件的在线预览

    3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

  8. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  9. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

随机推荐

  1. 50中制作图表的JS库

    参看以下链接:http://www.tuicool.com/articles/FZNjMz

  2. mybatis_Generator配置

    mybatis-generator-core-1.3.2 <?xml version="1.0" encoding="UTF-8"?> <!D ...

  3. 我的django之旅(一)

    我的django之旅(一) 标签(空格分隔):django web 1.检验我们的python和django版本 liao@spring ~ $ python --version Python 2.7 ...

  4. 手机扫描二维码下载APP,根据操作系统不同自动下载

    Android和IOS手机扫描二维码下载APP,根据OS不同,自动处理相应下载操作.IOS自动跳转至AppStore应用下载页,Android自动下载应用的apk包. <script type= ...

  5. 海量数据面试题----分而治之/hash映射 + hash统计 + 堆/快速/归并排序

    1.从set/map谈到hashtable/hash_map/hash_set 稍后本文第二部分中将多次提到hash_map/hash_set,下面稍稍介绍下这些容器,以作为基础准备.一般来说,STL ...

  6. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  7. 手把手教你学习FPGA系列视频教程_救护车鸣笛声

    本套教程主要面对FPGA初学者,本次DIY活动不仅让初学者掌握FPGA硬件电路设计以及焊接方面的知识,更重要的是让初学者学习硬件描述语言 (VerilogHDL)描述数字电路,以及Quartus II ...

  8. visual studio 2008安装报错问题处理

    今天刚入职,安装visual studio 2008时报错说web创建组件安装错误,后来发现是因为之前这电脑安装visual studio 2008的时候是office2007刚安装的版本,可是后来系 ...

  9. debian gnome 3插件

    1.gnome 配置-安装插件 http://maxubuntu.blogspot.com/2012/09/debian-gnome3.html hunagqf|hunaqf2|hunaqf3 2.快 ...

  10. 八、桥接模式--结构模式(Structural Pattern)

    桥梁模式:将抽象化(Abstraction)与实现化 (Implementation)脱耦,使得二者可以独立地变化. 桥梁模式类图: 抽象化(Abstraction)角色:抽象化给出的定义,并保存 一 ...