# Firebug 教程 ## 什么是 Firebug? **Firebug** 是一个开源的web开发工具。 在本章教程我们将讨论以下内容: * 如何安装 Firebug。 * [使用 Firebug 检查和编辑 HTML。](firebug-html-css.html "使用 Firebug 监控网络") * [使用 Firebug 检查和编辑 CSS。](firebug-html-css.html "使用 Firebug 监控网络") * [使用 Firebug 调试 JavaScript。](firebug-javascript-debug.html "使用 Firebug 监控网络") * [在 Firebug 中动态执行 JavaScript。](firebug-execute-javascript.html "使用 Firebug 监控网络") * [使用 Firebug 记录 Javascript日志。](firebug-console.html "使用 Firebug 监控网络") * [使用 Firebug 监控网络。](firebug-net.html "使用 Firebug 监控网络") ## 安装 Firebug Firebug下载地址: https://addons.mozilla.org/en-US/firefox/addon/1843/ 使用Firefox浏览器访问以上下载地址,打开页面后,点击下载按钮后,会有个弹窗页面,提示安装的目录,安装后重启你的Firefox浏览器。 重启后就可以在Firefox浏览器中看到Firebug的图标。点击Firebug图标(位于Firefox浏览器右上角)即可激活Firebug插件。 ![firedebug](https://box.kancloud.cn/2015-12-13_566d21cdb80db.jpg) ## Firebug 组件 ### Firebug 选项 ![firebug-opitons](https://box.kancloud.cn/2015-12-13_566d21ce58046.png) ### 在页面上点击检查元素 ![firebug-inspect](https://box.kancloud.cn/2015-12-13_566d21ce734e2.jpg) ### 撤销与恢复 ![go-back-forward](img/go-back-forward.png) ### 显示命令行 ![show-command-line](https://box.kancloud.cn/2015-12-13_566d21cf6997b.png) ### 面板选择 ![panel-selector](https://box.kancloud.cn/2015-12-13_566d21cfa5254.png) ### 控制台 ![console-and-enabling-it](https://box.kancloud.cn/2015-12-13_566d21d00bf12.png) ### HTML 面板 ![HTML-panel](https://box.kancloud.cn/2015-12-13_566d21d062d90.png) ### CSS 面板 ![CSS-panel](https://box.kancloud.cn/2015-12-13_566d21d07264d.png) ### 脚本面板 ![Script-panel](https://box.kancloud.cn/2015-12-13_566d21d0e7320.png) ### DOM 面板 ![DOM-panel](https://box.kancloud.cn/2015-12-13_566d21d165e70.png) ### 网络面板 (用于网页测速和优化) ![Net-panel](https://box.kancloud.cn/2015-12-13_566d21d205f86.png) ### 其他按钮 ![other-buttons](https://box.kancloud.cn/2015-12-13_566d21d21f0d1.png) * 1 - 最小化Firebug。 * 2 - 在浏览器窗口安装Firebug。 * 3 - 停用Firebug。