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代码
Jan 11 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
JavaScript实现随机点名小程序
Oct 29 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初学者们头痛的十四个问题
2007/01/15 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python3图片转换二进制存入mysql
2013/12/06 Python
python打开网页和暂停实例
2014/09/30 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python socket处理client连接过程解析
2020/03/18 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
什么是GWT的Module
2013/01/20 面试题
管理部副部长岗位职责范文
2014/03/09 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python