Firebug是网络浏览器firefox下的开发插件。 它集成了 HTML 查看和编辑、JavaScript 控制台和网络状态监视器。 是开发javascript、CSS、HTML、Ajax的得力助手。

一、窗口介绍

控制台:JavaScript命令行运行,显示JS错误信息、提示信息、日志信息

HTML:显示页面的HTML源代码

CSS:编辑页面的CSS源代码

脚本:显示页面脚本和调试

DOM:显示页面对象和DOM属性

网络:显示页面下载和花费的时间

Cookies:显示页面请求的cookies,以及查看和修改(启用和禁用)

注意每一个可点击的地方都是点击,右键点击,点击下拉菜单,主菜单

2.查看元素的两种方式

将鼠标移到网页的某个控件上,右键单击,使用firebug查看该元素

在firebug中,点击“点击查看页面上的元素”按钮,然后将鼠标滑动到web中相应的控件上,然后点击左键

3.HTML源码查看

右侧可以显示CSS样式

可以定位、调试和修改页面

4.网络

304 表示文件已缓存在本地:这表示请求的资源在客户端的缓存仍然有效,也就是说该资源自上次缓存后没有被修改过。 条件请求可用于确保客户端的资源保持最新火狐浏览器无法打开网页,同时避免每次请求完整资源而导致服务器性能问题。

5. XHR:监控ajax使用请求

AJAX 概述: 通过使用 AJAX,JS 可以通过 JS 的 XML HttpRequest 对象直接与服务器通信。

通过使用 HTTP 请求火狐浏览器无法打开网页,网页可以在不加载页面的情况下向服务器发出请求并从服务器获得响应。 用户可以停留在同一页面上,他或她不会注意到脚本正在请求页面或在后台向服务器发送数据。

例如:百度输入一些字符,无需点击页面搜索按钮,直接返回返回结果

6.控制台

以JS调试为例,输入console.dir(console):

各个浏览器的开发者调试工具侧重点不同,需要了解各自的优缺点,按需使用。 比如chrome工具在性能监控和资源查看方面更有优势。