Console 相关方法使用
Console 相关方法使用
1. console.log()
作用：打印日志
console.log("hello world");
// hello world
2. console.info()
作用： 控制台输出一条普通信息（Chrome 浏览器中与 log 相同，其他浏览器在信息前会出现感叹号！）
console.info("info - console 使用");
// info - console 使用
3. console.debug()
作用： 控制台输出一条调试信息
注意： 浏览器默认会隐藏调试信息，需要手动开启，开启后效果与 log 相同。console.debug 属于 Verbose 类型信息，级别很低。
console.debug("debug - console 使用");
// 正常情况下,浏览器控制台不会有输出,需要手动开启
4. console.warn()
作用： 输出警告信息，信息最前面加一个黄色三角，表示警告（常用于底层框架或插件中，在浏览器为开发者抛出警告信息）
console.warn("warn - console 使用");
5. console.error()
作用： 输出错误信息，信息最前面加一个红色，表示错误（常用于底层框架或插件中，在浏览器为开发者抛出错误信息）
console.error("error - console 使用");
6. console.clear()
作用： 清除控制台上的信息（该方法在执行成功后，会在控制台输出: “Console was cleared”）
console.warn("warn - console 使用");
console.error("error - console 使用");
console.clear();
// 已清除控制台 (最后输出)
7. console.table()
作用： 以表格形式显示数据（数组对象使用该方法打印更利于观察，表格列还支持排序）
let data = [
{ name: "coco", age: 18, sex: "男" },
{ name: "jack", age: 19, sex: "男" },
{ name: "小明", age: 19, sex: "男" },
{ name: "小红", age: 18, sex: "女" },
{ name: "小芳", age: 19, sex: "女" },
{ name: "小钱", age: 19, sex: "女" },
];
console.table(data);
/*
'┌─────────┬────────┬─────┬──────┐
│ (index) │ name │ age │ sex │
├─────────┼────────┼─────┼──────┤
│ 0 │ \'coco\' │ 18 │ \'男\' │
│ 1 │ \'jack\' │ 19 │ \'男\' │
│ 2 │ \'小明\' │ 19 │ \'男\' │
│ 3 │ \'小红\' │ 18 │ \'女\' │
│ 4 │ \'小芳\' │ 19 │ \'女\' │
│ 5 │ \'小钱\' │ 19 │ \'女\' │
└─────────┴────────┴─────┴──────┘'
*/
8. console.group( )、console.groupEnd( )
作用： 在控制台创建一个信息分组。（默认展开）
注意： 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
console.group("男");
console.log("小明");
console.log("小刚");
console.log("小强");
console.groupEnd("男");
console.group("女");
console.log("小红");
console.log("小芳");
console.log("小钱");
console.groupEnd("女");
/*
男
小明
小刚
小强
女
小红
小芳
小钱
*/
9. console.groupCollapsed( )、console.groupEnd( )
作用： 在控制台创建一个信息分组。（默认折叠）
console.groupCollapsed("男");
console.log("小明");
console.log("小刚");
console.log("小强");
console.groupEnd("男");
console.groupCollapsed("女");
console.log("小红");
console.log("小芳");
console.log("小钱");
console.groupEnd("女");
/*
> 男 ...
> 女 ...
*/
10. console.dir( ) (打印对象结构)
作用： 打印对象结构。（该方法对于输入 DOM 对象非常有用，会显示 DOM 对象所有属性）
注意： dir() 方法只能有一个参数
- 如果将需要打印的对象结构放在第二个参数, 则该对象结构无法被打印
let hDom = document.querySelector("h1");
console.dir(hDom);
// 会打印出 h1 标签的所有属性
console.dir(hDom, "dir"); // 日志 'dir' 打印不出来
console.dir("dir", hDom); // h1 标签属性打印不出来
11. console.time( )、console.timeEnd( )
作用： 计时器，time( )与 timeEnd( ) 联合使用，用于算出一个操作所花费的准确时间。
注意: time( ) 方法必须传入一个唯一的参数作为计时器的名称，timeEnd( ) 方法的唯一参数也必须是计时器名称。
- time( ) 与 timeEnd( ) 必须成对出现，否则计时器无法工作
console.time("for循环操作时间");
let i = 0;
for (i = 0; i < 100; i++) {
i += i;
}
console.log("for 循环执行结果", i);
console.timeEnd("for循环操作时间");
// for循环操作时间: 0.126953125 ms
console.time("开始时间:");
let i = 0;
for (i = 0; i < 100; i++) {
i += i;
}
console.log("for 循环执行结果", i);
console.timeEnd("结束时间:");
// 因为开始/结束 传入的计时器名称不一致,所以 控制台会有报警信息,且无法计算时间
12. console.count( )
计数器，记录 count( )调用次数，一般用于观察函数执行次数。
for (let i = 0; i < 6; i++) {
console.count("count 计数");
}
/*
count 计数: 1
count 计数: 2
count 计数: 3
count 计数: 4
count 计数: 5
count 计数: 6
*/
13. console.trace( )
作用： 显示当前执行的代码在堆栈中的调用路径。（会展示此方法被调用的顺序）
function trace() {
function test() {
console.trace("trace - console");
}
test();
}
trace();
/*
trace - console
at test (index.js:10)
at trace (index.js:14)
*/
14. console.assert( )
作用： 如果断言为 false，则在信息到控制台输出错误信息；如果断言为 true，不会输出任何信息。
console.assert(1 == 1); // 不会输出任何信息
console.assert(1 == 2); // 控制台会报错 ` 声明失败:console.assert `
原文地址：https://blog.csdn.net/i_Satan/article/details/142335088
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！