9 个让 JavaScript 调试更简单的 Console 命令

最新推荐文章于 2021-03-02 11:57:54 发布

huygo

最新推荐文章于 2021-03-02 11:57:54 发布

阅读量320

点赞数

一、显示信息的命令

 <span class="hljs-meta" style="color:#999999;font-weight:bold"><!DOCTYPE html></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">html</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">head</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">title</span>></span>常用console命令<span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">title</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">meta</span> <span class="hljs-attr" style="color:#08080;">http-equiv</span>=<span class="hljs-string" style="color:#dd1144;">"Content-Type"</span> <span class="hljs-attr" style="color:#08080;">content</span>=<span class="hljs-string" style="color:#dd1144;">"text/html; charset=utf-8"</span> /></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">head</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">body</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
         <span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">'hello'</span>);
         <span class="hljs-built_in" style="color:#086b3;">console</span>.info(<span class="hljs-string" style="color:#dd1144;">'信息'</span>);
         <span class="hljs-built_in" style="color:#086b3;">console</span>.error(<span class="hljs-string" style="color:#dd1144;">'错误'</span>);
         <span class="hljs-built_in" style="color:#086b3;">console</span>.warn(<span class="hljs-string" style="color:#dd1144;">'警告'</span>);
     </span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">body</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">html</span>></span>

最常用的就是console.log了。

二：占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

<span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
         <span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">"%d年%d月%d日"</span>,<span class="hljs-number" style="color:#08080;">2011</span>,<span class="hljs-number" style="color:#08080;">3</span>,<span class="hljs-number" style="color:#08080;">26</span>);
</span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

效果：

三、信息分组

<span class="hljs-meta" style="color:#999999;font-weight:bold"><!DOCTYPE html></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">html</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">head</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">title</span>></span>常用console命令<span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">title</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">meta</span> <span class="hljs-attr" style="color:#08080;">http-equiv</span>=<span class="hljs-string" style="color:#dd1144;">"Content-Type"</span> <span class="hljs-attr" style="color:#08080;">content</span>=<span class="hljs-string" style="color:#dd1144;">"text/html; charset=utf-8"</span> /></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">head</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">body</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
         <span class="hljs-built_in" style="color:#086b3;">console</span>.group(<span class="hljs-string" style="color:#dd1144;">"第一组信息"</span>);

     　　　　<span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">"第一组第一条:我的博客(http://www.ido321.com)"</span>);

     　　　　<span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">"第一组第二条:CSDN(http://blog.csdn.net/u011043843)"</span>);

     　　<span class="hljs-built_in" style="color:#086b3;">console</span>.groupEnd();

 　　    <span class="hljs-built_in" style="color:#086b3;">console</span>.group(<span class="hljs-string" style="color:#dd1144;">"第二组信息"</span>);

      　　　　<span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">"第二组第一条"</span>);

    　　　　<span class="hljs-built_in" style="color:#086b3;">console</span>.log(<span class="hljs-string" style="color:#dd1144;">"第二组第二条:欢迎你加入"</span>);

 　　    <span class="hljs-built_in" style="color:#086b3;">console</span>.groupEnd();
      </span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">body</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">html</span>></span>

效果：

四、查看对象的信息

console.dir()可以显示一个对象所有的属性和方法。

<span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
         <span class="hljs-keyword" style="font-weight:bold">var</span> info = {
             blog:<span class="hljs-string" style="color:#dd1144;">"http://www.ido321.com"</span>,
             QQGroup:<span class="hljs-number" style="color:#08080;">259280570</span>,
             message:<span class="hljs-string" style="color:#dd1144;">"程序爱好者欢迎你的加入"</span>
         };
         <span class="hljs-built_in" style="color:#086b3;">console</span>.dir(info);
</span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

效果：

五、显示某个节点的内容

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

<span class="hljs-meta" style="color:#999999;font-weight:bold"><!DOCTYPE html></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">html</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">head</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">title</span>></span>常用console命令<span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">title</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">meta</span> <span class="hljs-attr" style="color:#08080;">http-equiv</span>=<span class="hljs-string" style="color:#dd1144;">"Content-Type"</span> <span class="hljs-attr" style="color:#08080;">content</span>=<span class="hljs-string" style="color:#dd1144;">"text/html; charset=utf-8"</span> /></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">head</span>></span>
 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color:#08080;">id</span>=<span class="hljs-string" style="color:#dd1144;">"info"</span>></span>
         <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">h3</span>></span>我的博客：www.ido321.com<span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">h3</span>></span>
         <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">p</span>></span>程序爱好者:259280570,欢迎你的加入<span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">p</span>></span>
     <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">div</span>></span>
     <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
         <span class="hljs-keyword" style="font-weight:bold">var</span> info = <span class="hljs-built_in" style="color:#086b3;">document</span>.getElementById(<span class="hljs-string" style="color:#dd1144;">'info'</span>);
         <span class="hljs-built_in" style="color:#086b3;">console</span>.dirxml(info);
     </span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">body</span>></span>
 <span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">html</span>></span>

效果：

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

<span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
     　<span class="hljs-keyword" style="font-weight:bold">var</span> result = <span class="hljs-number" style="color:#08080;">1</span>;
     　<span class="hljs-built_in" style="color:#086b3;">console</span>.assert( result );
     　<span class="hljs-keyword" style="font-weight:bold">var</span> year = <span class="hljs-number" style="color:#08080;">2014</span>;
     　<span class="hljs-built_in" style="color:#086b3;">console</span>.assert(year == <span class="hljs-number" style="color:#08080;">2018</span> );
</span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

1是非0值，是真；而第二个判断是假，在控制台显示错误信息

七、追踪函数的调用轨迹。

console.trace()用来追踪函数的调用轨迹。

<span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
 <span class="hljs-comment" style="color:#999988;">/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/</span>
　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">add</span>(<span class="hljs-params">a,b</span>)</span>{
         <span class="hljs-built_in" style="color:#086b3;">console</span>.trace();
 　　　　<span class="hljs-keyword" style="font-weight:bold">return</span> a+b;
　　}
　　<span class="hljs-keyword" style="font-weight:bold">var</span> x = add3(<span class="hljs-number" style="color:#08080;">1</span>,<span class="hljs-number" style="color:#08080;">1</span>);
 　  <span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">add3</span>(<span class="hljs-params">a,b</span>)</span>{<span class="hljs-keyword" style="font-weight:bold">return</span> add2(a,b);}
　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">add2</span>(<span class="hljs-params">a,b</span>)</span>{<span class="hljs-keyword" style="font-weight:bold">return</span> add1(a,b);}
　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">add1</span>(<span class="hljs-params">a,b</span>)</span>{<span class="hljs-keyword" style="font-weight:bold">return</span> add(a,b);}
</span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

控制台输出信息：

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

<span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
 　　<span class="hljs-built_in" style="color:#086b3;">console</span>.time(<span class="hljs-string" style="color:#dd1144;">"控制台计时器一"</span>);
 　　<span class="hljs-keyword" style="font-weight:bold">for</span>(<span class="hljs-keyword" style="font-weight:bold">var</span> i=<span class="hljs-number" style="color:#08080;">0</span>;i<<span class="hljs-number" style="color:#08080;">1000</span>;i++){
 　　　　<span class="hljs-keyword" style="font-weight:bold">for</span>(<span class="hljs-keyword" style="font-weight:bold">var</span> j=<span class="hljs-number" style="color:#08080;">0</span>;j<<span class="hljs-number" style="color:#08080;">1000</span>;j++){}
 　　}
 　　<span class="hljs-built_in" style="color:#086b3;">console</span>.timeEnd(<span class="hljs-string" style="color:#dd1144;">"控制台计时器一"</span>);
</span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

运行时间是38.84ms

九、console.profile()的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

 <span class="hljs-tag" style="color:#0080;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color:#08080;">type</span>=<span class="hljs-string" style="color:#dd1144;">"text/javascript"</span>></span><span class="javascript">
     　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">All</span>(<span class="hljs-params"></span>)</span>{
             alert(<span class="hljs-number" style="color:#08080;">11</span>);
 　　　　     <span class="hljs-keyword" style="font-weight:bold">for</span>(<span class="hljs-keyword" style="font-weight:bold">var</span> i=<span class="hljs-number" style="color:#08080;">0</span>;i<<span class="hljs-number" style="color:#08080;">10</span>;i++){
                 funcA(<span class="hljs-number" style="color:#08080;">1000</span>);
              }
 　　　　    funcB(<span class="hljs-number" style="color:#08080;">10000</span>);
 　　    }

     　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">funcA</span>(<span class="hljs-params">count</span>)</span>{
     　　　　<span class="hljs-keyword" style="font-weight:bold">for</span>(<span class="hljs-keyword" style="font-weight:bold">var</span> i=<span class="hljs-number" style="color:#08080;">0</span>;i<count;i++){}
     　　}

     　　<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold">function</span> <span class="hljs-title" style="color:#9900;font-weight:bold">funcB</span>(<span class="hljs-params">count</span>)</span>{
     　　　　<span class="hljs-keyword" style="font-weight:bold">for</span>(<span class="hljs-keyword" style="font-weight:bold">var</span> i=<span class="hljs-number" style="color:#08080;">0</span>;i<count;i++){}
     　　}

     　　<span class="hljs-built_in" style="color:#086b3;">console</span>.profile(<span class="hljs-string" style="color:#dd1144;">'性能分析器'</span>);
     　　All();
     　　<span class="hljs-built_in" style="color:#086b3;">console</span>.profileEnd();
     </span><span class="hljs-tag" style="color:#0080;"></<span class="hljs-name">script</span>></span>

huygo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9 个让 JavaScript 调试更简单的 Console 命令

一、显示信息的命令 html> head> title>常用console命令title> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> head> body> script type="text/javascript"> console.log
复制链接

扫一扫