WEB调试工具

Firebug是网页浏览器Firefox下的一款开发类插件。它集HTML查看和编辑、javascript控制台、网络状况监视器于一体，是开发javascript、CSS,HTML和Ajax的得力助手。

Paste_Image.png

以下是相关Firebug调试工具的知识点，希望对读者们有所帮助：

首先，需要了解如何下载火狐浏览器的firebug插件:
（我的火狐版本）

Paste_Image.png

第一种方法

在火狐浏览器中，点击右上角--选择附加组件

Paste_Image.png

选择获取附加组件--选择查看更多附加组件

Paste_Image.png

在搜索框上搜索Firebug—选择Firebug右边的添加到Firefox

Paste_Image.png

右上角出现小虫标志就是安装成功插件（本人使用的是第一种方法）

Paste_Image.png

第二种方法：

Paste_Image.png

注意：按红色按钮是下载Firebug插件；下载完插件后，重新启动Firefox浏览器就可以使用

接着，介绍关于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

关于调试工具中使用的一些快捷键:
说明：点击右上角的小虫标志—自定义快捷键（弹出快捷键对话框)

Paste_Image.png

Paste_Image.png

Paste_Image.png

如何编辑HTML文件里的代码:
第一种方法:
(1)可以选中代码双击

Paste_Image.png

第二种
(1)可以点击鼠标右键—选择编辑HTML…

Paste_Image.png

进入到此页面:

Paste_Image.png

可以在此页面直接编辑，如图：在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

按shift+上下键，可以快速调整上下键（以十位数调整）

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文件中加上console.trace();

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