Jinyun's Notes

没什么天赋,爱好也不多,但愿坚持做些喜欢的事情

0%

JavaScript Console 之浏览器控制台

Chrome 几乎是最好的浏览器,是的,我一直这么认为,它的开发者工具也觉不含糊,来,试一试 Console

输出信息

输出日志信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 普通日志信息
console.log('this is a log');

// 简单样式的日志信息
var template = '%cHello World!', style = 'font-size: 30px; color: blue;';
console.log(template, style);

// 华丽样式的日志信息
var template = '%cHello World!', style = '';
style += 'background-image: -webkit-gradient(linear, left top, right top,';
style += 'color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),';
style += 'color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2),';
style += 'color-stop(0.9, #ff2), color-stop(1, #f22));';
style += 'color: transparent; -webkit-background-clip: text; font-size: 6em;)';
console.log(template, style);

// 图片日志信息
var style = 'padding: 150px 200px; line-height: 300px; background: url(http://www.wyzu.cn/data/uploadfile/200803/2008032812262650.gif) no-repeat;';
console.log('%c', style);

// 接受不定参数
console.log('%cHello World!', 'color: red;', 'JavaScript', 'Web Developer');

输出提示信息

1
console.info('this is a info');

输出警告信息

1
console.warn('this is a warn.');

输出错误信息

1
console.error('this is a error');

输出分组信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 普通组
console.group('App.log');
console.log('this is a group log.');
console.groupEnd();
console.group('App.info');
console.info('this is a group info.');
console.groupEnd();

// 组嵌套
var user = 'Atkinson', authenticated = true, authorized = true;
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated.", user);
console.group("Authorizing user '%s'.", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
console.groupEnd();
}
console.groupEnd();
console.log("A nested group log trace.");

// 折叠组
var user = 'Atkinson', authenticated = true, authorized = true;
console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated.", user);
console.groupCollapsed("Authorizing user '%s'.", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
console.groupEnd();
}
console.groupEnd();
console.log("A nested group log trace.");

字符串替换和格式

格式说明符的完整列表

占位符输出
%s格式的值作为一个字符串
%i%d格式的值为整数
%f格式的值作为一个浮点值
%o格式的值是一个可扩展的 DOM 元素, 在内容面板中看到的
%O格式的值是一个可扩展的 JavaScript 对象
%c应用 CSS 样式规则输出字符串的二参数指定
1
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

将 DOM 结点以 JavaScript 对象的形式输出到控制台

1
2
console.dir(document.body);
console.dir(document.body.firstElementChild);

输出表格信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 基本表格
var table = [
{'名称': 'MacBook Pro', '数量': 2, '单位': '台'},
{'名称': 'ThinkPad', '数量': 10, '单位': '台'},
{'名称': 'JavaScript 工程师', '数量': 2, '单位': '人'},
{'名称': 'PHP 工程师', '数量': 10, '单位': '人'}
];
console.table(table);

// 高级表格
function Person(name, email, age) {
this.name = name;
this.email = email;
this.age = age;
}
var language = {};
language.c = new Person('C', 'clang@gmail.com', 40);
language.php = new Person('PHP', 'php@gmail.com', 25);
language.java = new Person('Java', 'java@gmail.com', 30)
language.javascript = new Person('JavaScript', 'javascript@gmail.com', 20);
console.table(language, ['name', 'email', 'age']);

断言

1
2
3
// 代替三目运算,先对传入的表达式进行断言,只有表达式为假时才输出信息
var isDebug = false;
console.log(isDebug, '请稍候, 系统正在调试中...');

堆栈跟踪

1
2
3
4
5
6
7
8
9
function add(num) {
if (num > 0) {
console.trace('recursion is function:', num);
return num + add(num - 1);
} else {
return 0;
}
}
add(3);

计数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 统计某段代码执行了多少次
var Test = function() {
var testFunc = function() {
console.count('`testFunc()` 函数被执行的次数');
};
return {
init: function() {
testFunc();
}
};
};
var f = new Test();
f.init(); // `testFunc()` 函数被执行的次数:1
f.init(); // `testFunc()` 函数被执行的次数:2

统计任务耗时

1
2
3
4
5
6
console.time('Array initialize');
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
}
console.timeEnd('Array initialize'); // Array initialize: 1416.217ms

参考

本笔记是笔者在学习和工作中的一些整理,如对您有用,请鼓励我继续写作