菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

什么是 Firebug？

Firebug 是一个开源的web开发工具。

在本章教程我们将讨论以下内容：

安装 Firebug

Firebug下载地址： https://addons.mozilla.org/en-US/firefox/addon/1843/

使用Firefox浏览器访问以上下载地址，打开页面后，点击下载按钮后，会有个弹窗页面，提示安装的目录，安装后重启你的Firefox浏览器。

重启后就可以在Firefox浏览器中看到Firebug的图标。点击Firebug图标(位于Firefox浏览器右上角)即可激活Firebug插件。

firedebug

Firebug 组件

Firebug 选项

firebug-opitons

在页面上点击检查元素

firebug-inspect

撤销与恢复

go-back-forward

显示命令行

show-command-line

面板选择

panel-selector

控制台

console-and-enabling-it

HTML 面板

HTML-panel

CSS 面板

CSS-panel

脚本面板

Script-panel

DOM 面板

DOM-panel

网络面板 (用于网页测速和优化)

Net-panel

其他按钮

other-buttons

1 - 最小化Firebug。
2 - 在浏览器窗口安装Firebug。
3 - 停用Firebug。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

使用Firebug查看和编辑HTML和CSS

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

描述

在本章节的教程中，我们将讨论如何使用Firebug查看和编辑HTML和CSS。

使用Firebug查看和编辑HTML

在你要查看的元素上右击鼠标然后点 Inspect Element(查看元素).

inspect-html-firebug

现在在Firebug窗口上点击Edit（编辑） 。

修改代码 <h1>Components of Firebug</h1> .

inspect-html-firebug2

你只要在Firebug窗口上修改代码就能实时的查看修改后代码在浏览器上的显示效果，你也可以复制代码到你的HTML文件中。

使用Firebug查看和编辑Css

鼠标右击你要查看的元素然后点击Inspect Element(查看元素)。如下图所示点击样式文件

inspect-css-firebug

通过修改代码为 color:red; 来修改标题颜色

修改完成后你可以马上看到修改后的效果。

现在你可以复制修改后的样式，取代原有的代码并保存，使之生效：

inspect-css-firebug2

Firebug 教程

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

使用 Firebug 调试 JavaScript

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

描述

Firebug是一个非常强大的工具，可以帮助您发现代码发现错误的错误并解决错误。

在此我们使用Firebug来处理Javascript代码。

首先我们需要加载页面并打开Firebug。

有时候您需要重新载入页面。

在状态栏的错误数

显示当前页面的错误

显示错误的详细信息

debug-javascript-firebug2

一步步调试代码

你可以一步步的执行代码。这对代码调试非常有用。

debug-javascript-firebug6

使用断点调试

断点调试可以终止代码的执行，你可以通过指定代码范围来查看错误是不是在指定代码范围内。这对于错误调试很有用。

如果你点击"Step over（单步跳过）" 按钮, Firebug 会更新所有变量直到你在右侧窗口中终止断点执行。

debug-javascript-firebug3

使用表达式让断点工作

你可以写一个表达式，在条件为真时，断点会停止代码的执行。

debug-javascript-firebug4

搜索

你可以使用快速搜索来查找代码中的关键字。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

Firebug页面概况查看

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

使用Firebug的概况，你可以测试Web页面导致延迟加载的文件。

通过打开页面 Firebug > Console（控制台）> Profile（概况）。

你需要重新加载页面，然后点击"概况"查看页面载入情况。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

Firebug动态执行JavaScript

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

您可以使用Firebug来编写并实时执行一个JavaScript。

这是为了测试，并确保该脚本工作正常，这是将JavaScript代码部署在生产环境前的好方法。

打开Firebug > Script(脚本) > 显示命令行，代码如下所示：


alert("w3cschool.cc")

execute-js-1

按Enter键后，马上你就能看到代码的输出。如图所示：

execute-js-2

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

Firebug监控网络情况

Firebug记录Javascript日志

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

你可以使用Firebug来生成日志。

这有助于我们调试web页面并发现页面的错误。

在Firefox浏览器中执行以下代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Firefox测试页面 - w3cschool菜鸟教程</title>

</head>

<body>

<script type="text/javascript">

var a = "w3cschool";

var b = ".cc";



document.write(a,b);

console.log(a + b);

</script>

</body>

</html>

使用Firefox浏览器打开以上代码文件firefox-test.html,执行结果及日志记录如下：

firedug-console

Firebug监控网络情况

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

Firebug 教程

Firebug监控网络情况

Firebug 官网宣布已停止继续开发、更新维护 Firebug 的通知，邀请大家使用 Firefox 内置工具 DevTools。

Firebug可以监控网页中每个文件加载的时间。

打开Firebug。点击"网络"，然后确定已经启用，重新载入当前页面。Firebug显示如下所示：

firefox-net

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦