我当初在调试代码的时候根本用的都是console.log() 调试法，尽管低级，但好用呀。当然，遇到简单点的就会借助其它工具，但日常开发中 console.log() 根本够用了。

前缀铺垫的差不多了，明天咱们来看看 console.log() 中还有哪些花里胡哨的写法。

1. 用ES6解构赋值输入变量名

如果打印多个值的，为了区别咱们个别会连同变量名打印进去:

const variableX = 42;console.log('variableX:', variableX);// 或者console.log(`variableX: ${ variableX }`);

其实，还有一种很简洁的形式就是应用解构的形式：

const variableX = 42;console.log({ variableX }); // { variableX: 42 }

2. 应用适当的打印类型

console.log() 个别这样用：

console.log('no-frills log message');

但它不是惟一的类型。音讯能够被归类为information （其解决形式与console.log()雷同）。

console.info('this is an information message');

正告：

console.warn('I warned you this could happen!');

谬误：

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

或不太重要的调试信息:

console.debug('nothing to see here - please move along');

console.table()能够以更敌对的格局输入对象的值。

const obj = {    propA: 1,    propB: 2,    propC: 3  };console.table( obj );

或对象的数组:

const arr2 = [    { a: 1, b: 2, c: 3 },    { a: 4, b: 5, c: 6 },    { a: 7, b: 8, c: 9 }  ];console.table( arr2 );

其余选项包含:

  • console.dir( obj ) 显示一个 JS 对象的交互式属性列表
  • console.dirxml( element ) 显示指定的HTML或XML节点的子代元素的互动树。
  • console.clear() 革除控制台之前的所有信息。

3.过滤日志音讯

浏览器以适当的色彩显示日志信息，但也能够进行过滤，以显示特定的类型。点击控制台窗格左上方的图标，就能够关上Chrome的侧边栏。

留神，console.debug()信息只有在查看 verbose 选项时才会显示。

4. 应用 printf-type  的信息

所有的日志类型都能够应用c 语言格调的printf音讯格局，该格局定义了一个模板，其中蕴含一个变量被替换的%指示器。例如

console.log(  'The answer to %s is %d.',  'life, the universe and everything',  42);// The answer to life, the universe and everything is 42.

带款式的格调

console.log(  '%cOK, things are really bad now!',  `  font-size: 2em;  padding: 0.5em 2em;  margin: 1em 0;  color: yellow;  background-color: red;  border-radius: 50%;  `);

控制台中的后果:

6. 应用相似测试的断言

相似于测试的console.assert()命令能够用来在条件失败时输入一个信息。能够用一个条件和一个或多个对象来定义断言，当该条件失败时输入，例如

console.assert(  life === 42,  'life is expected to be',  42,  'but is set to',  life);

另外，也能够应用一个信息和替换值。

console.assert(  life === 42,  'life is expected to be %s but is set to %s',  42,  life);

当条件失败时，这两个选项都会显示一个断言谬误。

7. 运行堆栈跟踪

能够应用 console.trace() 输入形成以后执行点的所有函数调用的日志。

function callMeTwo() {  console.trace();  return true;}function callMeOne() {  return callMeTwo();}const r = callMeOne();

跟踪显示每次调用是哪一行，并且能够在控制台窗格中折叠或开展：

8. 组日志音讯

打印日志时，能够在结尾应用console.group( label ) 和结尾应用 console.groupEnd() 将日志音讯分成命名组。音讯组能够嵌套和折叠或开展（console.groupCollapsed( label ) 最后显示处于折叠状态的组）：

// start log groupconsole.group('iloop');for (let i = 3; i > 0; i--) {  console.log(i);  // start collapsed log group  console.groupCollapsed('jloop');  for (let j = 97; j < 100; j++) {    console.log(j);  }  // end log group (jloop)  console.groupEnd();}// end log group (iloop)console.groupEnd();

9. 应用定时器

console.time和console.timeEnd这两个办法能够用来让WEB开发人员测量一个javascript脚本程序执行耗费的工夫。随着WEB利用越来越重要，JavaScript的执行性能也日益受到重视，WEB开发人员晓得一些性能测试机器是必须的。

console.time办法是开始计算工夫，console.timeEnd 是进行计时，输入脚本执行的工夫。

// 启动计时器console.time('testForEach');// (写一些测试用代码)// 进行计时，输入工夫console.timeEnd('testForEach');// 4522.303ms

这两个办法中都能够传人一个参数，作为计时器的名称，它的作用是在代码并行运行时候分明各个计时器。对console.timeEnd的调用会立刻输入执行总共耗费的工夫，单位是毫秒。

10. 按名称调试和监控函数

DevTools Sources 面板(或 Firefox 中的调试器)容许关上一个文件，并通过单击行号设置断点。基于chrome的浏览器也容许你通过在控制台中输出debug(functionName)来设置断点，例如:

debug( doSomething );

该函数必须在全局命名空间中可用，并且浏览器将在调用它时立刻启动调试器。能够应用undebug(functionName)或从新加载页面来勾销调试。

monitor(function)，它接管一个函数名作为参数，比方function a,每次a被执行了，都会在控制台输入一条信息，外面蕴含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来进行这一监听。

11. 查找和修复事件监听器

Firefox DevTools Inspector 面板会在任何附加了处理程序的DOM元素旁边显示一个 event 图标。单击图标查看函数名，而后单击右边的箭头图标开展代码。或者，“在调试器中关上”图标将在“调试器”窗格中定位处理程序，以便能够设置断点

Chrome的实现没有那么好，但能够通过getEventListeners()函数传递一个DOM节点来查看所有事件监听器。例如，getEventListeners($0)显示利用于以后Elements面板中高亮显示的DOM节点的侦听器

12. 复制属性到剪贴板

控制台的copy()命令能够复制任何值到剪贴板。它能够是一个原始值、数组、对象或DOM节点。

当传递一个DOM节点时，copy()将该元素及其所有子元素的HTML放在剪贴板上。这与右键点击一个节点并抉择复制，而后抉择复制外层HTML是一样的。

命令 copy( document.documentElement ) 复制整个 HTML 文档。这能够粘贴到文本编辑器中并进行丑化加强可读性。