Jadual Kandungan
一、显示信息的命令
二:占位符
三、信息分组
四、查看对象的信息
五、显示某个节点的内容
七、追踪函数的调用轨迹。
八、计时功能
九、console.profile()的性能分析
Rumah hujung hadapan web tutorial 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>
Salin selepas log masuk

最常用的就是console.log了。

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

二:占位符

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

    <script type="text/javascript">
            console.log("%d年%d月%d日",2011,3,26);
    </script>
Salin selepas log masuk

效果:

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>
Salin selepas log masuk

效果:

image

四、查看对象的信息

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

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

效果:

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>
Salin selepas log masuk

六、判断变量是否是真

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

    <script type="text/javascript">
          var result = 1;
          console.assert( result );
          var year = 2014;
          console.assert(year == 2018 );
    </script>
Salin selepas log masuk

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>
Salin selepas log masuk

控制台输出信息:

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>
Salin selepas log masuk

运行时间是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>
Salin selepas log masuk

输出如图:

image

Atas ialah kandungan terperinci Web程序员必备 Console 对象里的九个方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Prapesanan dibuka untuk muat semula Nintendo Switch Lite baharu Prapesanan dibuka untuk muat semula Nintendo Switch Lite baharu Jun 29, 2024 am 06:49 AM

Nintendo telah membuka prapesanan untuk versi terkini Switch Lite (kurr. $189.99 di Amazon). Walau bagaimanapun, peranti itu belum lagi tersedia untuk dipesan secara global. Untuk mengimbas kembali, syarikat itu membentangkan Edisi Switch Lite Hyrule hampir dua minggu lalu d

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 pm 02:54 PM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Dec 17, 2023 pm 12:09 PM

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 am 09:39 AM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

Nintendo mengumumkan penyegaran Switch Lite baharu sebelum keluaran Switch 2 Nintendo mengumumkan penyegaran Switch Lite baharu sebelum keluaran Switch 2 Jun 20, 2024 am 09:41 AM

Nintendo mempersembahkan banyak permainan semalam semasa acara Nintendo Direct terbarunya, gambaran keseluruhan yang telah kami sediakan secara berasingan. Selain itu, syarikat itu juga mengumumkan versi baharu Switch Lite (kurr. $194.93 di Amazon), mungkin

MagicX XU Mini M: Teardown mendedahkan CPU RK3326 dan bukannya RK3562 yang diiklankan, MagicX memutuskan hubungan dengan pembangun pihak ketiga MagicX XU Mini M: Teardown mendedahkan CPU RK3326 dan bukannya RK3562 yang diiklankan, MagicX memutuskan hubungan dengan pembangun pihak ketiga Sep 01, 2024 am 06:30 AM

Jika anda membeli MagicX XU Mini M baru-baru ini, berita ini mungkin mengejutkan. Pembongkaran perkakasan dan perisian konsol pegang tangan yang baru dikeluarkan mendedahkan bahawa CPU RK3562 yang diiklankan, sebenarnya, pemproses RK3326 yang lebih rendah dan lebih lama.

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

See all articles