我们开发的系统运行在用户的环境上,为了保护我们的代码和提升性能,前端javascript是经过压缩的。压缩的代码难于定位,当前只有chrome对压缩的代码支持格式化,但是变量和函数简化后,定位依然困难。

使用fiddle可以在不替换环境javascript/CSS的情况下,使用本地未压缩javascript/CSS实现代码的调试。下面是我在开发中经常使用的功能,分享给大家。

  1. fiddle的配置

    安装fiddle后,选中Tools下的如下菜单:

在打开的对话框中,勾选如下两项:

2. 让本地代码替换服务器上的代码。如下图增加一个或对个Rule,即可实现对本地代码的调试

3. 清空左侧会话栏中的所有会话,使用 ctrl + x

4. 只拦截某个进程的会话。比如只拦截chrome的会话,拖动Any Process到chrome窗口中即可。

5.拖动一个会话,到右侧的Composer窗口,点击Execute可以再次执行该会话

6. 在不熟悉代码的时候,通过查询返回结果的值,快速定位到那个请求返回的结果。Ctrl +F, 搜索后黄色高亮显示

7. 在inspectors页签可以看到格式化好的json请求和响应

8. 停止、恢复拦截请求,点击左下角的状态即可完成切换。Capturing代表正在拦截。当放置一段时间,拦截失效的情况下,也可以重新点击下这里,再次启动拦截会话。

结束。

工具 | 代码调试利器fiddle介绍的更多相关文章

  1. Web调试利器fiddler介绍

    转载:http://blog.chinaunix.net/uid-27105712-id-3738821.html 最近在使用fiddler,发现这个真是非常最犀利的web调试工具,笔者这里强烈推荐给 ...

  2. 一分钟搭建 Web 版的 PHP 代码调试利器

    一.背景   俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...

  3. 移动端调试利器 JSConsole 介绍

    先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天 ...

  4. PyTorch代码调试利器: 自动print每行代码的Tensor信息

    本文介绍一个用于 PyTorch 代码的实用工具 TorchSnooper.作者是TorchSnooper的作者,也是PyTorch开发者之一. GitHub 项目地址: https://github ...

  5. Windows GUI代码与Windows消息问题调试利器

    Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...

  6. 【测试工具】http协议调试利器fiddler使用教程

    转自:http协议调试利器fiddler使用教程http://bbs.phpchina.com/thread-207418-1-1.html Fiddler真乃神器!它和市面上常见的很多web调试器. ...

  7. 介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)

    1.打开开发者工具:右键-->检查 (快捷键 f12) 2.开发者工具介绍: (1): 选择页面的dom进行查看 (2):设备适配 (3)元素: ① 可以查找到界面对应的dom: ② 通过计算样 ...

  8. 前端调试利器——BrowserSync

    此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...

  9. 【远程文件浏览器】Unity+Lua开发调试利器

    Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...

随机推荐

  1. [0] 服务器 TCP 提供程序无法在 [ 'any' <ipv4> *] 上侦听。TCP 端口已在使用中。

    配置工具——配置管理器——SQLEXPRESS协议下的TCP/IP协议 将其已启用改为禁用. 同时停止SQLEXPRESS服务即可

  2. [1] Entity Framework / Code First

    CodeFirst是EntityFramework的一种技术手段,因为传统编程方式都是先建立数据库,然后根据数据库模型为应用程序建模,再进行开发:CodeFirst从字面上理解就是代码先行,先在程序中 ...

  3. Myeclipse中隐藏jar包

    在package explorer的右上角有一个向下的小三角 点击选择Filter 在打开的对话框中 第一个选框中打上对勾 文字框中填上 *.jar 然后点击OK就行了 多个隐藏内容之间用逗号隔开 如 ...

  4. H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持

    H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...

  5. Mac: 易用设置

    Mac是一个类unix系统,因此很多命令是类似于Linux的.例如其中的Terminal, shell等等.但是软件源鉴于国内的网络环境,是不方便配置的. 中文输入法快速切换. 在不同的语言中可以用组 ...

  6. 15套java架构师、集群、高可用、高可扩展、高性能、高并发、性能优化、Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩展. ...

  7. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  8. Android使用OKHTTP解析JSON数据

    为了代码重用,我们首先封装一个类.这个类是HttpUtil HttpUtil.java package com.example.asus.networktest; import okhttp3.OkH ...

  9. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  10. PHP接入阿里云市场 阿里短信服务DEMO

    阿里短信服务:支持三大运营商短信.智能管道等优质能力,产品特点:3秒可达.99%到达率.超低资费. 使用阿里短信服务步骤: 1.购买服务 到https://market.aliyun.com/prod ...