別隻用 console.log() 調試 js 代碼了

JavaScript中的 console 對象可用於訪問瀏覽器調試控制檯,能夠用它在控制檯中輸出代碼中變量的值。前端

不過大多數人都只過 console.log() 在瀏覽器控制檯中進行輸出調試。 log 只是 console 對象的一種方法,除了它還有不少很是有用的方法。程序員

1. console.log()

這個方法主要用於將傳給它的值輸出到控制檯。能夠給 log() 傳遞任何類型:能夠是字符串,數組,對象,布爾值等。面試

console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});

輸出:segmentfault

image.png

2. console.error()

這個方法在測試代碼時很是有用。它用於將錯誤輸出到瀏覽器控制檯。錯誤消息默認用紅色突出顯示。數組

console.error('Error found');

輸出:瀏覽器

image.png

3. console.warn()

這個方法用於向控制檯拋出警告。警告消息默認以黃色突出顯示。服務器

console.warn('Warning!');

輸出:微信

image.png

4. console.clear()

這個函數用來清除控制檯。若是控制檯中充滿了消息和錯誤信息,能夠用它清除控制檯,並在控制檯中顯示一條消息: Console was cleared多線程

console.clear()

輸出:框架

image.png

5. console.time() 與 console.timeEnd()

這兩種方法要相互結合使用。每當咱們想知道一個代碼塊或函數所花費的時間時,均可以用 time()timeEnd() 方法。這兩個函數都以字符串做爲參數。使用時要對這兩個函數用相同的字符串來測量時間。

console.time('timer'); const hello =  function(){
  console.log('Hello Console!');
}const bye = function(){
  console.log('Bye Console!');
}hello(); // calling hello();
bye(); // calling bye();console.timeEnd('timer');

輸出:

image.png

6. console.table()

這個方法能夠在控制檯中生成一個表格,可以提升可讀性。它能夠自動爲數組或對象生成一個表。

console.table({a: 1, b: 2, c: 3});

輸出:

image.png

7. console.count()

能夠在循環中用它來檢查特定的值使用了多少次。

for(let i=0; i<3; i++){
  console.count(i);
}

輸出:

image.png

8. console.group() 和 console.groupEnd()

group()groupEnd() 可讓咱們把內容分組到一個單獨的塊中。就像 time()timeEnd() 同樣,它們須要以相同值的標籤做爲參數。你還能夠對組執行展開或摺疊操做。

console.group('group1'); 
  console.warn('warning'); 
  console.error('error'); 
  console.log('I belong to a group'); 
console.groupEnd('group1'); 
console.log('I dont belong to any group');

輸出:

image.png

9. 爲你的日誌添加樣式

還能夠在控制檯日誌添加樣式,使日誌看起來更漂亮。只須要把 CSS 樣式做爲 log() 函數的第二個參數,同時第一個參數以 %c 開始便可。

const spacing = '10px'; 
const styles =  `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`; 
console.log('%cI am a styled log', styles);

輸出:

image.png

總結

console 對象對代碼調試很是有用。可是不少人一般只用 log 函數。從如今開始應該充分利用 console 對象,以便更輕鬆地調試並生動地查看瀏覽器日誌。

173382ede7319973.gif


本文首發微信公衆號:前端先鋒

歡迎掃描二維碼關注公衆號,天天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公衆號,天天都給你推送新鮮的前端技術文章


歡迎繼續閱讀本專欄其它高贊文章:


相關文章
相關標籤/搜索