WEB 调试神器 -- Firebug

以下是来自慕课网--《WEB 调试神器 -- Firebug》的学习总结

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

1.下载安装

    a.下载安装火狐浏览器！

    b.然后，添加组件

    c.搜索firebug，并安装

    d.f12 啊亲，firebug在浏览器下方就显示啦！

2.操作界面

控制台：js 命令行操作，显示js错误信息、提示信息、日志信息。右侧可以自己输入创建自己的js

HTML：显示页面的源代码，并且支持修改

CSS：显示页面的CSS源码，支持修改

脚本：显示页面的脚本，支持调试

DOM：显示页面的对象和DOM属性

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

Cookies：显示页面请求的Cookies，支持修改

上述的标签，启用的是黑色，未启用时灰色。具体的还有很多的细节，比如最左边的小甲虫，点击有惊喜，可以设置firebug 很多的东西的！

3.HTML 、CSS 、网络标签就不在这里详细介绍了。

4.网络标签中的XHR，即是Ajax 监听啦。你想试一下？试一试打开www.baidu.com，打开firebug，看看当你在搜索框输入内容时XHR 的信息显示的变化吧！

5.我要放大招啦！那就是最重要的firebug 的功能啦！js 调试！

a.首先啊来学习一个基本的函数信息：console... 当你在js 代码中加入这个，在控制台就能打印出信息了，对于变量啊执行的函数的效果啊，这是很好的查看运行效果的函数！试一试在程序中加入一下的代码，并运行看看控制台的信息吧！

var i =0;
console.log(i);
console.info(i);
console.debug(i);
console.warn(i);
console.error(i);

b.在控制台右边有一个代码调试填写的区域，可以在这里直接写自己的调试的代码，点击运行将进行代码的调试运行。

6.可以玩的地方都点击着试试啦，还有鼠标右键啊什么啊，多试一试！

还有话要说：我感觉，我用了很久的谷歌自己的调试器啊，还有火狐本身对开发者的调试工具好像也够用了额，不知道这个插件其实厉害在哪里，可能是我没有研究透吧。

还有话想要说：介绍一个在线好玩的开发工具：https://codepen.io/