安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了。下图是FireBug Debug 窗口。

对于我们开发人员,主要用它来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。

下图是如何打断点 基本跟Eclipse一样,点击行号就Ok了。

下图是如何在断点上设定条件,如果条件符合,就进入断点,这个功能很不错,特别是Debug很复杂的Function时候。

下图是如何单步调试,跟Eclipse一样 F11单步

下图是查看调用的Stack,对以复杂的JS Debug很有帮助。

下图是查看变量 基本跟EclipseDebug 一样。

下图是在断点处查看变量。

有个很好用的功能,代码行之间快速调转,使得对上千行的JS调试很轻松。

下图就是Performance 测试结果,使用很简单 点Profile

还有一个Log功能比较实用,看下图 如果你不想每次都进入断点,用这个就再好不过了。

基本用法就这些了,希望对大家有帮助。

转载地址:http://tanteng.sinaapp.com/2013/10/firebug-js/

如何用firebug调试js相关推荐

  1. 如何用浏览器调试js代码,不如先看看如何爬取百度翻译(多图警告)

    爬取百度翻译 爬取网站四部曲 分析 langdetect v2transapi?from=zh&to=en 分析重点请求出现的问题 解决问题 js代码调试 代码实现 注意 爬取网站四部曲 分析 ...

  2. FireBug 调试JS入门 —如何调试JS

    安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了.下图是FireBug Debug 窗口. FireBug美工用的非常普遍,公司美工妹妹用的非常熟练 呵呵,而对于我们开发人 ...

  3. FireBug 调试JS

    安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了.下图是FireBug Debug 窗口. FireBug美工用的非常普遍,公司美工妹妹用的非常熟练 呵呵,而对于我们开发人 ...

  4. Google Chrome调试js入门

    平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...

  5. VS调试js学习总结

    vs 下如何调试js http://blog.csdn.net/ztzi321/article/details/24350915 vs能调试js,这个方法直到今天我知道,现在分享给和我一样初学vs或a ...

  6. 利用Console来调试JS程序、Console用法总结

    利用Console来调试JS程序.Console用法总结(1) 一 .什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console ...

  7. chrome调试js

    [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用F ...

  8. 如何用vscode调试ts代码

    如何用vscode调试ts代码 准备工作:ts下载好,vscode下载好,node下载好,npm包安装好 打开vscode,在拓展商店搜索"Code Runner",下载好, 编辑 ...

  9. Firefox(火狐浏览器) 调试js设置

    Firefox(火狐浏览器)  调试js设置 步骤1: 安装插件 在Firefox(火狐浏览器)  的菜单栏目中点"工具"->"附加组件"->找到& ...

最新文章

  1. 有趣的Github项目万里挑一 !(附论文、项目链接)
  2. hdu2639,第K优决策
  3. Android设计模式(十五)--备忘录模式
  4. IBM的漂浮机器人,被马斯克的火箭送去太空了
  5. 《软件需求》学习笔记
  6. 易懂的比特币工作机理详解
  7. linux删除0字节的文件,如何在linux中删除许多0字节的文件?
  8. SQL Server 修改AlwaysOn共享网络位置
  9. 微信支付相关开发问题解决方案收集汇总
  10. 软考初级程序员知识点整理之 网络协议与标准
  11. 浅谈软件研发管理体系建设
  12. c语言入门教程怎么编程,从零开始的C语言入门教程-编程语言的基础
  13. linux 查看硬盘序号,Linux 查看硬盘序列号 命令
  14. java解压服务器文件夹,java解压7z文件
  15. Android项目实战--手机卫士01--启动界面
  16. Sen2Cor+SNAP处理Sentinel数据
  17. 供应链服务平台方案:助供应链服务公司实现商品+决策+物流+售后协同办公
  18. 关于互联网的一些观点想法
  19. vue组件 孙组件 调用爷组件(祖父组件)的方法
  20. 二、执行v8引擎示例代码

热门文章

  1. 牛客练习赛50-C——tokitsukaze and Soldier
  2. 灾备中心服务器辐射,数据中心和灾备中心的相同点以及不同点
  3. Avro 数据格式和命令行
  4. SES2 LED控制
  5. SQL 2000 中如何 纵表变横表
  6. 怎么样让用户认为产品更有价值?让他们DIY吧!
  7. OSGi 的核心配置、动态化及问题
  8. phalcon: Profiling分析 profilter / Plugin结合,dispatcher调度控制器 监听sql执行日志
  9. OpenJudge 2810(1543) 完美立方 / Poj 1543 Perfect Cubes
  10. JavaWeb笔记(七)FilterListener