首页 > > 网页制作 > Javascript >

【知了堂学习笔记】javaScript调试工具console的…

2018-06-24 01:13:22来源：未知阅读 ()

javaScript调试工具console命令的使用

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

一、console是干嘛的？

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

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

二、如何使用?

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

三、console的命令分类：

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

　　1、显示信息的命令

　　（1）console.log() 打印

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

　　在浏览器中运行打开

　　（2） console.info() 信息

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

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

　　（3） console.error() 错误

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

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

　　（4） console.warn() 警告

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

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

　　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，依次代入替换

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

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

（2）字符（%s）

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

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

（3）对象（%o）

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

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

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

（3）整数（%i）

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

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

忽略了小数点，并且字符串会显示为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>

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

　　4、查看对象的信息

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

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

　　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>

　　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("执行耗时");

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);

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：js基础查漏补缺（更新）

下一篇：js介绍

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签