FireBug调试工具笔记

      Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件， 现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络情况监视器于一体，是开发 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不一样的角度剖析Web页面内部的细节层面， 给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。下面我们就来学习FireBug工具的使用。若有错，望提出修改意见。

1.编辑HTML

a.鼠标选中某个html元素，修改相关属性，便可在页面中动态的显示出来

b.点击小甲虫右侧的箭头按钮，就能够在页面中点击某个元素，FireBug中的就会定位到这个元素的html代码中。

固然，可使用快捷键。ctrl+shift+c若是须要查看或者修改快捷键的话，能够点击小甲虫图标，在弹出的菜单中选中“自定义快捷键”，在弹出的界面中查看和修改便可。

c，当须要编辑html代码的时候，咱们有两种方式，一种是双击html代码，便可对html代码进行修改，还有一种是右键，点击“编辑”页面，进入编辑页面，这个时候，咱们实时的编辑，变化都会反映在页面上。

2.处理css

在html代码的右侧，是css属性页面

a.点击html代码，便可看到他的css属性，咱们能够在样式中移动鼠标能够看到css样式中字体的大小，图片和颜色等。

双击css便可进行修改，若是须要添加样式，则只须要在空白的地方就能够新建样式，固然，咱们也能够禁用样式，当咱们用鼠标移动到样式上的时，点击出现的禁用按钮便可禁用样式。

若是要删除某些样式，则只要双击样式，样式变成可输入状态时，按住键盘delete键便可。

b.当咱们须要修改一些属性是数值的类型的样式的时候，咱们能够按住键盘的上下键，便可实现微调样式，省去咱们每次输入的时间。若是须要调整0.1个单位的话，那咱们只须要按住ctrl键，再用键盘上下键，便可实现数值样式的精度更细的微调。若是须要大幅调整的话，则只须要按住shift键，再用键盘上下键，就能够每次以10个单位调整。若是须要调整不少css代码，则只须要点击右侧的css，便可直接编辑css代码。

c.最右侧的计算出样式，能够看到计算出来的css样式。布局：咱们能够看到盒子模型的布局。DOM:咱们能够查看整个页面的DOM节点2事件：咱们能够查看当前页面中的事件。

3.评估页面下载的速度

点击firebug面板中的网络，在载入页面的时候，便可看到整个页面的网络状况。

在这个页面中，咱们能够看到每一个元素所下载的时间，请求方式，状态、html、css、js等等。

咱们能够经过时间线来评估整个页面的下载时间，咱们能够单击请求，便可查看这些请求的一些信息。请求头信息里，咱们能够看到请求头信息，响应头信息、和响应结果。

4.ajax请求

当咱们输入ajax请求的时候，XHR就能够监听每一次的ajax请求。

ajax中的参数就是咱们传入或者post的一些名字和字符，头信息是咱们请求的头信息。响应是从服务器中返回回来的咱们所接受到的信息。这些信息，在开发中咱们能够检查请求是否发出，结果是否返回，返回的结果是否如咱们的指望。

5.javascript控制台

a.javascript控制台中能够读取咱们在js代码中的命令。好比：

for(var i=0;i<10;i++)

{

console.log(i);//这样，每次i值的变化咱们均可以监听到

}

咱们也可使用这些信息

    console.error(i); //错误信息

    console.debug(i); //debug信息

    console.info(i);//详细信息

咱们也能够对日志信息进行分组：

console.group("first");

console.log("11111");

console.log("22222");

console.log("33333");

console.log("44444");

console.groupEnd();

console.group("second");

console.log("aaaa");

console.groupEnd();

当咱们须要显示一个对象的全部属性和方法的时候，咱们可使用：

console.dir();

如：console.dir(console);

当咱们须要测试某些代码的运行速度的时候咱们可使用console.time()函数来测试代码的运行速度：

6.js调试

当咱们须要调试咱们的代码的时候，咱们能够经过面板中的“脚本”来调试咱们的代码。

点击“脚本”，咱们能够看到咱们脚本的代码和当前的页面，咱们能够对脚本代码设置断点，对代码进行调试

在调试的时候，咱们能够点击断点，取消调试，

若是要查看函数的调用状况：咱们能够在函数中使用console.trace();

固然，咱们也可使用“归纳”来收集归纳信息，