Browser Console

2017-06-27

字数: 1.2k 阅读时长: 7mins 阅读次数: 次

分类： js

标签： bom test develop

console 对象提供对浏览器控制台的接入，最常用的是 console.log()，但是实际上 console 对象上还有很多有用的函数可以帮助调试。

使用 console 对象可以执行这些任务：

输出一个定时器来帮助简单的基准测试
输出一个表，以便于阅读的格式显示数组或对象
使用 CSS 将颜色和其他样式选项应用于输出

console 并不是标准的特性，在不同浏览器上的工作方式是不一样的，这里主要针对 Chrome 和 Firefox 介绍一些大都会提供的接口特性。

输出文本

这是最常用的一组接口，在各个框架也常使用的，在控制台输出日志，警告错误等。简单输出文本的接口有这四种：

log
info
warn
error

这四个接口的工作方法一致，接收多个参数，展示效果如下：

四种级别的日志输出，左边 Firefox 右边 Chrome

字符串替换

字符串替换允许使用其他内容替换输出中的指定字符串，比如：

console.log('string %s', 'substitutions');
// string substitutions

支持的字符串替换有以下几种：

%s ：使用字符串替换
%(d|i) ：使用整数替换
%(f|.nf) ：使用浮点数替换
%(o|O) ：元素被作为对象替换
%c ：应用提供的 css

看几个例子：

var obj = { hello: 'hello' }
console.log('this is an string %s', obj);
// this is an string [object Object] 
console.log('this is an object %o', obj);
// this is an object  Object { hello: "hello" }

console.log('int: %d, float: %f, float to int: %d', 1, 1.5, 1.5);
// int: 1, float: 1.500000, float to int: 1
console.log('format float: %.3f', 1.5);
// format float: 1.500

使用 %c 可以让文本呈现出指定的 css 样式，比如我们定义了成功的消息用红色背景，失败的消息用绿色背景：

const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
console.info('%c /dancing/bears was Successful!', success);
console.error('%c /dancing/bats failed!', failure);

带样式的日志输出，左边 Firefox 右边 Chrome

当然注意到样式在不同浏览器下有很大的差别，有些样式在其他浏览器并不被支持。

断言（console.assert()）

console.assert(assertion, obj1 [, obj2, …, objN])

如果断言为 false ，则将一个错误消息写入控制台，写入方式是 console.error 。如果断言是 true ，不执行任何操作。

let isTrue = false;
console.assert(isTrue, 'This will display');
// This will display

isTrue = true;
console.assert(isTrue, 'This will not');
// 什么都不输出

树形展示对象（console.dir()）

console.dir(object);

将一个 JavaScript 对象的属性和属性值显示成一个可交互的列表，点击折叠的小三角形可以查看各子属性的内容。

查看document.body对象结构，左边 Firefox 右边 Chrome

树形展示DOM 的 html 结构（console.dirxml()）

console.dirxml(object);

显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树。如果无法作为一个 element 被显示，那么会以 JavaScript 对象的形式作为替代。点击折叠的小三角形可以查看各子属性的内容。

查看document.body元素树，左边 Firefox 右边 Chrome

表格（console.table()）

console.table(object)

把数组或者对象用表格呈现：

console.table(['Javascript', 'PHP', 'Perl', 'C++']); // on firefox
console.table([['Javascript', 'PHP', 'Perl', 'C++']]); // on chrome

呈现效果如下：

数组表格呈现，左边 Firefox 右边 Chrome

使用表格查看对象：

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

呈现效果如下：

使用表格查看对象，左边 Firefox 右边 Chrome

限制列：

console.table(family, ["firstName"]);

限制列，左边 Firefox 右边 Chrome

分组（console.group()）

console.group(label)
console.groupCollapsed(label)
console.groupEnd(label)

在 Web 控制台上创建一个新的分组，随后输出到控制台上的内容都会被添加一个缩进，表示该内容属于当前分组,直到调用 console.groupEnd() 之后,当前分组结束。

console.group('outer');
console.log('I will output');
console.group('inner');
console.log('more indents')
console.groupEnd('inner');
console.log('ohh look a bear');
console.groupEnd('outer');

分组，左边 Firefox 右边 Chrome

console.groupCollapsed 创建一个默认折叠的分组。

计时（console.time()）

console.time(label)
console.timeEnd(label)

追踪某一操作的执行时间，使用 timeEnd 结束：

console.time('loop');
for(var i = 0; i < 100000000; i ++){};
console.timeEnd('loop');
// loop: 203.9521484375ms

计数（console.count()）

console.count(label)

输出 count() 被调用的次数。此函数接受一个可选参数 label。

var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
// bob: 1 
user = "alice";
greet();
// alice: 1 
greet();
// alice: 2 
console.count("alice");
// alice: 3

堆栈跟踪（console.trace()）

console.trace(obj1[, obj2…]);

从函数调用的位置输出一个调用堆栈追踪：

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

堆栈跟踪，左边 Firefox 右边 Chrome