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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
详解Node 定时器
Feb 26 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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
我的论坛源代码(六)
2006/10/09 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
Ruby如何定义一个类
2012/10/08 面试题
酒店端午节促销方案
2014/02/18 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server