`
geeksun
  • 浏览: 968039 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

firebug 使用

阅读更多

           使用firebug可以调试javascript,还有可以监测网页打开速度,是开发JavaScript、CSS、HTML和Ajax的得力助手。

打开firebug的控制台,里面有HTML查看和编辑、Javascript控制台、网络状况监视器。

1、Console控制台

控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在控制台里看到每一个 XMLHttpRequests请求post出去的参数、URL,http头以及回馈的内容,原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。 

2、网络状况监测器

也许有一天,你的老板或者客户找到你,抱怨你制作的网页速度奇慢,你该如何应对?你或许会说这可能是网络问题,或者是电脑配置问题,或者是程序太慢,或者直说是他们的人品问题?不管怎么说,最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的,它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来,也许在这里你能一把揪出拖慢了你的网页的元凶,进而对网页进行调优,最后老板满意客户欢喜,你的饭碗也因此而牢固。网络监视器还有一些其它细节功能,比如预览图片,查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

3、Javascript调试器

这是一个很不错的javascript脚本调试器,占用空间不大,但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小,五脏俱全。如果你有一个网站已经建成,然而它的javascript有性能上的问题或者不是太完美,可以通过面板上的Profile来统计每段脚本运行的时间,查看到底是哪些语句执行时间过长,一步步排除问题。

调试javascript可以设置断点,当js执行到断点时停止运行,可以到右侧的break points处查看断点的变量值。  

    脚本在断点停止后,我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了。第一按钮是继续运行程序,不再执行跟踪,快捷键是F8。第二个按钮是单步执行方式,每次执行一条语句,该方式在遇到函数调用时不进入调用函数内部进行跟踪,快捷键是F10。第三个按钮也是单步执行方式,每次执行一条语句,但它遇到函数调用时会进入调用函数内部进行跟踪,快捷键是F11。当你进入调用函数内,想马上跳出来时,可以单击第四个按钮,该按钮没有快捷键。

   还可以在断点标记的红点上单击右键还可以设置断点条件,在符合条件的时候才会停止脚本的执行。

分享到:
评论

相关推荐

    firebug使用

    火狐下firebug使用的相关视频。因文件较大分成了3部分,这是第一部分。

    FireBug使用指南.doc

    【Firebug使用指南】 Firebug是一款强大的Web开发工具,它为Firefox浏览器提供了深入的调试功能,包括HTML、CSS、JavaScript和网络性能分析等。本文将详细介绍如何安装、使用Firebug,以及其主要功能。 一、安装...

    FireBug 使用

    ### FireBug 使用详解 #### 一、概述 随着 Web 技术的发展,特别是 AJAX 的广泛应用,使得 JavaScript 在 Web 应用开发中占据了极其重要的地位。然而,JavaScript 的复杂性也给开发者带来了诸多挑战,其中最为突出...

    Firebug使用指南.ppt

    **Firebug使用指南** Firebug是一款强大的Web开发工具,它为Firefox浏览器的用户提供了便捷的HTML、CSS、JavaScript以及网络请求的调试功能。由Joe Hewitt创建,Firebug的出现标志着Web开发技术的一个显著进步,它...

    Firebug使用详解

    【Firebug使用详解】 Firebug是一款专为JavaScript开发者设计的强大Web开发工具,它与Firefox浏览器无缝集成,提供了实时编辑、调试和监测HTML、CSS以及JavaScript的能力。本文将为初学者介绍Firebug的基本功能和...

    Firebug使用教程

    ### Firebug 使用教程详解 #### 一、简介与安装 **Firebug** 是一款非常流行的 Web 开发辅助工具,主要用于 Firefox 浏览器。这款工具能够帮助开发者在 Web 页面上实时进行 CSS、HTML 和 JavaScript 的调试及修改...

    firebug使用方法

    以下是对Firebug使用方法的详细介绍: 1. **安装Firebug** - 首先确保已经安装了Firefox浏览器。如果没有,需前往Firefox官网下载并安装。 - 打开Firefox,进入"工具"菜单,选择"附加软件",然后点击"获取扩展"。...

    firebug使用详解

    Firebug 使用详解 Firebug 是一款功能强大的 web 开发工具,由 Joe Hewitt 开发,能够实时编辑、调试和监测任何页面的 CSS、HTML 和 JavaScript。下面将对 Firebug 的使用进行详细介绍。 一、安装 Firebug ...

    FireBug使用方法

    【FireBug使用方法】 Firebug是一款由Joe Hewitt开发的集成在Firefox浏览器中的强大Web开发工具,它使得开发者能够实时地编辑、调试和监控任何网页的CSS、HTML和JavaScript。对于JavaScript的调试,特别是开发AJAX...

    Javascript的调试利器:Firebug使用详解

    Javascript的调试利器:Firebug使用详解

    firebug使用教程

    ### Firebug使用教程知识点概述 #### 一、Firebug简介 - **定义**:Firebug是一款功能强大的网页调试工具,最初作为Firefox浏览器的一个扩展而被广泛使用。它可以帮助开发者检查和修改网页元素、查看和控制...

    firebug使用说明合集

    在本文中,我们将深入探讨Firebug的各项主要功能及其使用方法。 一、HTML查看与编辑 1. HTML元素检查:在网页上点击右键,选择“检查元素”(或使用快捷键F12),Firebug会高亮显示当前鼠标位置对应的HTML元素。 2....

    Firefox最牛的插件-Firebug使用详解.pdf

    要使用Firebug,首先需要安装Mozilla Firefox浏览器。安装完Firefox之后,用户可以打开浏览器,在菜单栏上选择“工具”菜单下的“附加组件”选项。在打开的“附加组件管理器”窗口中,用户可以选择“获取扩展”按钮...

Global site tag (gtag.js) - Google Analytics