javascript Console控制台调试开发

参考网站：http://javascript.ruanyifeng.com/tool/console.html#toc3 

参考博客：http://www.cnblogs.com/shenqi0920/p/3217765.html

学习网站：http://javascript.ruanyifeng.com/stdlib/json.html

                http://www.cnblogs.com/rubylouvre/

1.经常使用的Console系列函数有:

console.log()，console.info()，console.debug(),console.warn()，console.error()，对应着某些要输出内容的级别，至关于log日志同样。
特色：
①其实这些方法的实现中，参数由arguments获取，所以能够传递1个或者多个参数, 如  console.log({age:20});  console.log(1,2,4);
②参数的第一个参数能够是格式化占位符，console.log(" %s + %s = %s", 2, 2, 2)，或者 console.log(" %s + %s = ", 1, 1, 2)

2.这里列出全部可能的占位符

%d, %i	整数
%f	浮点数
%o	对象的连接
%c	CSS格式字符串
%s	字符串

首先来看2个例子，都是google开发者工具（猛摁电脑功能键F12）,在控制台的输出

facebook
   

baidu
   

3.代码分析

咱们如今只看百度的源代码就好了

这是图片的

if(window.console){var c=console,r=t("#search-box .logo");c&&r.size()&&(c.log("\n\n%c","font-size:0;line-height:50px;padding-top:"+r.height()+"px; padding-left:"+r.width()+"px;background:"+r.css("background")+";background-repeat:no-repeat;")

文字的就不粘贴了，基本全是 utf-8转义字符

额，貌似不够流畅，转换一下吧

if (window.console) {
    var cons = console;
    if (cons) {
        cons.log("%c\n\t   ", "font-size:41px;background:url('http://cdn.iknow.bdimg.com/static/common/pkg/module_zed9cd9fd.png') no-repeat -135px -1px");
        cons.log('想和咱们共同打造世界最大中文互动问答平台吗？\n想让本身的成就在亿万用户面前展示吗？想让世界看得你的光芒吗？\n加入咱们，在这里不只是工做，投入你的时间和热情，滴滴汗水终会汇聚成不平凡的成果。\n期待你的加盟。www.baidu.com');
        cons.log("请在邮件中注明%c来自:console", "color:red;font-weight:bold;");
    }
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.使用console.table输出表格

var user = [
   { name: "zhangsan", age: 20,id:1024 },
   { name: "lisi", age: 22,id:1023 },
   { name: "wangwu", age: 23,id:1025 },
];

console.log(user);

5.console.dir(object) 打印对象信息，类PHP中的var_dump函数和python中的dir函数

var user = [
   { name: "zhangsan", age: 20,id:1024 },
   { name: "lisi", age: 22,id:1023 },
   { name: "wangwu", age: 23,id:1025 },
];

var strUser = JSON.stringify(user);

console.dir(user);

console.dir(strUser);

6.断言console.assert()，相似java中的断言

7,console.time(tag)，console.timeEnd(tag)耗时计算

var tag = 'task name';
console.time(tag);
for(var i=1;i<=9;i++)
{
    for(var j=1;j<=i;j++)
    {
        console.log(document.createTextNode(j+'*'+i+'='+(i*j)))
    }
}
console.timeEnd(tag)

8.console.clear()清除控制台

9.console.trace()打印代码调用的堆栈信息

10.console.dirxml(obj)

11.设定断点

for(var i = 0;i<5;i++){
    console.log(i);
    if (i===2) debugger;
}

12.性能测试

13.控制台命令（非javascript命令）

$_属性返回上一个表达式的值。
$$(selector)返回一个选中的DOM对象，等同于document.querySelectorAll。
$x(path)方法返回一个数组，包含匹配特定XPath表达式的全部DOM元素。
keys(object)方法返回一个数组，包含特定对象的全部键名。
values(object)方法返回一个数组，包含特定对象的全部键值。
inspect(object)方法打开相关面板，并选中相应的元素：DOM元素在Elements面板中显示，JavaScript对象在Profiles中显示
getEventListeners(object)方法返回一个对象，该对象的成员为登记了回调函数的各类事件（好比click或keydown），每一个事件对应一个数组，数组的成员为该事件的回调函数。
monitorEvents(object[, events]) ，unmonitorEvents(object[, events])
monitorEvents(object[, events])方法监听特定对象上发生的特定事件。当这种状况发生时，会返回一个Event对象，包含该事件的相关信息。unmonitorEvents方法用于中止监听。

14.js合并压缩

Google Closure是Google提供的一个JavaScript源码处理工具，主要用于压缩和合并多个JavaScript脚本文件。

java -jar /path/to/closure/compiler.jar --js script1.js --js script2.js --js script3.js