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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
vue实现tab栏点击高亮效果
Aug 19 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安全编程之加密功能
2006/10/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python实现Youku视频批量下载功能
2017/03/14 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
django中的图片验证码功能
2019/09/18 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
施工材料员岗位职责
2014/02/12 职场文书
通信工程专业求职信
2014/06/04 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
辞职信格式模板
2015/02/27 职场文书
停发工资证明范本
2015/06/12 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python