JS 灵活使用 console 调试

前言：

Web 开发中最常用的调试就是 console.log()，console 除了本身 log() 方法外，还有其他很多方法。

console.log()

console.log() 有许多意想不到的功能，我们经常使用 console.log(object) 来查看一个对象，或者使用 console.log(object,otherobject,string) 来查看数据信息。

除此之外，console.log() 还有另外一种写法：console.log(msg,values)，类似 Java 或 PHP 中的 sprintf

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

这里会输出：

I like GaoSirs but I do not like pus.

常见的占位符有 %o（它接受对象），%s（它接受字符串），d%（它接受数字），%c（它接受 css 语句）；

其中比较有趣的是 %c：使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染

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

console.dir()

console.dir() 与 console.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

}];

如果以 console.log() 输出以上内容，我们会得到一些无用的输出数据

 (3) [{…}, {…}, {…}]

通过 console.table() 输出则有用的多：

第二个参数是所需列的列表：

console.table(data, ["id", "price"]);

注意：console.table() 只能处理最多1000行，所以它可能不适合所以数据集。

console.assert()

console.assert() 是对输入的表达式进行断言，只有表达式为 False 时，才输出相应的信息到控制台。

var arr = [1, 2, 3];

console.assert(arr.length === 4);

console.count()

console.count() 只是作为一个计数器，或者作为一个命名计数器，可以统计代码执行次数。

还有一个 console.countReset(), 可以用它重置计数器。

除此之外，还有许多调试方法，这里就不一一叙述了，虽然用处不是很大，但它仍然是一个有趣的想法，这样使你的代码调试更加清晰。

巴特西

JS 灵活使用 console 调试

前言：

console.log()

console.dir()

console.warn()

console.table()

console.assert()

console.count()

随笔参考

https://segmentfault.com/a/1190000018756503#articleHeader6

感谢博主分享！

最新文章

热门文章