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 no-repeat写法 背景不重复
Mar 18 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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 setTime 设置当前时间的代码
2012/08/27 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
jquery图片放大功能简单实现
2013/08/01 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
pandas DataFrame索引行列的实现
2019/06/04 Python
Django框架反向解析操作详解
2019/11/28 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
CSS3 开发工具收集
2010/04/17 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
AJax面试题
2014/11/25 面试题
机关门卫制度
2014/02/01 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
励志演讲稿500字
2014/08/21 职场文书
会计试用期自我评价
2014/09/19 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
学生打架检讨书
2014/10/20 职场文书
长城导游词400字
2015/01/30 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android