使用console调试JavaScript（一）

一、console介绍

Console 是浏览器用于显示JS和 DOM 对象信息的单独窗口。向 JS中注入1个 console 对象，使用该对象可以输出信息到浏览器的Console 窗口中。使用它调试JS程序，可以极大地提升工作效率。

二、基本用法

1、安装Firebug

使用Firefox浏览器，打开右上角菜单栏面板，点击“附加组件”，然后搜索Firebug，下载安装即可。对于其他浏览器，可以去官网下载Firebug lite版本。

2、打开和关闭Firebug

1. 打开Firebug，按键F12，或者点击浏览器窗口的Firebug图标，如下：
   

2. 关闭Firebug，按键F12，或者点击Firebug窗口的关闭按钮。

3. 打开Firebug单独窗口，点击Firebug页面的如下图标。将单独窗口恢复为浏览器页面嵌入窗口，也点击该图标。
   

4. 增加/缩小字体大小：先打开Firebug，操作如下图，可以进行多次。
   

3、Firefox窗口

• Console（控制台）： 主要使用JS命令行操作，可以选择显示JS的数据信息，在底部的>提示符后，可以自己键入并运行JS命令，该命令行窗口可以设置在Firebug单独窗口的右部。

• HTML： 显示HTML源码，格式遵循等级结构，每行之前有缩进。你可以选择显示或不显示某个子节点。点击窗口左部的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。在窗口右部你可以看到选中节点的样式、布局等详细信息，它们都可以用单击或双击进行编辑。当你编辑完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。点击如图中的红色圆圈，可以注释该行代码。

• CSS：浏览所有已经载入的样式表，可以直接对其修改。

• Script（脚本）： 显示Javascript文件及其所在页面，你可以设置断点及其出现的条件。如图所示，绿色框内的下拉列表列出了本页面所有的js文件，你可以选择一个浏览。红色框“{ }”的作用上格式化显示JS代码。窗口还提供监控、查看堆栈、断点调试功能。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。
  

• DOM： 显示所有的页面对象和window物体的属性。因为在Javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变量和它们的值。Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。

• Net（网络）：显示本页面涉及的所有下载，以及它们各自花费的时间，各自的HTTP请求头信息和服务器响应的头信息。XHR标签对AJAX调试很有用。Net标签中的XHR功能，对查看AJAX操作特别有用。如果你点击每个服务器端回应前的加号，你就会看到服务器端回应的头信息和内容。当通过XMLHttpRequest对象向服务器端发出一个请求时，Firebug会记录请求的POST或GET内容，以及回应的头信息和内容。使用Net标签中的XHR功能，就可以看到这些内容。它会列出所有服务器的回应，以及所花费的时间。
  

• COOKIEs：可以查看COOKIE中的数据信息。

附注
AJax：Firebug的核心功能之一，可以使AJAX的请求和回应可见。有了它，你可以看到送出的和收到的文本，已经相应的头信息。在“网络”窗口中，你还能监控每个请求/回应各自所花费的时间。