好象只要提到 Console 的功能, 大家最先想到的是 Firebug 或者是 Chrome. 但象我这种重度 Firefox 用户, 因为一些插件的原因, 离不开 Firefox , 所以也只能使用 Firefox 的这个功能,另外, 由于我 Blog 上的人都是运维和运维开发 ( 不会前端的运维不是好开发….^-^ ), 可能都不了解这些前端的知识, 所以根据别人 Chrome 的教程, 写了这个 Firefox 这个的教程. 让大家了解, 其实原生的 Firefox 的开发者工具也是相当不错, 和相当好用的.

最开始我们接触互联网早的人都知道, 我们是使用的 CGI 模型, 是 "HTML 内容", "响应的 Header" 和 "逻辑的程序" 完全是混在一起的, 非常难维护, 所以很多人见到就恶心. 后来就有了 MVC, 有了框架和模板技术之类, 在后来, 程序就只提供接口, 所有的界面 UI 完全分离. 只通过 JS 或者 JS 框架与之通信并生成网页, 所以我们非常需要了解的是 Js 到底做了些什么.

这时, Console 就出来了, 这个是个非常方便的调试用的工具, 从名字就能见到, 它是用于生成信息就展示给你的. 并能给一些结构和对象解析让你了解内部怎么工作的.

如果你没有安装 Firebug 之类的工具, 你直接在 Firefox 浏览器上按 F12 就能见到调去的开发者工具了, 你也可以通过右上角"三" 的图标点击"开发者", 也能打开.
然后我们看看强大的 baidu …..按了 F12 以后控制台显示什么.

呵呵, 你们想找个前端的工作吗? 从上面就能见到, 控制台主要作用有二种: 1. 是用于生成浏览器显示无关的信息 2. 用于 JS 和前端开发人员人员之间的沟通.

varsomeObject = { str: "Some text", id: 5 };
console.log(someObject);

会输出

Object { str: "Some text", id: 5 }

上面的控制台, 就是 Console 功能实现和显示信息的主要地方, 上面可以显示其它的一些报警和出错之类的信息. 我们正常的情况上, 只要打开上面的 "JS" 和 "日志" 选项. 你可以见到上面, 直接可以显示一些信息. 并且可以直接在其中写一些常用的 JS 的语法并执行查看结果.

这个最常用的功能就是打印信息了…常用的方式是 console.log("test log"). 当然也象其它程序一样, 有 console.debug 之类的信息.

console.log("Hello World")

必然, 这个不是主要功能, 比如, 他可以打印当前网页中的结构的部分内容.也可以支持 sprintf 一样的 %s %d %f 之类来显示字符，整数，小数。
显示 js 所执行的时间.
比较我们可以使用

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");<strong>
</strong>

显示中间代码所花费的时间。
还可以使用 console.groupEnd() 来配置 console.group 来生成层级的输出.

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

显示对象，ID 之类的内部有什么属性

varuser = document.getElementById('user');
console.dir(user);

另外有很多其它的好处，比如显示你 js 可以使用的函数名。

更多详细信息请看我翻译的在 Mozilla 上的中译版<<Web 控制台>>

建议继续学习：

1. Firefox的about 页面    (阅读：12877)
2. 给你的网站添加 console.js    (阅读：3377)
3. 十款Firefox插件帮助Web开发者提高效率    (阅读：3184)
4. Firebug Console API 与命令行    (阅读：3067)
5. 清除Firefox下Flash（swf文件）缓存    (阅读：2699)
6. 记开发firefox extension    (阅读：2448)
7. Firefox 常用插件推荐    (阅读：2262)
8. Debugging JavaScript：throw与console    (阅读：2082)
9. Firefox滚动残影    (阅读：2026)
10. 说说最近Google:safebrowsing引发页面加载阻塞的问题    (阅读：926)