1.console.log

釋義:向控制臺輸出普通信息
如果參數(shù)只是字符串:

console.log("在控制臺會輸出普通信息");

如果有兩個參數(shù),第一個參數(shù)是加了%c(注意小寫)的字符串,那么在控制臺輸出時就會按照第二個參數(shù)給出的樣式輸出(下面的info,error,warn都可以使用%c格式輸出文字)

console.log("%c這里會輸出紅色,20字號的文字","font-size:20px;color:red");

2.console.info

釋義:向控制臺輸出提示信息

console.info("這是一條提示信息");

3.console.error

釋義:向控制臺輸出錯誤信息

console.error("這是一條錯誤信息");

4.console.warn

釋義:向控制臺輸出警示信息

console.warn("這是一條警息");

5.console.group,console.groupEnd

• console.group:開始一組輸出信息,可以嵌套,形成子信息,要結(jié)束當(dāng)前組的信息輸出,要調(diào)用console.groupEnd
• console.groupEnd:結(jié)束一組輸出信息

console.log("%ckitchen api","font-size:18px;color:red");
console.group("vueComp方法");
console.log("該方法是生成一個可裝配的組件");
console.group("參數(shù)(Object)");
console.log("path:載入組件的路徑");
console.log("cache:是否開啟緩存")
console.groupEnd();
console.groupEnd();

6.console.table

釋義:以表格形式將數(shù)據(jù)輸出

var data = [
{"name":"尼古拉斯.趙四","age":32},
{"name":"岳云鵬","age":"32"}
];
console.log(data);

7.console.assert

釋義:斷言

var isDebug = false;
console.assert(isDebug,"如果前一個參數(shù)是false,控制臺將輸出這段話")

如果第一個參數(shù)不是布爾型,會自動轉(zhuǎn)成布爾型(0,false,"",null,undefined,NaN轉(zhuǎn)為false,其他均為true),不過建議直接寫false或者true

8.console.count

釋義:統(tǒng)計(jì)某個代碼片段執(zhí)行了多少次

function runCount () {
//...代碼邏輯
console.count("runCount執(zhí)行次數(shù):")}
runCount();
runCount();
runCount();
runCount();

9.console.dir

釋義:將傳入對象的屬性,包括子對象的屬性,以列表形式輸出:

var obj = { name : "li4065", sex : "man", age : 29}
console.dir(obj);
console.dir(document.body); //以列表形式,把body的相關(guān)屬性展示出

PS.另外還有個console.dirxml方法,是會把相關(guān)節(jié)點(diǎn)中的包含的html/xml輸出,感覺沒啥用。不如直接在控制臺輸入某個節(jié)點(diǎn),會直接把該節(jié)點(diǎn)html/xml輸出。

10.console.time,console.timeEnd

• console.time:生成一個記時器,并開始記時
• console.timeEnd:結(jié)束某個指定標(biāo)示的記時兩者配套使用,會把指定計(jì)時器運(yùn)行時間計(jì)算出來

console.time("run"); //生成一個名為run的定時器
for(var i=0;i<1000;i++) { console.log("ces")};
console.timeEnd("run"); //結(jié)束名為run的定時器在chrome瀏覽器下

會輸出:run: 96.274ms

11.console.profile,console.profileEnd

• console.profile:標(biāo)記一個性能記錄點(diǎn),并開始進(jìn)行性能記錄
• console.profileEnd:結(jié)束某個性能記錄可以在瀏覽器的profile的標(biāo)簽看到相關(guān)性能記錄情況(記錄名,就是profile中的名稱)

function sayHi() { for(var i=0;i<1000;i++){ console.log("hi") }}
console.profile("記錄sayHi的性能");
sayHi();
console.profileEnd("記錄sayHi的性能");

記錄性能除了可以用這種手寫方式,也可以通過在profile標(biāo)簽下,進(jìn)行操作來記錄

12.console.trace

釋義:追逐函數(shù)的調(diào)用過程(堆棧跟蹤相關(guān)的調(diào)試)

function testTrace () {
var a = 12;
submit(a);
}
function submit (a) {
var b = 23;
add(a,b);
}
function add (a,b) {
console.log(a + b);
console.trace("追蹤add相關(guān)的調(diào)用函數(shù)"); //如果這里不傳值,控制臺會把console.trace()當(dāng)作記錄的堆棧名}

13.在chrome控制臺下,除了以上的相關(guān)方法,還有如下兩個比較好用的方法:

• keys,values
  keys:返回傳入對象所有屬性名組成的數(shù)據(jù).
  values:返回所有屬性值組成的數(shù)組.
  var info={name:'li4065',sex:'man',age:'29'};
  keys(info); //把info存起來
  values(info); //獲取info的相關(guān)數(shù)據(jù)
• monitor,unmonitor
  monitor:接收某個函數(shù)作為參數(shù),該函數(shù)只要一執(zhí)行,控制臺就會輸出相關(guān)信息
  unmonitor:移除對某個函數(shù)的監(jiān)聽
  function sayHi () {
  console.log("Hi");
  }
  monitor(sayHi);
  sayHi();
  unmonitor(sayHi);
  sayHi();