前端开发调试工具DebugBar使用详解

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

QQ群里有一部分网友希望我能介绍一些开发工具给他们。好的工具往往能事半功倍，本文将重点给大家介绍前端开发调试利器debugbar的使用。

相对debugbar来说，大家肯定都用过Firebug插件。但是Firebug在ie下不能使用。而debugbar却可以支持IE。

如果你用过IETester工具，那么debugbar对你来说也将很容易上手，甚至你也可以略过本篇文章。

DebugBar简介

DebugBar插件是一款功能很强大的IE插件，用户可以从各个不同的角度剖析Web页面内部，包括页面 详细代码、CSS样式表、所有链接、所有图片代码、脚本信息等等，不管你是编程大虾还是IT新人都和适合使用。下面小编就为大家介绍一下IE插件 DebugBar中文版如何安装及使用的。

DebugBar的特点

• 查看网页DOM树,HTTP(S),网页javascript脚本函数归类展示.效验网页中的框架.网页属性的详细信息。
• 提供网页源码与IE整理后代码的对比。
• 能在无需改变显示器分辨率的前提下用不同分辨率显示页面.并能对页面进行缩放。
• 功能对任意位置取色并将HEX码复制到剪贴板中便于保存。
• 可将当前页面截图通过邮箱发送出去。

DebugBar查看网页的DOM，包括图片，样式，脚本等。

DebugBar查看网页源码，样式等代码，还有该元素的盒子模型。

DebugBar可以分析出所有http请求，还能抓出图片等一些404错误文件。

DebugBar还能将js中的函数都列出来等。

总之，DebugBar工具非常的强大。但是它也有缺点，例如不能删除元素，动态修改元素等。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 前端开发调试工具DebugBar使用详解