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程序之undefined篇(中)
Nov 23 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
es6函数之尾递归用法实例分析
Apr 25 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
老生常谈Python基础之字符编码
2017/06/14 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
浅析Python数据处理
2018/05/02 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
wxpython布局的实现方法
2019/11/01 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
商务主管岗位职责
2013/12/08 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
个人自我剖析材料
2014/02/07 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
和睦家庭事迹
2014/05/14 职场文书
大学生安全责任书
2014/07/25 职场文书
团员年度个人总结
2015/02/26 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL