工具 | 代码调试利器fiddle介绍
我们开发的系统运行在用户的环境上,为了保护我们的代码和提升性能,前端javascript是经过压缩的。压缩的代码难于定位,当前只有chrome对压缩的代码支持格式化,但是变量和函数简化后,定位依然困难。
使用fiddle可以在不替换环境javascript/CSS的情况下,使用本地未压缩javascript/CSS实现代码的调试。下面是我在开发中经常使用的功能,分享给大家。
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介绍的更多相关文章
- Web调试利器fiddler介绍
转载:http://blog.chinaunix.net/uid-27105712-id-3738821.html 最近在使用fiddler,发现这个真是非常最犀利的web调试工具,笔者这里强烈推荐给 ...
- 一分钟搭建 Web 版的 PHP 代码调试利器
一.背景 俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...
- 移动端调试利器 JSConsole 介绍
先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天 ...
- PyTorch代码调试利器: 自动print每行代码的Tensor信息
本文介绍一个用于 PyTorch 代码的实用工具 TorchSnooper.作者是TorchSnooper的作者,也是PyTorch开发者之一. GitHub 项目地址: https://github ...
- Windows GUI代码与Windows消息问题调试利器
Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...
- 【测试工具】http协议调试利器fiddler使用教程
转自:http协议调试利器fiddler使用教程http://bbs.phpchina.com/thread-207418-1-1.html Fiddler真乃神器!它和市面上常见的很多web调试器. ...
- 介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
1.打开开发者工具:右键-->检查 (快捷键 f12) 2.开发者工具介绍: (1): 选择页面的dom进行查看 (2):设备适配 (3)元素: ① 可以查找到界面对应的dom: ② 通过计算样 ...
- 前端调试利器——BrowserSync
此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...
- 【远程文件浏览器】Unity+Lua开发调试利器
Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...
随机推荐
- [0] 服务器 TCP 提供程序无法在 [ 'any' <ipv4> *] 上侦听。TCP 端口已在使用中。
配置工具——配置管理器——SQLEXPRESS协议下的TCP/IP协议 将其已启用改为禁用. 同时停止SQLEXPRESS服务即可
- [1] Entity Framework / Code First
CodeFirst是EntityFramework的一种技术手段,因为传统编程方式都是先建立数据库,然后根据数据库模型为应用程序建模,再进行开发:CodeFirst从字面上理解就是代码先行,先在程序中 ...
- Myeclipse中隐藏jar包
在package explorer的右上角有一个向下的小三角 点击选择Filter 在打开的对话框中 第一个选框中打上对勾 文字框中填上 *.jar 然后点击OK就行了 多个隐藏内容之间用逗号隔开 如 ...
- H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持
H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...
- Mac: 易用设置
Mac是一个类unix系统,因此很多命令是类似于Linux的.例如其中的Terminal, shell等等.但是软件源鉴于国内的网络环境,是不方便配置的. 中文输入法快速切换. 在不同的语言中可以用组 ...
- 15套java架构师、集群、高可用、高可扩展、高性能、高并发、性能优化、Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战视频教程
* { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩展. ...
- webpack的简单配置
本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...
- Android使用OKHTTP解析JSON数据
为了代码重用,我们首先封装一个类.这个类是HttpUtil HttpUtil.java package com.example.asus.networktest; import okhttp3.OkH ...
- 【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
- PHP接入阿里云市场 阿里短信服务DEMO
阿里短信服务:支持三大运营商短信.智能管道等优质能力,产品特点:3秒可达.99%到达率.超低资费. 使用阿里短信服务步骤: 1.购买服务 到https://market.aliyun.com/prod ...