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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
原生JS轮播图插件
Feb 09 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
js实现无缝轮播图特效
May 09 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
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使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python http接口自动化脚本详解
2018/01/02 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
工作违纪检讨书
2014/02/17 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
大跃进口号
2014/06/16 职场文书
大学生求职信例文
2014/06/29 职场文书
怎样写辞职信
2015/02/27 职场文书
工程合作意向书范本
2015/05/09 职场文书
四群教育工作总结
2015/08/10 职场文书