灵活使用console让 js调试更简单

Web开发最常用的高度就是 console.log ，虽然 console.log 占有一席之地，但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易，更快速，更直观。

console.log()

在console.log 中有很多人们意想不到的功能。虽然大多数人使用 console.log(object) 来查看对象，但是你也可以使用 console.log(object, otherObject, string)，它会把它们都整齐地记录下来，偶尔也会很方便。

不仅如此，还有另一种格式化的： console.log(msg, values)，这很像 C 或 PHP 中的sprintf。

console.log('I like %s but I do not like %s.', 'Skittles', 'pus'); 

会像你预期的那样输出：

> I like Skittles but I do not like pus. 

常见的占位符 %o (这是字母o，不是0)，它接受对象，%s 接受字符串，%d 表示小数或整数。

另一个有趣的是 %c，这可能与你所想不太相同，它实际上是CSS值的占位符。使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。常见的输出方式有两种：文字样式、图片输出。

console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px'); 

它并不优雅，也不是特别有用。当然，这并不是一个真正的按钮。

它有用吗? 恩恩恩。

console.dir()

在大多数情况下，，console.dir() 的函数非常类似于 log()，尽管它看起来略有不同。

下拉小箭头将显示与上面相同的对象详细信息，这也可以从console.log 版本中看到。当你查看元素的结构时候，你会发现它们之间的差异更大，也更有趣。

let element = document.getElementById('2x-container'); 

使用 console.log 查看：

打开了一些元素，这清楚地显示了 DOM，我们可以在其中导航。但是console.dir(element)给出了更加方便查看 DOM 结构的输出：

这是一种更客观地看待元素的方式。有时候，这可能是您真正想要的，更像是检查元素。

console.warn()

可能是最明显的直接替换 log()，你可以以完全相同的方式使用 console.warn()。 唯一真正的区别是输出字的颜色是黄色的。 具体来说，输出处于警告级别而不是信息级别，因此浏览器将稍微区别对待它。 这具有使其在杂乱输出中更明显的效果。

不过，还有一个更大的优势，因为输出是警告而不是信息，所以你可以过滤掉所有console.log并仅保留console.warn。 这对于偶尔会在浏览器中输出大量无用废话的应用程序尤其有用。 清除一些无用的信息可以让你更轻松地看到你想要的输出。

console.table()

令人惊讶的是，这并不是更为人所知，但是 console.table() 函数旨在以一种比仅仅转出原始对象数组更整洁的方式显示表格数据。

例如，这里有一个数据列表。

const data = [{  
  id: "7cb1-e041b126-f3b8",  
  seller: "WAL0412",  
  buyer: "WAL3023",  
  price: 203450,  
  time: 1539688433  
},  
{  
  id: "1d4c-31f8f14b-1571",  
  seller: "WAL0452",  
  buyer: "WAL3023",  
  price: 348299,  
  time: 1539688433  
},  
{  
  id: "b12c-b3adf58f-809f",  
  seller: "WAL0012",  
  buyer: "WAL2025",  
  price: 59240,  
  time: 1539688433  
}]; 

（编辑：ASP站长网）