FireBug 调试JS入门教程 如何调试JS


Posted in Javascript onDecember 23, 2013

安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了。下图是FireBug Debug 窗口。

FireBug 调试JS入门教程 如何调试JS

     FireBug美工用的非常普遍,公司美工妹妹用的非常熟练 呵呵,而对于我们开发人员,主要用它来Debug JS。看看官方对Debug功能的介绍。
 Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
      简而言之,FireBug 可以让我们在任何时候debugJS 并查看变量,同时可以通过它找出JS中性能瓶颈。
      下图是如何找到Web应用的JS,激活Firebug,点Script,然后在All 旁边选择你要Debug的JS。

FireBug 调试JS入门教程 如何调试JS


下图是如何打断点 基本跟Eclipse一样,点击行号就Ok了。

FireBug 调试JS入门教程 如何调试JS

下图是如何在断点上设定条件,如果条件符合,就进入断点,这个功能很不错,特别是Debug很复杂的Function时候。

FireBug 调试JS入门教程 如何调试JS

 下图是如何单步调试,跟Eclipse一样 F11单步

FireBug 调试JS入门教程 如何调试JS

下图是查看调用的Stack,对以复杂的JS Debug很有帮助。

FireBug 调试JS入门教程 如何调试JS

下图是查看变量 基本跟EclipseDebug 一样。

FireBug 调试JS入门教程 如何调试JS


下图是在断点处查看变量。

FireBug 调试JS入门教程 如何调试JS


有个很好用的功能,代码行之间快速调转,使得对上千行的JS调试很轻松。

FireBug 调试JS入门教程 如何调试JS

下图就是Performance 测试结果,使用很简单 点Profile

FireBug 调试JS入门教程 如何调试JS


还有一个Log功能比较实用,看下图 如果你不想每次都进入断点,用这个就再好不过了。

FireBug 调试JS入门教程 如何调试JS

基本用法就这些了,希望对大家有帮助。
Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
AngularJS表单基本操作
Jan 09 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
JS中的异常处理方法分享
Dec 22 #Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 #Javascript
判断文件是否正在被使用的JS代码
Dec 21 #Javascript
jquery鼠标停止移动事件
Dec 21 #Javascript
JS delegate与live浅析
Dec 21 #Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 #Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 #Javascript
You might like
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python从入门到精通(DAY 1)
2015/12/20 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python3中rank函数的用法
2019/11/27 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
爱心捐助倡议书
2014/05/19 职场文书
班级课外活动总结
2014/07/09 职场文书
人事代理委托书
2014/09/27 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
正规借条模板
2015/05/26 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android