js中console主要用于debug时使用

测试代码如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

         "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Console</title>

     <script type="text/javascript">

      window.onload=_pageLoaded;

      /**

       * 页面加载完毕后执行的函数

       * @private

       */

      function _pageLoaded() {

          //1.消息级别

          console.log('日志');

          console.debug('调试');

          console.info('消息');

          console.warn('警告');

          console.error('错误');

          console.info('~~~');

          //2.占位符

          console.info('我叫%s','张泰松');//%s：字符串

          console.info('今天是%d年%i月%d日',2019,4,15);//%d、%i：整数

          console.info('猪肉价格是%f元/金',9.98);//%f：浮点数

          var person = {name:'pine',age:28};

          console.info('我的具体信息是:%o',person);//%o：对象

          console.info('~~~');

          //3.分组显示信息

          console.group('第一组');

          console.info('第一组-第一条');

          console.info('第一组-第二条');

          console.groupEnd();

          console.group('第二组');

          console.info('第二组-第一条');

          console.info('第二组-第二条');

          console.groupEnd();

          console.info('~~~');

          //4.显示一个对象

          person['showName']=function(){

              var self = this;

              console.info(self.name);

          };

          console.dir(person);

          console.info('~~~');

          //5.显示节点所包含的html代码

          var body1 = document.getElementById("body1");

          console.dirxml(body1);

          var table1 = document.getElementById("table1")

          console.dirxml(table1);

          console.info('~~~');

          //6.断言(判断表达式或变量是否为真，如果为真，则不做处理；如果为假，则打印出错误信息)

          var a=null;

          console.assert(a==null);

          var b=2;

          console.assert(b>3);

          console.info('~~~');

          //7.显示函数的调用踪迹

          var result = add3(1,2);

          function add3(x,y){return add2(x,y);}

          function add2(x,y){return add1(x,y);}

          function add1(x,y){return add (x,y);}

          function add (x,y){

              console.trace('函数调用踪迹~~~');

              return x+y;

          }

          console.info(result);

          console.info('~~~');

          //8.显示代码的运行时间

          console.time('time1');

          for(var i=0;i<10000;i++){

              for(var j=0;j<10000;j++){

              }

          }

          console.timeEnd('time1');

          console.info('~~~');

          //9.对代码进行性能分析

          function foo(){

            for(var i=0;i<10;i++){

                bar1(1000);

            }

            bar2(10000);

          }

          function bar1(count){

            for(var i=0;i<count;i++){

            }

          }

          function bar2(count){

            for(var i=0;i<count;i++){

            }

          }

          console.profile('性能分析1');

          foo();

          console.profileEnd('性能分析1');

          /**

           * 性能分析：

           * IE没反应

           * firefox需要手动调用下profileEnd方法来结束性能分析

           * chrome打印出来2条消息，在JavaScript Profiler可以找到profile

           *

           * IE、firefox、chrome都可以进行手动性能分析

           */

      }

     </script>

 </head>

 <body id="body1">

   <table id="table1">

       <tr>

           <td>1</td><td>2</td>

       </tr>

       <tr>

           <td>3</td><td>4</td>

       </tr>

   </table>

 </body>

 </html>

js中console使用1的更多相关文章

  1. js中console使用2

    接着上一篇js中console使用1,本片继续介绍js中console的用法 测试代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  2. js中console强大之处体现在哪

    js中console强大之处体现在哪 一.总结 一句话总结:在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对conso ...

  3. js中console在一行内打印字符串和对象

    在前端开发中,大多数的调试一般都是F12中的console和network中查看请求数据和响应数据,也有一部分人喜欢用debugger. 在开发大一些的项目时,在开发环境下,打开着控制台,切换一下页面 ...

  4. js中console.info的使用

    语法:console.info(obj1 [, obj2, ..., objN]);console.info(msg [, subst1, ..., substN]); 参数obj1 ... objN ...

  5. JS中EventLoop、宏任务与微任务的个人理解

    为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...

  6. 分享一个自定义的 console 类，让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...

  7. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  8. 在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  9. 关于js中this关键字的补充

    前面: 前面虽然综合了网络上不少大牛的心得,但感觉还是意犹未尽,为了彻底搞清楚js中this的相关知识,决定再写一篇.个人觉得,在技术上,除非钻到细枝末节,否则很难达至非常高的水平. 补充1: 无法重 ...

随机推荐

  1. MIP技术进展月报第2期: 数据绑定，异步脚本加速

    一. 功能更新 1. mip-bind 上线,实现复杂交互 MIP bind 双向绑定机制和组件上线,提供双向绑定的特性:能够允许页面实现数据驱动功能,开发者可以在任意场景修改数据,并驱动页面元素变动 ...

  2. 二维码神器QRCoder

    好久没有写Blog,都是因为不小心坠入了爱河,时间都给我家那位了,都没时间加班了(嗨呀,不小心撒了一下狗粮),不过,还是希望单身的赶紧找到心仪的另一半,实在找不到,那就加班啊(开个玩笑,别认真). 二 ...

  3. C#判断字符串是不是英文或数字

    利用正则.   u4e00-u9fa5; //中文  ^[A-Za-z]+$  //英文字母 //截取冲击式样形状 public string SubStringForXingZhuang(strin ...

  4. ES 11 - 配置Elasticsearch的映射 (mapping)

    目录 1 映射的相关概念 1.1 什么是映射 1.2 映射的组成 1.3 元字段 1.4 字段的类型 2 如何配置mapping 2.1 创建mapping 2.2 更新mapping 2.3 查看m ...

  5. Java8新特性之一：Lambda表达式

    Java8是自java5之后最重大的一次更新,它给JAVA语言带来了很多新的特性(包括编译器.类库.工具类.JVM等),其中最重要的升级是它给我们带来了Lambda表达式和Stream API. 1. ...

  6. 边缘计算在物联网(IoT)当中的运用「物联网架构探索系列」

    这里记录的是我对物联网架构的学习.探索和思考,希望对你有所启发…… 边缘计算是指在靠近物或数据源头的一侧,采用网络.计算.存储.应用核心能力为一体的开放平台,就近提供最近端服务.其应用程序在边缘侧发起 ...

  7. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  8. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-layers/index.html] 一.Intro t ...

  9. 章节十、7-Xpath---Xpath中绝对路径相对路径的区别

    以下演示操作以该网址中的内容为例:https://learn.letskodeit.com/?_ga=2.143454972.85111248.1555037144-697706367.1554889 ...

  10. 实地探访：月薪 12K 的北京程序员是怎么工作生活的？

    阅读本文大概需要 4 分钟. “ 每个人都有自己的亲身经历,每个人都有一条生活道路.千万人千万条,各不相同,各有特点.但是并不是好人都有一条好路,坏人都有一条坏路,有的时候却恰恰相反.这虽然不是历史的 ...