下面分享幾個日常調試代碼的時候在Console命令行顯示你的操作，讓你的js調試更簡單。
console顯示信息的命令
在瀏覽器按f12在console上顯示你的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
console.log('hello000');
console.info('信息111');
console.error('錯誤222');
console.warn('警告333');
</script>
</body>
</html>
- console信息分組
在console上區分開小組信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
console.group("第一組信息");
console.log("第一組第一條:今天是");
console.log("第一組第二條:10.24");
console.groupEnd();
console.group("第二組信息");
console.log("第二組第一條:程序猿節日");
console.log("第二組第二條:節日快樂");
console.groupEnd();
</script>
</body>
</html>
- console佔位符
console上述的集中度支持printf的佔位符格式，支持的佔位符有：字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
console.log("%d年%d月%d日",2016,10,24);
</script>
</body>
</html>
- console查看對象的信息
console.dir()可以顯示一個對象所有的屬性和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
var info = {
boom: "10.24程序猿節日",
message: "不加班"
};
console.dir(info);
</script>
</body>
</html>
- console顯示某個節點的內容
用console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
var info = document.getElementById('example');
console.dirxml(info);
</script>
</body>
</html>
- 判斷變量是否是真
console.assert()用來判斷一個表達式或變量是否爲真。如果結果爲否，則在控制檯輸出一條相應信息，並且拋出一個異常。（這裏代碼中，console.assert()語句保證cat對象的score變量值長度爲3，不過我爲了顯示錯誤把3改成4。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
function cat(name, age, score){
this.name = name;
this.age = age;
this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.assert(c.score.length==4, "Assertion of score length failed123456");
</script>
</body>
</html>
- 追蹤函數的調用軌跡
console.trace()用來追蹤函數的調用軌跡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
/*函數是如何被調用的，在其中加入console.trace()方法就可以了*/
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);
}
</script>
</body>
</html>
- 計時功能
console.time()和console.timeEnd()，用來顯示代碼的運行時間。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
console.time("控制檯計時器一");
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd("控制檯計時器一");
</script>
</body>
</html>
- console.profile()的性能分析
性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
<div id="example">10.24程序猿節日</div>
<script>
function All() {
alert(11);
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) {}
}
function funcB(count) {
for (var i = 0; i < count; i++) {}
}
console.profile('性能分析器');
All();
console.profileEnd();
</script>
</body>
</html>
覺得有用給個讚唄。