這5個 console.log() 技巧幫你提升工做效率

做者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin.

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

咱們知道 console.log(message)用法很簡單，表示將參數message 打印到控制檯上。

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

本文主要介紹5個有用的技巧，可幫助你在使用console.log()時提升工做效率。

1. 打印全名變量

若是在控制檯打印多個變量，是數量比較多的狀況下，咱們很難區別哪一個變量對應哪一個值。

function sum(a, b) {
  console.log(b);
  return a + b;
}

sum(1, 2);
sum(4, 5);

執行上述代碼後，咱們只會看到一系列數字：

要表示值和變量之間關係，能夠用花括號把變量包起來：{b}：

2.高級格式化

將某些東西打印到控制檯最多見方法是簡單地使用一個參數調用console.log()：

console.log('前端小智') // 前端小智

有時咱們可能想要一條包含多個變量的信息。 幸運的是，console.log()可使用％s，％i等說明符以sprintf()的方式格式化字符串。

const user = '前端小智';
const attempts = 5;

console.log('%s 登陸失敗了 %i 次', user, attempts);
// 前端小智 登陸失敗了 5 次

％s和％i被user和attempts的值替換。 說明符％s轉換爲字符串，而％i轉換爲數字。

如下是可用說明符的列表：

說明符	做用
%s	元素轉換爲字符串
%d 或 %i	元素轉換爲整數
%f	元素轉換爲浮點數
%o	元素以最有效的格式顯示
%O	元素以最有效的格式顯示
%c	應用提供的CSS

具備樣式的打印風格

瀏覽器控制檯容許咱們將樣式應用於打印的消息，咱們能夠經過將％c說明符與相應的CSS樣式一塊兒使用來實現，以下所示：

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

說明符％c應用CSS樣式'font-size: 36px; font-weight: bold'

4. 交互展現

日誌樣式化依賴於主機的控制檯實現。像Chrome和Firefox這樣的瀏覽器提供對象和數組的交互展現，而 Node 控制檯輸出爲文本。

來看看Chrome如何打印普通對象，數組和DOM樹，能夠經過展開和摺疊與這些元素進行交互。

4.1 Objects

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log(myObject);

在Chrome控制檯中，myObject的打印以下所示：

能夠展開和摺疊對象屬性列表，也能夠看到對象的原型。

4.2 Arrays

const characters = ['Neo', 'Morpheus', 'John Smith'];

console.log(characters);

4.3 DOM 樹結構

咱們能夠直接與控制檯中顯示的DOM元素進行交互。

console.log(document.getElementById('root'));

在Chrome控制檯中，能夠擴展DOM元素，並能夠全面瀏覽其內容：

4.4 交互式嵌套裏的消息

％o說明符（爲值關聯了正確的打印格式）能夠在文本消息中插入數組，對象，DOM元素和常規文本，而不會失去交互性。

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

從控制檯看，myObject數組不會轉換爲字符串，而是保持交互性。

1. 在 Node 控制檯中打印大對象

Node中的log以純文本形式輸出。 可是，Node 中的console.log()不會顯示具備深層嵌套的對象：第3級的對象顯示爲[Object]。

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(myObject);

運行腳本時，propC的對象打印爲[Object]：

要查看完整的對象結構，可使用JSON.stringify():

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(JSON.stringify(myObject, null, 2));

JSON.stringify(myObject, null, 2)返回該對象的JSON表示形式，第三個參數2在空格中設置縮進大小。

但願這5個技巧可使你使用 console.log() 體驗更加高效。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/co...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。