Getting Started with Javascript console Object

consolg.log() 是所有 Javascript 開發者都用過的除錯方法，透過 console.log() 將執行過程的特定資訊輸出，以方便我們除錯；但事實上，console.log() 其實只是 Javascript 中除錯功能的冰山一角。

console Object 是 Javascript 提供用來除錯的完整物件，console.log() 只是其中之一。

Basic Usage

console Object 中，除了常見的 console.log 以外，其實還有其他相似的 method 用來分類 log 訊息。

範例

console.log('Test');
console.info('Test');
console.debug('Test');
console.warn('Test');
console.error('Test');

也可以在 Brower Console 中執行。

Custom CSS Styles for a console.log()

如果在 Facebook 首頁打開瀏覽器的 console 的話，會馬上看到「住手」兩個大大的紅字。

事實上 console.log() 除了基本的輸出以外，也能透過 %c 這個格式化輸出符號來自訂自己的 CSS。

使用方法是在訊息前面加上 %c 符號，後面的參數再代入你要的 CSS 即可。

範例

console.log('%cCheck CSS: %c✓ Done %c(Good Job)', 'color:blue;', 'background-color: #13AA13; color: white; padding: 5px;');

Notice： 當你使用 %c 設定 CSS 時，其實是會將 %c 以後的內容都套上樣式，所以可以透過多個 %c 來覆蓋成不同的樣式，如果使用了 %c 而沒代入 CSS 的話，就會變回 default 樣式。

Formatted String

console Object 也有基本的 Formatted String 的功能：

• %s： String
• %i or %d： Integer
• %o or %O： Object
• %f： Float

範例

for (let i = 0; i < 3; i++) {
  console.log('Hello, %s. You called me %d times', 'Johnson', i + 1);
}

console.assert()

console.assert 可以針對你的判斷式來決定要不要輸出錯誤訊息，在 RunTime debug 時非常好用。

範例

let message = 'Is even.';
for (let i = 2; i < 10; i++) {
  console.log('Number is ', i);
  // 當偶數時輸出錯誤訊息
  console.assert(i % 2 == 1, {i, message});
}

Grouping Your Log

console Object 中提供了 console.group() 和 console.groupEnd() 兩個 method，讓你可以自由 group 你的 log。

範例

console.group('First Group');
console.log('This is in the First Group');

console.group('Secend Group');
console.log('This is in the Secend Group');

console.groupEnd();
console.groupEnd();

Generating Tables

console.table() 可以將陣列或物件以 Table 的型式輸出。

範例：陣列

console.table(["apples", "oranges", "bananas"]);

範例：物件

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

let me = new Person('JohnsonLu', 'Lu');

console.table(me);

Logging Time

console.time()、console.timeLog()、console.timeEnd() 是用來紀錄時間的三件套。

範例

// Set the timer name
console.time('Track Time');
alert('Click to Continue');
// Show the time of the timer
console.timeLog('Track Time');
alert('Click to Continue');
// End the timer
console.timeEnd('Track Time');

Trace Function

console.trace() 可以將完整的 stack trace 顯示出來，方便在多層 method 下尋找錯誤。

範例

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();