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

一、显示信息的命令

 <!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
     <script type="text/javascript">
         console.log('hello');         console.info('信息');         console.error('错误');         console.warn('警告');     </script>
 </body>
 </html>

最常用的就是console.log了。

二:占位符

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

<script type="text/javascript">
         console.log("%d年%d月%d日",2011,3,26);</script>

效果:

三、信息分组

<!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
     <script type="text/javascript">
         console.group("第一组信息");

         console.log("第一组第一条:我的博客(http://www.ido321.com)");

         console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");

       console.groupEnd();

       console.group("第二组信息");

          console.log("第二组第一条");

        console.log("第二组第二条:欢迎你加入");

       console.groupEnd();      </script>
 </body>
 </html>

效果:

四、查看对象的信息

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

<script type="text/javascript">
         var info = {
             blog:"http://www.ido321.com",
             QQGroup:259280570,
             message:"程序爱好者欢迎你的加入"
         };         console.dir(info);</script>

效果:

五、显示某个节点的内容

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

<!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <div id="info">
         <h3>我的博客:www.ido321.com</h3>
         <p>程序爱好者:259280570,欢迎你的加入</p>
     </div>
     <script type="text/javascript">
         var info = document.getElementById('info');         console.dirxml(info);     </script>
 </body>
 </html>

效果:

六、判断变量是否是真

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

<script type="text/javascript">
      var result = 1;
      console.assert( result );
      var year = 2014;
      console.assert(year == 2018 );</script>

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

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

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

<script type="text/javascript">
 /*函数是如何被调用的,在其中加入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>

控制台输出信息:

八、计时功能

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

<script type="text/javascript">
   console.time("控制台计时器一");
   for(var i=0;i<1000;i++){
     for(var j=0;j<1000;j++){}
   }
   console.timeEnd("控制台计时器一");</script>

运行时间是38.84ms

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

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

 <script type="text/javascript">
       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>

输出如图:

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2016-09-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯Bugly的专栏

Duang~ Android堆栈慘遭毁容?精神哥揭露毁容真相!

最近精神哥接到多个小伙伴的投诉,说无法看懂Bugly崩溃克星页面上显示的堆栈信息!精神哥赶紧把正研究的Top Crash崩溃和心爱的鸡爪放下,开始着手跟进。经分...

3405
来自专栏流媒体

Makefile文件编写

make 的参数有很多, 可以通过 make -h 去查看, 下面只介绍几个我认为比较有用的。

1183
来自专栏FreeBuf

Phpcms v9漏洞分析

最近研究源码审计相关知识,会抓起以前开源的CMS漏洞进行研究,昨天偶然看见了这个PHPCMS的漏洞,就准备分析研究一番,最开始本来想直接从源头对代码进行静态分析...

3017
来自专栏崔庆才的专栏

用Flask+Aiohttp+Redis维护动态代理池

5255
来自专栏向治洪

Android性能优化之TraceView和Lint使用详解

Android lint工具是Android studio中集成的一个代码提示工具,它主要负责对你的代码进行优化提示,包括xml和java文件,很强大。编写完代...

2526
来自专栏F-Stack的专栏

FreeBSD下的工具(sysctl、netstat等)如何移植到F-Stack

在之前的文章中,我们介绍了如何使用DPDK rte_ring来进行多进程的通信,tools/ipc目录就是基于rte_ring实现了一个简单的ipc框架。下面以...

6781
来自专栏小詹同学

人脸识别(二)——训练分类器的补充说明

之前训练分类器时利用的是一个csv文件的读取,这里仅仅用几句话介绍一种简单易行的方法。 说到底,这类问题可以归类于读取指定文件夹...

4146
来自专栏非典型程序猿

从源码透析gRPC调用原理

gRPC是如何work的,清楚的理解其调用逻辑,对于我们更好、更深入的使用gRPC很有必要。因此我们必须深度解析下gRPC的实现逻辑,在本文中,将分别从客户端和...

4.1K8
来自专栏Java编程技术

UML建模(状态图)

状态机图是一种行为图,它通过使用有限的状态转移展示了一个系统中一个模块的一些离散的行为,在UML2.4里面有两种状态机图:行为状态机(behavioral st...

1222
来自专栏大史住在大前端

webpack4.0各个击破(7)—— plugin篇

plugin机制是webpack中另一个核心概念,它基于事件流框架tapable,你可以参考浏览器环境中的【DOM事件模型】,【SPA模型中的生命周期钩子】或是...

1652

扫码关注云+社区

领取腾讯云代金券