Firebug的简单认识

Firebug的简单认识

一个用于Web前端开发的工具，可用于调试JavaScript，查看DOM，分析CSS，监控网络流量以及进行ajax交互等

1. 安装firebug
   首先要下载firebox(新版本可能没有firebug)，下载完成后用firebox访问http://addons.mozilla.org/zh-CN/firebox/collection/mozilla/webdeveloper/
   进行下载安装，完成后还需要安装Firepath。安装方法：打开火狐浏览器→设置→附件组件→搜索→输入firepath

2. 强大的功能
   
   主面板:
   (1)控制台面板：用于记录日志，概览，错误提示和执行命令行，同时也用于ajax的调试 可用于记录日志，也可以用于输入脚本的命令行。
   firebug提高以下几个常用的记录日志的函数：
   ①console.log：简单的记录日志。
   ②console.debug：记录调试信息，并且附上行号的超链接。
   ③console.error：在消息前显示错误图标，并且附上行号的超链接。
   ④console.info：在消息前显示消息图标，并且附上行号的超链接。
   ⑤console.warn：在消息前显示警告图标，并且附上行号的超链接。
   使用方法
   ①在firefox浏览器开启firebug并运行HTML文档
   ②在右侧直接输入JavaScript代码执行，例如
   ③控制面板还可以进行ajax调试

var kid = '孩子',
count = '3',
man = 'Allen';
var sport1 = '篮球',
sport2 = '羽毛球',
sport3 = '网球';
console.log('%d个%s在玩游戏', count, kid);
console.log(count, '个', kid, '在玩游戏');
**************输出**************
var kid = '孩子', count = '3', man = 'Allen'; var s...nt, kid); console.log(count, '个', kid, '在玩游戏');
3个孩子在玩游戏
3 个 孩子 在玩游戏
*******************************

(2)HTML面板：用于查看HTML元素，可以试试的编辑HTML和改变CSS样式，包含三个子面板：样式、计算出的样式、布局、DOM和事件面板。
(3)CSS面板：用于查看所有页面上的CSS文件，可以动态地修改CSS样式
(4)脚本面板：用于显示JavaScript文件及其所在的页面，也可显示JavaScript的debug调试信息，包含三个子面板：监控、堆栈和断点
(5)DOM面板：用于显示页面上的的所有对象。
(6)网络面板：用于监视网络活动，可以帮助查看一个页面的载入情况，包括文件下载所占用的时间和文件下载出错等消息，也可以用于监视ajax行为。
(7)cookies面板：用于查看和调整cookie
(8)FirePath面板：用于精确定位网页中的元素，生成XPath或者是CSS查找路径表达式