console對象

時間 2019-11-11

標籤 console 對象简体版

原文原文鏈接

console對象提供瀏覽器控制檯的接入，不一樣的瀏覽器工做的方式是不同的，這裏介紹一些大都會提供的接口api。

咱們能夠在任何的全局變量中使用，例如 Window、 WorkerGlobalScope以及在workers中的特殊定義。

下面介紹對象可用的方法以及對應方法的使用示例。javascript

方法EDIT

Console.assert(): 判斷第一個參數是否爲真，false的話拋出異常而且在console輸出相應信息。
Console.count(): 以參數爲標識記錄調用的次數，調用時在console打印標識以及調用次數。
Console.debug(): console.log方法的別稱，使用方法能夠參考 Console.log()
Console.dir(): 打印一條以三角形符號開頭的語句，能夠點擊三角展開查看對象的屬性。
Console.error(): 打印一條錯誤信息，使用方法能夠參考 string substitution。
Console._exception(): error方法的別稱，使用方法參考 Console.error()
Console.group(): 打印樹狀結構，配合groupCollapsed以及groupEnd方法;
Console.groupCollapsed(): 使用方法和group相同，不一樣的是groupCollapsed打印出來的內容默認是摺疊的。
Console.groupEnd(): 結束當前Tree
Console.info(): 打印以感嘆號字符開始的信息，使用方法和log相同
Console.log(): 打印字符串，使用方法比較相似C的printf格式輸出，可參考 string substitution 。
Console.profile(): 能夠以第一個參數爲標識，開始javascript執行過程的數據收集。和chrome控制檯選項開Profiles比較相似，具體可參考 chrome profiles
Console.profileEnd(): 配合profile方法，做爲數據收集的結束。
Console.table(): 將數據打印成表格。 Console.table [en-US]
Console.time(): 計時器，接受一個參數做爲標識。
Console.timeEnd(): 接受一個參數做爲標識，結束特定的計時器。
Console.trace(): 打印 stack trace.
Console.warn(): 打印一個警告信息，使用方法能夠參考 string substitution。

UsageEDIT

Outputting text to the console

console對象中較多使用的主要有四個方法console.log(), console.info(), console.warn(), 和console.error()。他們都有特定的樣式，若是有C開發經驗的同窗會發現它能夠格式化打印字符相似於printf方法。若是你想要爲console打印的字符定義css或者打印圖片的話能夠參考這篇博客 php

打印單個對象

var someObject = { str: "Some text", id: 5 }; console.log(someObject);

打印結果相似下面:css

[09:27:13.475] ({str:"Some text", id:5})

打印多個對象

你能夠打印多個對象，就像下面同樣:html

var car = "Dodge Charger"; var someObject = {str:"Some text", id:5}; console.info("My first car was a", car, ". The object is: ", someObject);

打印結果相似下面:java

[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})

格式化打印

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 首次發佈對string substitutions的支持.你能夠在傳遞給console的方法的時候使用下面的字符以期進行參數的替換。web

Substitution string	Description
%o	打印javascript對象，能夠是整數、字符串以及JSON數據
%d or %i	打印整數
%s	打印字符串
%f	打印浮點數

當要替換的參數類型和預期的打印類型不一樣時，參數會被轉換成預期的打印類型。chrome

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
console.log("I want to print a number:%d","string")

The output looks like this:api

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.
[13:14:13.489] I want to print a number:NaN

咱們發現"string"字符串被轉換成數字失敗成轉換成 NaN [en-US]瀏覽器

爲console定義樣式

你可使用"%c"爲打印內容定義樣式:緩存

console.log("%cMy stylish message", "color: red; font-style: italic");

Using groups in the console

Requires Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

你可使用console.group方法來組織本身的打印內容以期得到更好的顯示方式。

Note: groupCollapsed在 Gecko中顯示方式和console.log相同並不會摺疊。

示例：

console.log("This is the outer level"); console.group(); console.log("Level 2"); console.group(); console.log("Level 3"); console.warn("More of level 3"); console.groupEnd(); console.log("Back to level 2"); console.groupEnd(); console.debug("Back to the outer level");

執行結果:

Timers

Requires Gecko 10.0(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

咱們可使用time()方法來進行次數的統計：

console.time("answer time"); alert("Click to continue"); console.timeEnd("answer time");

打印結果:

Note: 須要注意的是當你統計網絡請求次數的時候，header和 response body請求是分開的，換句話說response.header+response.body的次數= console.time的統計次數

Stack traces

打印當前執行位置到console.trace()的路徑信息.。

foo();

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

The output in the console looks something like this:

NotesEDIT

在Firefox中假如頁面定義了console對象的方法，他會覆蓋掉Firefox的對象。
Gecko 12.0以前的版本中，console object只會在控制檯打開的狀況下才會執行.自從 Gecko 12.0打印內容會被緩存起來再控制檯打開的時候打印出來.
firefox內置的console對象與firebug插件提供的console對象是相互兼容的。