`
北极的。鱼
  • 浏览: 158972 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转】FireBug 调试JS入门 —如何调试JS

阅读更多

【转自    http://hi.baidu.com/uranusec/blog/item/f8a81a111b6999cca6ef3f63.html

 

 

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

   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。

 

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

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

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

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

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

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

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

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

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

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

分享到:
评论

相关推荐

    FireBug 调试JS入门教程 如何调试JS

    安装就不用说了,很简单,在FireFox上... 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

    firebug入门经典学习资料

    3. **JavaScript调试**:Firebug提供了强大的JavaScript调试工具,包括断点设置、单步执行、查看变量值等功能。通过这些工具,开发者可以追踪代码执行流程,查找并修复JavaScript错误。 4. **网络面板**:在这里,...

    firebug-1.8.2.zip

    再者,Firebug的JavaScript调试功能堪称一绝。它提供了断点设置、单步执行、查看变量值、调用堆栈跟踪等功能,使得JavaScript代码的调试变得直观而高效。开发者可以通过这些工具找出脚本中的错误,理解代码执行流程...

    firebug入门介绍,顶!

    此外,还可以通过 Firebug 设置改变其默认行为,例如始终在新窗口打开,调整字体大小,以及限制只对特定网站启用 Firebug。 3. **Firebug 窗口** Firebug 窗口包含多个标签,每个都有特定的功能: - **Console**...

    Firebug入门指南

    【Firebug入门指南】 Firebug是一款专为Firefox浏览器设计的强大开发者工具,对于网页开发者而言,它是不可或缺的神器。本文将引导初学者了解如何使用Firebug,涵盖了从安装、开启到利用其进行网页调试的主要功能。...

    Firebug 入门指南

    ### Firebug 入门指南 #### 一、安装Firebug Firebug 是一款强大的网页调试工具,主要用于 Firefox 浏览器。它可以帮助开发者快速定位问题并优化网站性能。要使用 Firebug,首先需要确保安装了 Firefox 浏览器。...

    AJAX Javascript 调试利器

    2. **JavaScript调试**:Firebug的脚本面板让你可以直接查看和编辑页面中的JavaScript代码,甚至可以在运行时修改变量值。设置断点可以帮助你跟踪代码执行流程,了解函数调用顺序和异常处理。这对于找出JavaScript中...

    FIREBUG使用入门

    Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具,可以实时编辑、调试和监测任何页面的CSS、HTML和 JavaScript。

    javaScript从入门到经典

    CSS和JavaScript分别负责网页的样式和行为,对于JavaScript的调试,可以使用浏览器内置的`alert()`函数,或者更专业的工具如FireBug。 在XHTML中,由于其严格的XML语法,`<script>`标签必须放置在CDATA(Character ...

    firefox+firebug zh

    3. **JavaScript调试**:设置断点,单步执行代码,查看变量值,帮助定位JS错误。 4. **网络面板**:监控网络请求,包括HTTP/HTTPS请求,查看响应时间,分析加载性能。 5. **DOM检查**:查看和操作DOM树,理解网页...

    Firebug入门指南(Firefox浏览器)

    **九、JavaScript调试** Script标签页让你能够设置JavaScript断点,查看调用堆栈,以及监视变量值,对于调试JavaScript代码非常实用。 **十、AJAX** 使用Firebug的Net标签页,可以跟踪和分析AJAX请求,查看请求头...

    南师大教育技术学考研笔记JavaScript入门经典.docx

    本文将从南师大教育技术学考研笔记的JavaScript入门经典内容出发,详细解析JavaScript的基础知识。 首先,JavaScript是一种解释型的脚本语言,与编译型语言不同,它不需要预先编译即可在浏览器环境中执行。尽管...

    firefox firebug中文入门教程 脚本之家新年特别版

    - **JavaScript调试**:Firebug提供了强大的JS调试功能,包括设置断点、单步执行、查看变量值、调用堆栈等,这对于找出和解决JavaScript错误非常有帮助。 - **网络监控**:你可以跟踪和分析网络请求,包括HTTP头部...

    JavaScript快速入门经典 中文

    Firefox的Firebug、Chrome的内置开发者工具、以及IE的Developer Toolbar等都是常用的JavaScript调试工具。 理解变量是编程的基础。在JavaScript中,变量可以存储不同类型的数据,如字符串、数字、布尔值等。例如: ...

    南师大教育技术学考研笔记_JavaScript入门经典java语言

    - Firefox的插件Firebug是一个非常强大的调试工具,它可以帮助开发者调试和优化网页的JavaScript代码。 - **语法基础**: - JavaScript中的语句通常以分号结束。此外,当遇到新的一行时,默认认为语句结束。 - ...

Global site tag (gtag.js) - Google Analytics