目錄

console 物件與控制檯

console

console物件是 JavaScript 的原生物件，它有點像 Unix 系統的標準輸出stdout和標準錯誤stderr，可以輸出各種資訊到控制檯，並且還提供了很多有用的輔助方法。

• console的常見用途有兩個。

  1. 除錯程式，顯示網頁程式碼執行時的錯誤資訊。

  2. 提供了一個命令列介面，用來與網頁程式碼互動。

console 物件的靜態方法

console物件提供的各種靜態方法，用來與控制檯視窗互動。

console.log()，console.info()，console.debug()

console.log()

用於在控制檯輸出資訊。它可以接受一個或多個引數，將它們連線起來輸出。

console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c

console.log() 會自動在每次輸出的結尾，新增換行符。

console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3

格式佔位符

如果第一個引數是格式字串（使用了格式佔位符），console.log方法將依次用後面的引數替換佔位符，然後再進行輸出。

console.log(' %s + %s = %s'
 
, 1, 1, 2)
//  1 + 1 = 2

console.log() 支援以下佔位符，不同型別的資料必須使用對應的佔位符。

• %s 字串

• %d 整數

• %i 整數

• %f 浮點數

• %o 物件的連結

• %c CSS 格式字串

var number = 11 * 9;
var color = 'red';

console.log('%d %s balloons', number, color);
// 99 red balloons

• css 樣式

console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
 

)

上面程式碼執行後，輸出的內容將顯示為黃底紅字。

console.info 是 console.log() 的別名，用法完全一樣。只不過console.info() 會在輸出資訊的前面，加上一個藍色圖示。

console.debug 方法與 console.log() 類似，會在控制檯輸出除錯資訊。

但是，預設情況下，console.debug 輸出的資訊不會顯示，只有在開啟顯示級別在 verbose 的情況下，才會顯示。

• 方法的覆蓋

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出錯了！");
// 2014-05-18T09:00.000Z 出錯了！

console.warn()，console.error()

warn方法和error方法也是在控制檯輸出資訊，它們與log方法的不同之處在於，

warn方法輸出資訊時，在最前面加一個黃色三角，表示警告；

error方法輸出資訊時，在最前面加一個紅色的叉，表示出錯。

同時，還會高亮顯示輸出文字和錯誤發生的堆疊。其他方面都一樣。

console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

console.table()

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

console.count()

count方法用於計數，輸出它被呼叫了多少次。

function greet(user) {
  console.count();
  return 'hi ' + user;
}

greet('bob')
//  : 1
// "hi bob"

greet('alice')
//  : 2
// "hi alice"

greet('bob')
//  : 3
// "hi bob"

console.dir()，console.dirxml()

dir 方法用來對一個物件進行檢查（inspect），並以易於閱讀和列印的格式顯示。

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

上面程式碼顯示dir方法的輸出結果，比log方法更易讀，資訊也更豐富。

console.assert()

console.assert() 方法主要用於程式執行過程中，進行條件判斷，如果不滿足條件，就顯示一個錯誤，但不會中斷程式執行。

這樣就相當於提示使用者，內部狀態不正確。

它接受兩個引數，第一個引數是表示式，第二個引數是字串。只有當第一個引數為false，才會提示有錯誤，在控制檯輸出第二個引數，否則不會有任何結果。

console.assert(false, '判斷條件不成立')
// Assertion failed: 判斷條件不成立

// 相當於
try {
  if (false) {
    throw new Error('判斷條件不成立');
  }
} catch(e) {
  console.error(e);
}

console.time()，console.timeEnd()

這兩個方法用於計時，可以算出一個操作所花費的準確時間。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

time方法表示計時開始，timeEnd方法表示計時結束。它們的引數是計時器的名稱。呼叫timeEnd方法之後，控制檯會顯示“計時器名稱: 所耗費的時間”。

console.group()，console.groupEnd()，console.groupCollapsed()

console.group和console.groupEnd這兩個方法用於將顯示的資訊分組。它只在輸出大量資訊時有用，分在一組的資訊，可以用滑鼠摺疊/展開。

console.group('一級分組');
console.log('一級分組的內容');

console.group('二級分組');
console.log('二級分組的內容');

console.groupEnd(); // 一級分組結束
console.groupEnd(); // 二級分組結束

console.groupCollapsed() 與 console.group() 很類似，唯一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。

console.trace()，console.clear()

console.trace() 顯示當前執行的程式碼在堆疊中的呼叫路徑。

console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate

debugger 語句

debugger語句主要用於除錯，作用是設定斷點。

如果有正在執行的除錯工具，程式執行到debugger語句時會自動停下。如果沒有除錯工具，debugger語句不會產生任何結果，JavaScript 引擎自動跳過這一句。

Chrome 瀏覽器中，當代碼執行到debugger語句時，就會暫停執行，自動開啟指令碼原始碼介面。

for(var i = 0; i < 5; i++){
  console.log(i);
  if (i === 2) debugger;
}

上面程式碼打印出0，1，2以後，就會暫停，自動開啟原始碼介面，等待進一步處理。

控制檯命令列 API

瀏覽器控制檯中，除了使用console物件，還可以使用一些控制檯自帶的命令列方法。

$_

$_ 屬性返回上一個表示式的值。

2 + 2
// 4
$_
// 4

$0 - $4

控制檯儲存了最近5個在 Elements 面板選中的 DOM 元素，$0 代表倒數第一個（最近一個），$1 代表倒數第二個，以此類推直到$4。

$(selector)

$(selector) 返回第一個匹配的元素，等同於 document.querySelector()。

注意，如果頁面指令碼對 $ 有定義，則會覆蓋原始的定義。

比如，頁面裡面有 jQuery，控制檯執行 $(selector) 就會採用 jQuery 的實現，返回一個數組。

$$(selector)

$$(selector) 返回選中的 DOM 物件，等同於 document.querySelectorAll()

$x(path)

$x(path) 方法返回一個數組，包含匹配特定 XPath 表示式的所有 DOM 元素。

$x("//p[a]")

上面程式碼返回所有包含 a 元素的 p 元素。

inspect(object)

inspect(object) 開啟相關面板，並選中相應的元素，顯示它的細節。

DOM 元素在Elements面板中顯示，比如inspect(document)會在 Elements 面板顯示document元素。

JavaScript 物件在控制檯面板Profiles面板中顯示，比如inspect(window)。

keys(object)，values(object)

keys(object) 方法返回一個數組，包含 object 的所有鍵名。

values(object) 方法返回一個數組，包含 object 的所有鍵值。

var o = {'p1': 'a', 'p2': 'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

monitorEvents(object[, events]) ，unmonitorEvents(object[, events])

monitorEvents(object[, events]) 方法監聽特定物件上發生的特定事件。

事件發生時，會返回一個Event物件，包含該事件的相關資訊。unmonitorEvents() 用於停止監聽。

monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])

其他

命令列 API 還提供以下方法。

• clear()：清除控制檯的歷史。

• copy(object)：複製特定 DOM 元素到剪貼簿。

• dir(object)：顯示特定物件的所有屬性，是console.dir方法的別名。

• dirxml(object)：顯示特定物件的 XML 形式，是console.dirxml方法的別名。

原文地址

原文地址

目錄導航

目錄導航