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

HTML5 herman 697浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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查看网页DOM树

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

DebugBar插件查看元素盒子模型

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

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

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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