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创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue实现信息管理系统
May 30 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数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Django开发中的日志输出的方法
2018/07/02 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python学生信息管理系统实现代码
2019/12/17 Python
python 决策树算法的实现
2020/10/09 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
反对四风自我剖析材料
2014/10/07 职场文书