使用chrome控制台調試js代碼

1.打開控制台(空白頁簽即可)

2.將控制台在獨立頁打開(點擊控制台右上角的三個點圖標，然后點擊如下圖中的圖標)

3.創建腳本編輯頁面

4.頁面區域說明

5.花鍵＋回車之行代碼

6.常用命令介紹

6.1顯示信息的命令

console.log('hello');  
console.info('信息');  
console.error('錯誤');  
console.warn('警告');  

6.2占位符

console.log("%d年%d月%d日",2011,3,26);  

6.3信息分組

console.group("第一組信息");  
console.log("第一組第一條:我的XX(http://www.baidu.com)");  
console.log("第一組第二條:xxx(http://baidu.com)");  
console.groupEnd();  
console.group("第二組信息");  
console.log("第二組第一條:程序愛好者");  
console.log("第二組第二條:歡迎你");  
console.groupEnd();  

6.4查看對象的信息(注意區分和console.log())

var p = {};
p.age = 12;
p.name = "張三";
p.play = function(){console.log("i am playing")}
console.dir(p);
console.log(p);

6.5顯示某個節點的內容

console.dirxml(); //用來顯示網頁的某個節點（node）所包含的html/xml代碼。
var body = document.getElementsByTagName('body')[0];
console.dirxml(body);

6.6斷言

var result = 1;
console.assert( result );
var year = 2015;
console.assert(year == 2019 );

6.7追蹤函數的調用軌跡

function add(a,b){
  console.trace();
  return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

6.8計時器

console.time("控制台計時器一");
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台計時器一");