九个Console命令,让 JS 调试更简单
转载链接:http://www.xiongge.club/849.html
一、显示信息的命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<span class="crayon-i "> </span><span class="crayon-r "><html></span>
<span class="crayon-i "> </span><span class="crayon-r "><head></span>
<span class="crayon-i "> </span><span class="crayon-r "><title></span><span class="crayon-i ">常用console命令</span><span class="crayon-r "></title></span>
<span class="crayon-i "> </span><span class="crayon-r "><meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"Content-Type"</span> <span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"text/html; charset=utf-8"</span><span class="crayon-r "> /></span>
<span class="crayon-i "> </span><span class="crayon-r "></head></span>
<span class="crayon-i "> </span><span class="crayon-r "><body></span>
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'hello'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">info</span><span class="crayon-sy">(</span><span class="crayon-s">'信息'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">error</span><span class="crayon-sy">(</span><span class="crayon-s">'错误'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">warn</span><span class="crayon-sy">(</span><span class="crayon-s">'警告'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
<span class="crayon-i "> </span><span class="crayon-r "></body></span>
<span class="crayon-i "> </span><span class="crayon-r "></html></span>
|
最常用的就是console.log了。 二:占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)
1
2
3
4
5
|
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"%d年%d月%d日"</span><span class="crayon-sy">,</span><span class="crayon-cn">2011</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">26</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
效果:
三、信息分组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<span class="crayon-i "> </span><span class="crayon-r "><html></span>
<span class="crayon-i "> </span><span class="crayon-r "><head></span>
<span class="crayon-i "> </span><span class="crayon-r "><title></span><span class="crayon-i ">常用console命令</span><span class="crayon-r "></title></span>
<span class="crayon-i "> </span><span class="crayon-r "><meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"Content-Type"</span> <span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"text/html; charset=utf-8"</span><span class="crayon-r "> /></span>
<span class="crayon-i "> </span><span class="crayon-r "></head></span>
<span class="crayon-i "> </span><span class="crayon-r "><body></span>
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span>
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.xiongge.club)");
console.log("第一组第二条:博客园(http://www.cnblogs.com/xionggeclub/)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条:csdn http://blog.csdn.net/xiongshengwu");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
<span class="crayon-i "> </span><span class="crayon-r "></body></span>
<span class="crayon-i "> </span><span class="crayon-r "></html></span>
|
效果:
四、查看对象的信息
console.dir()可以显示一个对象所有的属性和方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span><span class="crayon-t">var</span> <span class="crayon-v">info</span><span class="crayon-h"> = </span><span class="crayon-sy">{</span>
<span class="crayon-h"> </span><span class="crayon-v">blog</span><span class="crayon-o">:</span><span class="crayon-s">"www.xiongge.club"</span><span class="crayon-sy">,</span>
<span class="crayon-h"> </span><span class="crayon-v">message</span><span class="crayon-o">:</span><span class="crayon-s">"程序爱好者欢迎你的加入"</span>
<span class="crayon-h"> </span><span class="crayon-sy">};</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">dir</span><span class="crayon-sy">(</span><span class="crayon-v">info</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
效果:
五、显示某个节点的内容
console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<span class="crayon-i "> </span><span class="crayon-r "><html></span>
<span class="crayon-i "> </span><span class="crayon-r "><head></span>
<span class="crayon-i "> </span><span class="crayon-r "><title></span><span class="crayon-i ">常用console命令</span><span class="crayon-r "></title></span>
<span class="crayon-i "> </span><span class="crayon-r "><meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"Content-Type"</span> <span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"text/html; charset=utf-8"</span><span class="crayon-r "> /></span>
<span class="crayon-i "> </span><span class="crayon-r "></head></span>
<span class="crayon-i "> </span><span class="crayon-r "><body></span>
<span class="crayon-i "> </span><span class="crayon-r "><div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"info"</span><span class="crayon-r ">></span>
<span class="crayon-i "> </span><span class="crayon-r "><h3></span><span class="crayon-i ">我的博客:www.xiongge.club</span><span class="crayon-r "></h3></span>
<span class="crayon-i "> </span><span class="crayon-r "><p>编程爱好者,欢迎你的加入</span><span class="crayon-r "></p></span>
<span class="crayon-i "> </span><span class="crayon-r "></div></span>
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span><span class="crayon-t">var</span> <span class="crayon-v">info</span><span class="crayon-h"> = </span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'info'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">dirxml</span><span class="crayon-sy">(</span><span class="crayon-v">info</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
<span class="crayon-i "> </span><span class="crayon-r "></body></span>
<span class="crayon-i "> </span><span class="crayon-r "></html></span>
|
效果:
六、判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
1
2
3
4
5
6
7
8
9
10
11
|
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span> <span class="crayon-t">var</span> <span class="crayon-v">result</span><span class="crayon-h"> = </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-st">assert</span><span class="crayon-sy">(</span> <span class="crayon-i">result</span> <span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-t">var</span> <span class="crayon-v">year</span><span class="crayon-h"> = </span><span class="crayon-cn">2014</span><span class="crayon-sy">;</span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-st">assert</span><span class="crayon-sy">(</span><span class="crayon-v">year</span><span class="crayon-h"> == </span><span class="crayon-cn">2018</span> <span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
1是非0值,是真;而第二个判断是假,在控制台显示错误信息
七、追踪函数的调用轨迹。
console.trace()用来追踪函数的调用轨迹。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span><span class="crayon-c">/*函数是如何被调用的,在其中加入console.trace()方法就可以了*/</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">){</span>
<span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">trace</span><span class="crayon-sy">();</span>
<span class="crayon-h"> </span> <span class="crayon-st">return</span> <span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span>
<span class="crayon-h"> </span> <span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-t">var</span> <span class="crayon-v">x</span><span class="crayon-h"> = </span><span class="crayon-e">add3</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">1</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">add3</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">){</span><span class="crayon-st">return</span> <span class="crayon-e">add2</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">);}</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">add2</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">){</span><span class="crayon-st">return</span> <span class="crayon-e">add1</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">);}</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">add1</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">){</span><span class="crayon-st">return</span> <span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">);}</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
控制台输出信息:
八、计时功能
console.time()和console.timeEnd(),用来显示代码的运行时间。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<span class="crayon-h"> </span><span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">time</span><span class="crayon-sy">(</span><span class="crayon-s">"控制台计时器一"</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-cn">1000</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">){</span>
<span class="crayon-h"> </span> <span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">j</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">j</span><span class="crayon-o"><</span><span class="crayon-cn">1000</span><span class="crayon-sy">;</span><span class="crayon-v">j</span><span class="crayon-o">++</span><span class="crayon-sy">){}</span>
<span class="crayon-h"> </span> <span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">timeEnd</span><span class="crayon-sy">(</span><span class="crayon-s">"控制台计时器一"</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
运行时间是38.84ms
九、console.profile()的性能分析
性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<span class="crayon-h"> </span><span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">All</span><span class="crayon-sy">(){</span>
<span class="crayon-h"> </span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-cn">11</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-cn">10</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">){</span>
<span class="crayon-h"> </span><span class="crayon-e">funcA</span><span class="crayon-sy">(</span><span class="crayon-cn">1000</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span><span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-e">funcB</span><span class="crayon-sy">(</span><span class="crayon-cn">10000</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-h"> </span><span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">funcA</span><span class="crayon-sy">(</span><span class="crayon-v">count</span><span class="crayon-sy">){</span>
<span class="crayon-h"> </span> <span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-v">count</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">){}</span>
<span class="crayon-h"> </span> <span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-t">function</span> <span class="crayon-e">funcB</span><span class="crayon-sy">(</span><span class="crayon-v">count</span><span class="crayon-sy">){</span>
<span class="crayon-h"> </span> <span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-v">count</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">){}</span>
<span class="crayon-h"> </span> <span class="crayon-sy">}</span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">profile</span><span class="crayon-sy">(</span><span class="crayon-s">'性能分析器'</span><span class="crayon-sy">);</span>
<span class="crayon-h"> </span> <span class="crayon-e">All</span><span class="crayon-sy">();</span>
<span class="crayon-h"> </span> <span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">profileEnd</span><span class="crayon-sy">();</span>
<span class="crayon-h"> </span><span class="crayon-ta"></script></span>
|
输出如图: