365bet体育|www.635288com-365体育手机在线

热门关键词: 365bet体育,www.635288com,365体育手机在线

如果没有内置调试工具

2019-05-16 作者:365bet体育   |   浏览(102)

javaScript调试工具console命令的使用

  我最先认识到console命令是在javaScript中看到的,当时只是知道它的console.log()命令的使用,并没有深究。后来,特意去查了下,并通过这篇博客记录下来。

一、console是干嘛的?     

  我的理解是: 在浏览器控制台中显示信息,常用于程序代码的调试并查找问题。

  在程序代码中寻找错误叫做代码调试。调试很难,但很幸运的是,很多的浏览器都内置了调试工具,通常代码中,会出现如语法错误,逻辑错误等等问题,如果没有内置调试工具,将很痛苦。

二、如何使用?

  浏览器的调试工具通过F12快捷键打开,或者是在浏览器窗口(网页文档)右键,菜单中选择“审查元素”  或者是“检查”项,即可打开,打开如图。图片 1

 

 

三、console的命令分类:

      显示信息命令、占位符、信息分组、查看对象信息、查看某个节点内容、判断变量是否为真、追踪函数的调用轨迹、计时功能、性能分析、表格打印

  1、显示信息的命令

  (1)console.log()  打印

  

1 <body>
2      <script>
3          console.log('hello');
4       </script>
5 </body>

 

   在浏览器中运行打开

  图片 2

  (2) console.info()  信息

  

<body>
    <script>
        console.info('信息');
    </script>
</body>

   在浏览器中运行打开,直接打印内容

图片 3

 

  (3) console.error()  错误

  

<body>
    <script>
        console.error('错误');
    </script>
</body>

 

   在浏览器中运行打开,显示类似于报错的消息

图片 4

  (4) console.warn()   警告

<body>
    <script>
        console.warn("警告");
    </script>
</body>

   在浏览器中运行打开,显示是黄色的,并有感叹号

图片 5

 

   2、占位符

      console还只是printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o),下面一一来实验一下。

  (1)整数(%s)

<body>
    <script>
       console.log("%d年%d月%d日", 2017, 1, 8);
    </script>
</body>

   在浏览器中运行打开,会看到第一个 %d 被替换成了2017, 第二个%d 被替换成了 1,第三个%d 被替换成了 8,依次代入替换

图片 6

   注意:少了参数会如何?当你是console.log("%d年%d月%d日", 2017, 8);  输入,少了一个参数,那么就不会被替换,而是按原样内容显示:

图片 7

多了参数会如何?在这儿,我换成了代码如:console.log("%d年%d月%d日", 2017, 8,2,5,9);  结果发现,多余的参数会直接显示出来:

图片 8

(2)字符(%s)

  顾名思义,替换内容为字符串

<body>
    <script>
           console.log("%s你好,%s", "kaikai", "hello word");
    </script>
</body>

图片 9

(3)对象(%o)

<body>
    <script>
            var a = 0;
             console.log("%o这是一个对象", a);
    </script>
</body>

  定义了一个变量 a ,把 0  赋值给变量 a  

图片 10

 

 

 在javascript中,万物皆对象。显示会把  变量a的值直接打印出来。

(3)整数(%i)  

    不支持小数点和字符串,会默认取整

<body>
    <script>
            console.log("%i是一个数", 5.9);
             console.log("%i是一个数", 5)
             console.log("%i是一个数", "5");
    </script>
</body>

  图片 11

忽略了小数点,并且字符串会显示为NaN ,NaN (not a number) 不是一个数字

   3、信息分组 

   当你网页中有很多的console.log()时,你可以使用分组的方式,来进行分类。使用方式:以 console.group()开始,以console.groupEnd()结束。

<body>
    <script>
            console.group("第一组信息");
            console.log("第一组第一条:我是张三");
            console.log("第一组第二条:我喜欢打乒乓");
            console.groupEnd();
            console.group("第二组信息");
            console.log("第二组第一条:我是李四");
            console.log("第二组第二条:我喜欢打篮球");
            console.groupEnd();
    </script>
</body>

图片 12

可以收缩以及展开,想看哪一组的console.log()的打印信息变得非常方便有条理。

 

   4、查看对象的信息

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

<body>
    <script>
                var info={
                    name:"kaikai",
                    age:20,
                    intro:"开朗、活泼"
        };
            console.dir(info);
    </script>
</body> 

图片 13

   5、显示某个节点的内容

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

  

<body>
        <div id="info">
                <h3>这是h3标题</h3>
                <p>这是一个段落</p>
        </div>
       <script>
             var infoxml = document.getElementById("info");
             console.dirxml(infoxml);
       </script>
</body>

 

 图片 14

   6、判断变量是否为真

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

var res = 1;
console.assert(res);//1是非0值,是真;
 var year = 2014;
console.assert(year==2018);//Assertion failed: console.assert

   7、追踪函数的调用轨迹

console.trace()用来追踪函数的调用轨迹,函数调用栈信息,来查看函数调用过程,一般会选择将这个方法放在最后执行的函数的方法体中。

//         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);        }
//         //解释:为什么打印add,add1,add2,add3?
//         //由于栈是先进后出机制,所以先执行的方法会在后面输出,因此上述代码结果会按照add,add1,add2,add3的顺序输出。

   8、计时功能

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

time()和timeEnd()可以接收一个字符串作为标识,而且两个方法接收的字符串必须一样,如果没有传入字符串则默认为‘default'字符串。

 

     console.time("执行耗时");
    for(var i = 0 ; i< 1000;i  ){
          for(var j = 0;j<1000;j  ){}
    }
   console.timeEnd("执行耗时");

图片 15

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

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

        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("性能分析器");

10、表格打印

可以直接将对象类型的数据以表格展示。

      var data = [
            {'名称':'蛋糕','数量':5,'价格':30},
            {'名称':'啤酒','数量':2,'价格':20},
        ];
        console.table(data);

 

图片 16

 

本文由365bet体育发布于365bet体育,转载请注明出处:如果没有内置调试工具

关键词: 365bet手机开户

365bet体育推荐