JavaScript 打印到浏览器的调试控制台

示例

可以使用浏览器的调试控制台来打印简单消息。可以在浏览器中直接打开此调试或Web控制台(F12大多数浏览器中的键-有关更多信息,请参见下面的备注),并且可以通过键入以下命令来调用Javascript对象的log方法console:

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 }


某些类型(例如Dateobject和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–小信息图标(。)出现在打印的string(s)或的左侧object(s)。

  • console.warn–左侧出现小警告图标(!)。在某些浏览器中,日志的背景为黄色。

  • console.error–小时间图标(times)出现在左侧。在某些浏览器中,日志的背景为红色。

  • 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)

上图显示了timeStampChrome版本56中的所有功能,但除外。

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

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