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蒙版控件实现代码
Dec 08 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Layui表格监听行单双击事件讲解
Nov 14 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/12/13 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
php-msf源码详解
2017/12/25 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python 如何实现遗传算法
2020/09/22 Python
python RSA加密的示例
2020/12/09 Python
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
财产保全担保书
2015/01/20 职场文书
人力资源部岗位职责
2015/02/11 职场文书
小学英语课教学反思
2016/02/15 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
React Fragment介绍与使用详解
2021/11/11 Javascript
处理canvas绘制图片模糊问题
2022/05/11 Javascript
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript