工欲善其事必先利其器——web调试工具firebug
一、Firebug工具简介
firebug是firefox下的一款开发类插件。firebug集html查看和编辑,JavaScript控制台,网络状况监视器于一体,是开发JavaScript,css,html和ajax的得力助手。
YSlow是插件。
二、Firebug应用
1、禁用标签
下拉菜单启用禁用标签。
2、查看页面元素快捷键
ctrl+shift+c快捷键
3、html编辑
双击元素或者右键“编辑HTML”进入编辑页面,在编辑页面再点"编辑"即可退出。
4、css字体大小
方向键 调1个单位
ctrl+方向键 调0.1个单位
shift+方向键调10个单位
5、评估页面下载速度
网络标签页:可以看到请求的时间,大小,地点,和状态。
200代表从服务器完整加载。304代表未按预期修改文档,所以从本地缓存加载。
点击每个请求可以查看详情详情:包括请求头,返回结果,cookie等。
6、Ajax监听
网络面板下的XHR就是用来监听ajax请求的。
输入firebug,参数中wd就代表输入的参数即firebug。
7、javascript控制台
7.1、点运行执行js代码
右边面板中输入js代码,点运行即可执行。
7.2控制台命令
控制台预置了很多命令。最常用的console.log()简单的记录日志;此外还有
console.info()在消息前面显示信息图标。
console.debug()记录调试信息。
console.warn()在消息前面显示警告图标。
console.error()在消息前面显示错误图标,并且附上行号的超链接。
这些命令会用不同的颜色和符号标识出来如下。
7.3tab键补全提醒
比如输入con,按下tab键浏览器会给出提醒方便补全代码。
7.4、4种占位符
如下输出某年某月某日,%d代表整数。
有点类似c语言的格式化,控制台有4种占位符。
- %d 整数
- %f 浮点数
- %s 字符串
- %o 对象
应用:可以使用占位符格式化日志输出:
比如要输出2016年04月22日,可以在月份前加上%s字符串占位符,这样传入参数也需要加引号如下。
7.5日志多时归类分组
使用console.group()和console.groupEnd()来分组。
7.6、console.dir()显示一个对象的所有属性和方法
console.dir(console);
dir显示一个对象所有的属性和方法,非常方便。
7.7、时间跟踪
通过console.time()和console.timeEnd()记录代码运行时间,优化代码和算法。
但是我多次执行的实际耗时并不一样。
7.8、js代码调试
脚本中显示所有的代码,包括index.html和jquery代码。
设置断点,刷新页面,当执行到断点处的js代码时,页面不再执行,等待操作。
通过监控面板可以看变量值。
通过堆栈面板(Call true)点击其中函数查看调用者。
通过断点米娜包查看所有的断点列表。
可以通过4个图标来操作,从左到右分别是:继续(F8),单步进入(F11),单步跳过(F10),单步退出(shift+F11)。
删除断点:
在断点处单击或者在断点面板中取消勾选,或直接点右边的红色x删除断点。
通过console.trace()可以在控制台看出函数是怎样被调用的。
<script type="text/javascript">$(document) .ready(function(){var el=$("h1 span").first();var i=9;var interval=setInterval(function(){ console.trace();el.html(i);i--;if(i<0){clearInterval(interval);}},1000);}); </script>
通过概况可以进行简单的性能分析。
刷新页面,点击概况,概况就在收集过程中,
页面执行完再次点击概况标签标签栏,就可以看到概况详情。
可以看到interval()函数被调用了9次,占用时间等性能相关参数。
三、Firebug进阶提示
- 点击所有可以点击的地方
- 点击鼠标右键
- 下拉菜单
- 主菜单
firebug插件的扩展,比如YSlow等,一个插件的扩展也代表了它的好坏。
开发人员工具配合firebug一起使用,有一些其他功能,比如响应式模式:
参考慕课网课程:http://www.imooc.com/learn/137
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5416895.html有问题欢迎与我讨论,共同进步。
转载于:https://www.cnblogs.com/starof/p/5416895.html
工欲善其事必先利其器——web调试工具firebug相关推荐
- WEB调试工具---Firebug
Firebug简介 Firebug是网页浏览器 Firefox 下的一款开发类插件.它集HTML查看和编辑.JavaScript控制台.网络状况监视器于一体,是开发JavaScript.CSS.HTM ...
- Web浏览器调试工具firebug
出处:http://www.cnblogs.com/starof/p/5416895.html 一.Firebug工具简介 firebug是firefox下的一款开发类插件.firebug集html查 ...
- Web调试工具:火狐Firefox插件Firebug介绍
Web调试工具:火狐Firefox插件Firebug介绍 什么是Firebug Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一.它集HTML查看和编辑. ...
- 调试工具Firebug的使用方法
Javascript的调试,是开发Web应用尤其是AJAX应用很重要的一环,目前对Javascript进行调试的工具很多,我比较喜欢使用的是Firebug.Firebug是Joe Hewitt开发的一 ...
- (转)Fiddler教程(Web调试工具)
Fiddler的基本介绍 Fiddler的官方网站: www.fiddler2.com Fiddler的官方帮助:http://docs.telerik.com/fiddler/knowledgeb ...
- Fiddler (一) 教程(Web调试工具)
From:http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler 官方网站:http://www.fiddler2.com Fiddler 官方 ...
- github 著名php,工欲善其事必先利其器,盘点Github上那些优秀的PHP项目
工欲善其事必先利其器,作为一个开发者,了解并使用前人造好的轮子能让我们的开发事半功倍,在这里老宅整理了几个Github上有趣的php项目与大家分享. swoole Github仓库名称:swoole/ ...
- 工欲善其事必先利其器,Apache Kylin原来支持这么多可视化工具
工欲善其事必先利其器,Apache Kylin原来支持这么多可视化工具 坚持原创,写好每一篇文章 Apache Kylin的广泛应用还得益于它对很多软件都非常的支持,这篇文章我们将汇总一下Apache ...
- Fiddler抓包工具是最强大最好用的 Web 调试工具之一
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...
最新文章
- 人脸检测--Grid Loss: Detecting Occluded Faces
- CANOE入门(一)
- 【C 语言】变量本质 ( 变量修改 | 直接修改变量 | 通过内存地址间接修改变量 | 通过指针间接修改变量 )
- python PyQt5 QLCDNumber类(用于显示数字或一些符号的容器)
- python建立多台电脑共用的_用virtualenv建立多个Python独立虚拟开发环境
- Android小項目之---ListView实现论坛管理效果(附源碼)
- Atitit glb 1tie 2tie city lst 一二线城市列表数据约50个一线城市Alpha ++ 阿尔法++,,London 伦敦,,New York 纽约,,Alpha +
- 推荐系统之itemCF
- k8s deployment Strategy 更新策略
- springboot整合thumbnailator实现图片处理
- 笔记本电脑桌面不显示计算机,笔记本电脑屏幕不显示怎么回事
- 云计算平台项目团队组织架构与缘起
- Java 面试题(持续更,最后一次更新时间:2021/4/2)
- linux虚拟机怎么联网
- KVM和Xen的区别
- CSS开发技巧实用记(一)
- 如何快速地提高店铺销量
- 题解 洛谷 P4042 [AHOI2014/JSOI2014]骑士游戏
- 减少谷歌搜索使用次数!你知道这3个Python秘密武器吗?
- MySQL InnoDB MMCC**Mutil-Version Concurrency Control)
热门文章
- 数字电路技术基础(六)
- CTFshow php特性 web99
- c语言或者cpp中位运算的技巧
- [SOJ1039]Phone Home(深搜,染色问题)
- matlab caxis 刻度,[求助]MATLAB画图问题,caxis.m的问题
- 浅谈osi模型 三次握手 四次挥手 ddos攻击原理
- P1507 NASA的食物计划
- linux两台服务器之间文件/文件夹拷贝
- springmvc+mybatis+spring+redis
- cherry-pick,revert和rebase使用的3-way合并策略