JavaScript中的 console
對象可用於訪問瀏覽器調試控制檯,能夠用它在控制檯中輸出代碼中變量的值。前端
不過大多數人都只過 console.log()
在瀏覽器控制檯中進行輸出調試。 log
只是 console
對象的一種方法,除了它還有不少很是有用的方法。程序員
這個方法主要用於將傳給它的值輸出到控制檯。能夠給 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
這個方法在測試代碼時很是有用。它用於將錯誤輸出到瀏覽器控制檯。錯誤消息默認用紅色突出顯示。數組
console.error('Error found');
輸出:瀏覽器
這個方法用於向控制檯拋出警告。警告消息默認以黃色突出顯示。服務器
console.warn('Warning!');
輸出:微信
這個函數用來清除控制檯。若是控制檯中充滿了消息和錯誤信息,能夠用它清除控制檯,並在控制檯中顯示一條消息: Console was cleared 。多線程
console.clear()
輸出:框架
這兩種方法要相互結合使用。每當咱們想知道一個代碼塊或函數所花費的時間時,均可以用 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');
輸出:
這個方法能夠在控制檯中生成一個表格,可以提升可讀性。它能夠自動爲數組或對象生成一個表。
console.table({a: 1, b: 2, c: 3});
輸出:
能夠在循環中用它來檢查特定的值使用了多少次。
for(let i=0; i<3; i++){ console.count(i); }
輸出:
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');
輸出:
還能夠在控制檯日誌添加樣式,使日誌看起來更漂亮。只須要把 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);
輸出:
console
對象對代碼調試很是有用。可是不少人一般只用 log
函數。從如今開始應該充分利用 console
對象,以便更輕鬆地調試並生動地查看瀏覽器日誌。