Firebug

Firebug是网页浏览器火狐下的一款开发类插件，它集HTML查看和编辑、JavaScript控制台、网络状态监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。F12打开firebug。

HTML

1.快速定位网页元素：ctrl+shift+c 或 “小甲虫”旁边的屏幕箭头 2.快捷键设置：“小甲虫”下拉选项中的“自定义快捷键” 3.在HTML上上有若干节点，点击即可定位到相应节点

可以修改HTML和CSS内容。立即实现。

CSS

查看、修改CSS、禁用CSS、添加CSS（在空白处双击即可）

需要微调样式比如字体大小等，点击一下然后上下键调整。

点击右边链接，直接可以进入CSS编辑页。

可以查看布局。

评估页面下载速度

网络功能： 1、分类别的查看下载文件和http请求 2、可以查看http请示的详细信息，是否成功、是否缓存、请求参数、响应的结果等

Ajax监听

网络下的XHR：输入字符就会有请求参数，包含关键字参数，返回结果是下列的html代码。 当页面向服务器发送get或post请求是，它会监听这些请求，并在firebug下罗列起来。其中参数就是我们请求的字符或者名字（键值对）。响应是从服务器中回复的信息。

JavaScript控制台

就是你在js页面中写入console.log()控制台会输出信息。并且在右边可以直接写入运行jS。

console.info（）/debug（）/warn（）/error（） //信息/调试/警告/错误 console.group（）、console.groupEnd（） //输出信息分组 console.dir（） //显示所有对象的属性和方法 console.time（）/console.timeEnd（） //时间跟踪,记录代码运行时间 console.time(); console.timeEnd();<br> console.group()<br> %d - 数字，%f - 浮点数，%s - 字符串，%o - 对象 console.info（）/debug（）/warn（）/error（） //信息/调试/警告/错误<br> console.group（）、console.groupEnd（） //输出信息分组<br> console.dir（） //显示所有对象的属性和方法<br> console.time（）/console.timeEnd（） //时间跟踪,记录代码运行时间

JavaScript代码调试

1、查看JS代码，设置断点（点击左侧行号即可） 2、调试js功能代码 F8：继续 F10:单步跳过 F11：单步进入 Shift+F11：单步退出 3、console.trace()可以知道函数如何被调用

点击概况 等待页面执行完毕 再次点击概况，就会显示函数被调用时的一些参数信息

了解一个工具，点击所有可以点击的地方，右键所有可以右键的地方，点击下拉菜单。

类似的平台有火狐谷歌的开发者平台，取其所长。