Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console ）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。
Console 对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。
它被浏览器定义为 Window.Console，也可被简单的 Console 调用。
console.log()
console.log() 是我们调试代码最经常用到的，所以在这里先着重介绍这个。
1. 提示输出
可以在输出的对象变量前面加上提示信息，增加辨识度。逗号可以有无限多个
var name = 'Zhang San';
console.log('名字：: ', name);
图片.png
2. 格式化输出（占位符）
| 占位符 | 含义 |
|---|---|
| %s | 字符串输出 |
| %d / %i | 整数输出 |
| %f | 浮点数输出 |
| %o | 打印 javascript 对象，可以是整数、字符串以及 JSON 数据 |
var arr = ["小明", "小红"];
console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);
console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415);
图片.png
3. 自定义样式
使用 %c 为打印内容定义样式，在输出信息前加上 %c，后面写上标准的 css 样式，就可以为输出的信息添加样式了
console.log("%cMy stylish message", "color: red; font-style: italic");
console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
图片.png
分类输出
不同类信息的输出， 这几个方法的使用方式是一样的，也就是说 console.log 的一些骚操作，其他的也都可以使用。
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');
google下的表现.png
分组输出
使用 console.group() 和 console.groupEnd() 包裹分组内容。
还可以使用 console.groupCollapsed() 来代替 console.group() 生产折叠的分组。
console.group('第一个组');
console.group("1-1");
console.group("1-1-1");
console.log('内容');
console.groupEnd();
console.groupEnd();
console.group("1-2");
console.log('内容');
console.log('内容');
console.log('内容');
console.groupEnd();
console.groupEnd();
console.groupCollapsed('第二个组');
console.group("2-1");
console.groupEnd();
console.group("2-2");
console.groupEnd();
console.groupEnd();
图片.png
表格输出
使用 console.table 可以将传入的对象，或数组已表格形式输出。适合排列整齐的元素
var Obj = {
Obj1: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj2: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj3: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj4: {
a: "aaa",
b: "bbb",
c: "ccc"
}
}
console.table(Obj);
var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
]
console.table(Arr);
图片.png
条件输出
利用 console.assert() ，可以进行条件输出。
- 当第一个参数或返回值为真时，不输出内容。
- 但第一个参数或返回值为假时，输出后面的内容并抛出异常
console.assert(true, "你永远看不见我");
console.assert((function() { return true;})(), "你永远看不见我");
console.assert(false, "你看得见我");
console.assert((function() { return false;})(), "你看得见我");
图片.png
计次输出
使用 console.count() 输出内容和被调用的次数， 注意count只能输出 string 类型的字段，不能输出 object 的详细信息。
(function () {
for(var i = 0; i < 3; i++){
console.count("运行次数：");
}
})()
计时功能
使用 console.time() 和 console.timeEnd() 包裹需要计时的代码片段，输出运行这段代码的事件。
-
console.time()中的参数作为计时器的标识，具有唯一性。 -
console.timeEnd()中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。 - 最多同时运行10000个计时器
console.time("Chrome中循环10000次的时间");
for (var i = 0; i < 10000; i++) {
}
console.timeEnd("Chrome中循环10000次的时间");
图片.png
查看对象
使用 console.dir() 显示一个对象的所有属性和方法，在 Chrome 中 console.dir() 和 console.log() 效果相同，所以不建议使用
var CodeDeer = {
nema: 'CodeDeer',
blog: 'www.xluos.com',
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);
console.log("console.log(CodeDeer)");
console.log(CodeDeer);
查看节点
使用 console.dirxml() 打印 XML/HTML 元素表示的指定对象，或者 JavaScript 对象视图，console.log() 可以做到同样的效果，不建议使用。
追踪调用堆栈
使用 console.trace() 来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮你滤清。
function add(a, b) {
console.trace("Add function");
return a + b;
}
function add3(a, b) {
return add2(a, b);
}
function add2(a, b) {
return add1(a, b);
}
function add1(a, b) {
return add(a, b);
}
var x = add3(1, 1);
图片.png
网友评论