Web程序员必备 Console 对象里的九个方法

Web程序员必备 Console 对象里的九个方法

一、显示信息的命令

    nbsp;html>                常用console命令                                    console.log('hello');           console.info('信息');           console.error('错误');           console.warn('警告');             

登录后复制

最常用的就是console.log了。

相关学习推荐:javascript视频教程

二:占位符

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

                console.log("%d年%d月%d日",2011,3,26);    

登录后复制

效果:

image

三、信息分组

    nbsp;html>                常用console命令                                    console.group("第一组信息");             console.log("第一组第一条:我的博客(http://www.webhek.com)");             console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");           console.groupEnd();           console.group("第二组信息");             console.log("第二组第一条:程序爱好者QQ群: 259280570");             console.log("第二组第二条:欢迎你加入");           console.groupEnd();             

登录后复制

效果:

image

四、查看对象的信息

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

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

登录后复制

效果:

image

五、显示某个节点的内容

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

    nbsp;html>                常用console命令                        

            

我的博客:www.webhek.com

           

程序爱好者:259280570,欢迎你的加入

               var info = document.getElementById('info'); console.dirxml(info);       

登录后复制

六、判断变量是否是真

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

              var result = 1;          console.assert( result );          var year = 2014;          console.assert(year == 2018 );    

登录后复制

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

image

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

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

        /*函数是如何被调用的,在其中加入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);}   

登录后复制

控制台输出信息:

image

八、计时功能

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

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

登录后复制

运行时间是38.84ms

image

九、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();       

登录后复制

输出如图:

image

以上就是Web程序员必备 Console 对象里的九个方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2726985.html

(0)
上一篇 2025年3月7日 23:40:06
下一篇 2025年3月7日 23:40:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详解js在html中的加载执行顺序

    js在html中的加载执行顺序 1.加载顺序:引入标记的出现顺序, 页面上的js代码是js的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记的出现顺序, 标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执…

    编程技术 2025年4月4日
    100
  • HTML和JS实现简单的计算器

    HTML和JS实现计算器功能的也是很容易的,本文主要和大家分享HTML和JS实现简单的计算器,希望能帮助到大家。 下面是代码:    nbsp;html>无标题文档 var result=””; function jisuan(num…

    编程技术 2025年4月4日
    100
  • 实现在HTML页面加载完毕后运行js方法

    本文主要和大家分享实现在HTML页面加载完毕后运行js方法,主要以代码的方法和大家分享,希望能帮助到大家。 Js方法: window.onload=function (){ var userName=”xiaoming”; alert(us…

    编程技术 2025年4月4日
    100
  • JavaScript实现获取远程的html到当前页面中

    今天做个项目,需要在当前的html页面中引用一个远程的html页面,百度了一下,发现一个非常好用的代码,这里分享给大家,有相同需求的小伙伴可以来看看 html代码 登录后复制 立即学习“Java免费学习笔记(深入)”; javascript…

    编程技术 2025年4月4日
    200
  • JavaScript模块优化

    给大家分享一下如何才能开发出更好的javascript模块和功能,有兴趣的朋友参考学习下吧。 不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块,而在使用一些模块的过程中,我经常产生“这个模块很有用,但如果能 xxx 就…

    编程技术 2025年4月4日
    100
  • 适用于JavaScript开发人员的10个必备VSCode扩展

    如今,visual studio code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从sublime和atom那里。然而它的成功关键是源于能提供更好的性能和稳定的表现。 另外,它还提供了如代码智能提示等开发…

    2025年4月2日 编程技术
    200
  • 提高 JavaScript 开发效率的高级 VSCode 扩展!

    如今,visual studio code无疑是最流行的轻量级代码编辑器。vs code的强大无疑来自于它的插件市场。多亏了开源社区,vs code现在几乎对所有的编程语言、框架和开发技术都有支持。 提供这种支持的方式是多样的,主要包括了为…

    2025年4月2日 编程技术
    200
  • 如何利用Vue实现拖拽穿梭框功能?四种方式介绍

    如何实现拖拽穿梭框功能?下面本篇文章给大家介绍一下vue实现拖拽穿梭框功能四种方式,希望对大家有所帮助。 【相关推荐:vue】 一、使用原生js实现拖拽 vue Lazyload .drag { background-color: skyb…

    2025年4月1日
    100
  • 聊聊MVVM模型在Vue中怎么应用

    理解MVVM模型 我们知道每一个 Vue 应用都是从创建一个新的实例开始的,根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发,所以就有了在我们创建 Vue 实例时,文档中经常使用vm这个变量名来表示 V…

    2025年4月1日 编程技术
    200
  • 浅析Vue3动态组件怎么进行异常处理

    vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊vue3 动态组件异常处理的方法,希望对大家有所帮助! 【相关推荐:vuejs视频教程】 动态组件有两种常用场景: 一是动态路由: 立即学习“前端免费学习笔记(深入)”; // 动态路…

    2025年4月1日
    100

发表回复

登录后才能评论