打印到浏览器调试控制台

可以使用浏览器的调试控制台来打印简单消息。可以在浏览器中直接打开此调试或 Web 控制台 （ F12 大多数浏览器中的键 - 请参阅下面的备注以获取更多信息），可以通过键入以下内容来调用 console Javascript 对象的 log 方法：

console.log('My message');

然后，按下 Enter，这将在调试控制台中显示 My message。

console.log() 可以使用当前作用域中可用的任意数量的参数和变量进行调用。多个参数将打印在一行中，它们之间有一个小空格。

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

log 方法将在调试控制台中显示以下内容：

['string']  1  Object { test: 1 }  Window { /* truncated */ }

除了普通字符串，console.log() 还可以处理其他类型，如数组，对象，日期，函数等：

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

显示：

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

嵌套对象可能会折叠：

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

显示：

Object { key1: 'val', key2: Array[2], key3: Object }

某些类型（如 Date 对象和 functions）可能会以不同方式显示：

console.log(new Date(0));
console.log(function test(a, b) { return c; });

显示：

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

其他打印方法

除了 log 方法，现代浏览器也支持类似的方法：

• console.info - 小信息图标（ⓘ）出现在打印的字符串或对象的左侧。

• console.warn - 左侧出现小警告图标（！）。在某些浏览器中，日志的背景为黄色。

• console.error - 左侧出现小时间图标（⊗）。在某些浏览器中，日志的背景为红色。

• console.timeStamp - 输出当前时间和指定的字符串，但不是标准的：

  console.timeStamp('msg');
  

  显示：

  00:00:00.001 msg
  

• console.trace - 如果在全局范围内调用，则输出当前堆栈跟踪或显示与 log 方法相同的输出。

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  显示：

  first
  sec
  (anonymous function)
  

上图显示了 Chrome 版本 56 中的所有功能，但 timeStamp 除外。

这些方法的行为类似于 log 方法，并且在不同的调试控制台中可以呈现不同的颜色或格式。

在某些调试器中，可以通过单击打印文本或引用相应对象属性的小三角形（►）来进一步扩展单个对象信息。这些折叠对象属性可以在日志中打开或关闭。有关此内容的更多信息，请参见 console.dir