Firebug是网页浏览器Firefox下的一款开发类插件。它集HTML查看和编辑、javascript控制台、网络状况监视器于一体，是开发javascript、CSS,HTML和Ajax的得力助手。
Paste_Image.png
以下是相关Firebug调试工具的知识点，希望对读者们有所帮助：
首先，需要了解如何<a>下载火狐浏览器的firebug插件:
（我的火狐版本）
Paste_Image.png
第一种方法
在火狐浏览器中，点击右上角--选择附加组件
Paste_Image.png
选择获取附加组件--选择查看更多附加组件
Paste_Image.png
在搜索框上搜索Firebug—选择Firebug右边的添加到Firefox
Paste_Image.png
右上角出现小虫标志就是安装成功插件（本人使用的是第一种方法）
Paste_Image.png
第二种方法：
Paste_Image.png
注意：按红色按钮是下载Firebug插件；下载完插件后，重新启动Firefox浏览器就可以使用
接着，介绍关于<a>web调试工具的一些知识点:
说明：安装好Firebug插件后，如何在Firefox浏览器打开和关闭web调试工具:
（1）可以按右上角小虫标志
（2）可以按快捷键F12
按ctrl+F12键打开新的窗口显示web调试工具
Paste_Image.png
控制台：
Paste_Image.png
HTML：
Paste_Image.png
Css:
Paste_Image.png
脚本:
Paste_Image.png
DOM:
Paste_Image.png
网络：
Paste_Image.png
Cookies:
Paste_Image.png
注意：点击左上角小虫标志可以显示下列框—可见面板（是否勾选—代表在调试面板里是否显示此面板)
Paste_Image.png
说明：每对应一个面板都有搜索框，如在HTML面板中，可以在搜索框中搜索对应的标签属性（如div），在HTML文件代码中div标签就会显示出来（灰色填充色就是）
Paste_Image.png
关于HTML面板说明：
选中对应的元素显示对应的源代码的方法：
第一种：
Paste_Image.png
说明：选中元素，按鼠标右键—选择使用Firebug查看元素（就可以选中对应的元素的源代码）
第二种：
Paste_Image.png
说明：可以点击左上角小虫标志隔壁那标志（点击查看页面中的元素)
效果图:
Paste_Image.png
关于调试工具中使用的一些<a>快捷键:
说明：点击右上角的小虫标志—自定义快捷键（弹出快捷键对话框)
Paste_Image.png
Paste_Image.png
Paste_Image.png
如何编辑HTML文件里的代码:
第一种方法:
(1)可以选中代码双击
Paste_Image.png
第二种
(1)可以点击鼠标右键—选择编辑HTML…
Paste_Image.png
进入到此页面:
Paste_Image.png
可以在此页面<a>直接编辑</a>，如图：在hao123后面加上456，页面随之改变
Paste_Image.png
Css面板：
Paste_Image.png
在HTML右侧显示相对于的样式
Paste_Image.png
可以双击代码编辑，然后按enter键就可以编辑成功
Paste_Image.png
例子
没改变源代码：
Paste_Image.png
改变源代码后：
Paste_Image.png
如何添加和删除样式：（可以在css面板中点击css源代码编辑）
Paste_Image.png
（也可以在html面板右边侧显示的样式编辑）如果需要添加新的样式，需要在代码右边空白地方双击就可以编辑，如图：
Paste_Image.png
例子：
（添加color样式）
Paste_Image.png
如何删除样式（双击需要删除的样式，然后按delete键删除就可以）
Paste_Image.png
如何设置禁用和取消样式：
当鼠标移到代码行上会出现禁用或者取消禁用代码的标志，点击一下就可以设置禁用或者取消禁用代码
Paste_Image.png
如何快速调整样式的大小：
(1)
Paste_Image.png
按上下键，可以快速调整大小（以个位递增）
(2)
Paste_Image.png
按ctrl+上下键，可以快速调整大小（以小数位调整）
(3)
Paste_Image.png
<p><strong><em>按shift+上下键，可以快速调整上下键（以十位数调整）</em></strong></p>
Html面板右侧还有其他面板显示：
计算出的样式
Paste_Image.png
布局
Paste_Image.png
DOM
Paste_Image.png
Events
Paste_Image.png
评估页面下载功能：
可以点击网络面板，如图:
Paste_Image.png
说明：可以查看全部，也可以单独点击html、css、JavaScript、XHR（即ajax）、图片、插件、媒体、字体查看（时间线就可以看到时间快慢）
我们可以点击里面的请求，显示出此请求的参数、头信息、响应、缓存,Cookies：
Paste_Image.png
Ajax监听：
在网络面板中的XHR（即ajax）：
Paste_Image.png
注意：每输入一个字母就会触发一个事件，因此显示更多请求
点击里面的请求，显示出此请求的参数、头信息、响应、缓存、Cookies
参数：是请求get或post中的一些名字或字符
头信息：是请求和回应的头信息
响应：是实际上从服务器中我们所接收到的信息
(这些功能对于编写和调试程序非常的有用)
Paste_Image.png
参数中的显示的就是搜索关键字：
Paste_Image.png
JavaScript控制台
Js文件：
Paste_Image.png
控制台显示的信息：
Paste_Image.png
说明：除了console.log(i);外，还有其他三种在控制台上显示的信息
Paste_Image.png
控制台显示的信息：
Paste_Image.png
可以在控制台右侧输入测试代码来运行：
Paste_Image.png
补充：
Paste_Image.png
有整数、浮点数、字符串
例子
利用整数和字符串
Paste_Image.png
分组：
console.group();
Paste_Image.png
运行console对象有哪些方法：
Paste_Image.png
Paste_Image.png
测试时间分钟：
console.time();
Paste_Image.png
JavaScript代码调试
脚本面板：
Paste_Image.png
这里可以看到所有代码：
Paste_Image.png
可以给代码设置断点：
Paste_Image.png
(红色的小圆圈就是设置断点)
设置后如图：（不在显示i--）
Paste_Image.png
补充：脚本面板右上角的四个标志：
第一个标志:是在cookie改变时中断
第二个标志:是单步进入
第三个标志:是单步跳过（F10）
第四个标:是单步退出（Shift+F11）
Paste_Image.png
监控面板：
说明：可以改变断点中相应的变量（双击对应值可以修改）
Paste_Image.png
想知道此函数是如何被调用，可以在js文件中加上<a>console.trace();</a>
Paste_Image.png
因此，可以在控制台中看到此函数被调到的情况
Paste_Image.png
也可以利用控制台的概况进行查看此函数调用的情况
Paste_Image.png
点击概况查看结果后
Paste_Image.png
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
网友评论