chrome控制檯中console

在使用谷歌瀏覽器進行前端開發的時候,console作爲控制檯的一個主要方法,相信大家都用過,一般都是用console.log()來輸出部分內容,但是console還有很多強大之處,下面主要說一下console的更重強大的地方:
首先在chrome控制檯的console中輸入console.就會出現如下:
console的屬性
後面出現的都是console的方法,下面來主要說明一下這些方法:

1、console.assert(message1, message2)
message1: Boolean類型,當爲false的時候會輸入message2
message2: 一般情況下是字符串,表示一些具體的信息
例如:

var flag = false;
console.assert(flag, "可以輸出");
var flag2 = true;
console.assert(flag2, "不會輸出");
  • 1
  • 2
  • 3
  • 4

console.assert(message1, message2)
2、 console.clear();
用於清空console控制檯
console.clear()
3、 console.count()
使用console.count()可以計算某段代碼的執行次數。具體看下面這個例子

function array(){
    console.count();
}
for(var i = 0; i< 10; i++){
    array();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

console.count()
4、 console.debug()
可用於代碼調試,chrome已經將其做成界面化操作,這裏就不多說了。
5、console.dir()和console.dirxml()
將DOM結點以Js對象的形式輸出到控制檯,例如:在任何一個網頁中的console控制檯執行下面代碼

console.dir($("body"));
  • 1

console.dir($("body"))

console.dirxml($("body"));
  • 1

console.dirxml($("body"))
6、 console.log()/console.info()/console.warn()/console.error()
打印內容/輸出信息/輸出警告/輸出錯誤

 console.log("打印內容");
 console.info("輸出信息");
 console.warn("輸出警告");
 console.error("輸出錯誤");
  • 1
  • 2
  • 3
  • 4

console.log()/console.info()/console.warn()/console.error()
7、 console.log()
console.log()不光可以打印內容,它還可以添加很多配置來達到不同的目的:

指示符 輸出
%s 格式化輸出一個字符串變量。
%i or %d 格式化輸出一個整型變量的值。
%f 格式化輸出一個浮點數變量的值。
%o 格式化輸出一個DOM對象。
%O 格式化輸出一個Javascript對象。
%c 爲後面的字符串加上CSS樣式
console.log("%c內容", "font-size:20px; color:red;");
  • 1

console.log()
8、console.group()/console.groupCollapsed()/console.groupEnd()
console.group(): 輸出一組內容的開始
console.groupCollapsed(): 輸出組的標題
console.groupEnd(): 輸出組的結束

console.group("組1");
console.groupCollapsed("組1的標題");
console.log("組1的內容");
console.groupEnd();
  • 1
  • 2
  • 3
  • 4

console.group()/console.groupCollapsed()/console.groupEnd()
9、 console.markTimeline()已經過時,請使用console.timeStamp()代替
console.markTimeline()
console.timeStamp()是實現一個時間戳。
10、 console.profile()/ console.profileEnd()
查看CPU的使用情況,可直接使用界面化的,
console.profile()/ console.profileEnd()
11、 console.table()
將數據內容以表格的形式進行展示

var data = [{"name": "Bob","age": 8},{"name": "Roce","age": 15},{"name": "Blu","age": 10}];
console.table(data);
  • 1
  • 2

console.table()
12、 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");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

console.time() / console.timeEnd()
13、 console.trace() 可以打出js的函數調用棧,可以用界面化的操作
14、console.constructor(message)

console.constructor("number");
  • 1

console.constructor(message)

console.constructor([1,2,3])
  • 1

console.constructor([1,2,3])

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章