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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
vue实现购物车加减
May 30 Javascript
Angular利用HTTP POST下载流文件的步骤记录
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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python可视化实现代码
2019/01/15 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python deque模块简单使用代码实例
2020/03/12 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Delphi笔试题
2016/11/14 面试题
应届生如何写自荐信
2014/01/05 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle