灵活使用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  
}]; 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!