前端开发常用调试工具介绍前端开发常用调试工具介绍firebug 和 fiddler 快速入门拷贝一段HTML，总是容易不小心遗漏结束标签。每次修改脚本文件，总是要上传到测试环境才能看到效果。该死的异步请求，调试起来特别麻烦。作为一个挨踢民工 每天都会遇到这样那样WS的问题：http:/getfirebug.com壹firebugfirebug关于Firebug实时监控HTML和修改样式、布局非常好用的JavaScript调试工具查看网络使用情况和表现一系列好用的扩展插件1.1 实时监控HTML和修改样式、布局选取DOM元素选中DOM元素高光显示选中DOM元素的HTML代码选中DOM元素的样式选中DOM元素 的DOM方法1.2 方便的DOM节点查看和拷贝注意：firebug会修改内容 为空的html标签，比如将改成，所以直接在 firebug编辑状态下拷贝代 码时要小心。1.3 控制台在此键入js代码后回车 即可见到代码运行结果所有执行过的js都会排列在这里执行结果1.4 脚本调试1、选择 要调试 的脚本文件2、在想监控的脚本位置设置断点后刷新页面3、鼠标hover到当前行的变 量，可查看变量值4、决定执行到下一行 或者一个断点断点控制面板这里显示当前停留行 代码的相关信息1.5 查看网络使用情况选择 要查看的请求类型所有请求列表请求队列、耗时等单个请求的详情1.6 IE的同类工具IE DOM Inspectorhttps:/www.fiddler2.com/fiddler2/贰微软出品C#制造监视、修改http请求，调试网页代理基于JScript .NET 的事件脚本子系统关于fiddlerfiddler的安装安装前提：MS .NET Framework v2.0或者更新版本下载地址： http:/www.fiddler2.com/Fiddler2/version.aspFirefox的Fiddler启动控制插件：FiddlerHook2.1 fiddler初体验 之 替换文件XX希望在女友生日的晚上给她一个惊喜，在淘宝首页最昂贵的广告位（20万RMB每天的焦点图）上放上生日祝福。2.1.1 启用过滤功能，选择只捕获淘宝网首页进程的会话2.1.2 在fiddler获得焦点的情况下，按ctrl+f，查找要替换的图片的url。2.1.3 鼠标点击选中查找到的会话信息。2.1.4 使用本地文件替换掉线上文件。2.1.5 刷新淘宝首页，即可看到修改。2.2 fiddler进阶 之 篡改页面为了让惊喜升级，XX还想把淘宝网首页的页面标题修改成为：“淘宝网-XX女友生日快乐特别版”2.2.1 在打开淘宝首页的会话上点右键，选择Unlock For Editing。2.2.2 淘宝首页的会话选中，在Inspectors面板的transformer选项卡中选择不对页面进行压缩。2.2.3 切换到Inspectors面板的TextView选项卡，即可看到taobao.com请求到本地的代码。修改页面标题后，同5.1操作，取消选中Unlock For Editing 。2.2.4 将修改过的会话直接拖拽到AutoResponder面板中去，此后打开taobao.com返回的页面就是我们修改过的版本2.2.5 刷新页面，大功告成！fiddler功能特别推荐命令行：QuickExec自定义规则：RulesCustomize Rules模拟网速：RulesPerformanceSimulate Modem Speeds更多fiddler的参考资料 fiddler介绍： http:/msdn.microsoft.com/en-us/library/bb250446(VS.85).aspx http:/msdn.microsoft.com/en-us/library/bb250442(VS.85).aspx 官方帮助页：http:/www.fiddler2.com/Fiddler/help/ 官方视频教程： https:/www.fiddler2.com/Fiddler/help/video/default.asp 中文版fiddler帮助： http:/design.alibaba- inc.com/projects/guide_js/ Fiddler中文帮助文档.chm EndEnd沉鱼UED 前端开发www.fool2fish.cn