目录
一、显示信息的命令
二:占位符
三、信息分组
四、查看对象的信息
五、显示某个节点的内容
七、追踪函数的调用轨迹。
八、计时功能
九、console.profile()的性能分析
首页 web前端 js教程 Web程序员必备 Console 对象里的九个方法

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

Jul 06, 2020 pm 04:47 PM
console javascript

Web程序员必备 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(&#39;hello&#39;);
           console.info(&#39;信息&#39;);
           console.error(&#39;错误&#39;);
           console.warn(&#39;警告&#39;);
       </script>
   </body>
   </html>
登录后复制

最常用的就是console.log了。

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

二:占位符

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

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

效果:

image

三、信息分组

    <!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.webhek.com)");
  
           console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
  
         console.groupEnd();
  
         console.group("第二组信息");
  
           console.log("第二组第一条:程序爱好者QQ群: 259280570");
  
           console.log("第二组第二条:欢迎你加入");
  
         console.groupEnd();
       </script>
   </body>
   </html>
登录后复制

效果:

image

四、查看对象的信息

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

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

效果:

image

五、显示某个节点的内容

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>
        <p id="info">
            <h3>我的博客:www.webhek.com</h3>
           <p>程序爱好者:259280570,欢迎你的加入</p>
       </p>
       <script type="text/javascript">
           var info = document.getElementById(&#39;info&#39;);
           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值,是真;而第二个判断是假,在控制台显示错误信息

image

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

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>
登录后复制

控制台输出信息:

image

八、计时功能

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

image

九、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(&#39;性能分析器&#39;);
         All();
         console.profileEnd();
       </script>
登录后复制

输出如图:

image

以上是Web程序员必备 Console 对象里的九个方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

全新 Nintendo Switch Lite 更新现已开放预订 全新 Nintendo Switch Lite 更新现已开放预订 Jun 29, 2024 am 06:49 AM

任天堂已开放最新版本 Switch Lite 的预订(亚马逊售价 189.99 美元)。不过,该设备目前还无法在全球范围内订购。回顾一下,该公司在大约两周前推出了 Switch Lite Hyrule 版

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

任天堂在 Switch 2 发布前宣布更新 Switch Lite 任天堂在 Switch 2 发布前宣布更新 Switch Lite Jun 20, 2024 am 09:41 AM

任天堂昨天在最近的任天堂直面活动中展示了大量游戏,我们单独提供了概述。此外,该公司还发布了新版本的 Switch Lite(亚马逊售价 194.93 美元),可能是

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

MagicX XU Mini M:拆解显示 RK3326 CPU 而不是广告中的 RK3562,MagicX 断绝与第三方开发者的联系 MagicX XU Mini M:拆解显示 RK3326 CPU 而不是广告中的 RK3562,MagicX 断绝与第三方开发者的联系 Sep 01, 2024 am 06:30 AM

如果您最近购买了 MagicX XU Mini M,这个消息可能会让您感到惊讶。对新发布的手持式游戏机​​的硬件和软件拆解显示,广告中的 RK3562 CPU 实际上是规格较低、较旧的 RK3326 处理器。

See all articles