九個(gè)Console命令,讓 JS 調(diào)試更簡(jiǎn)單

一取刃、顯示信息的命令

<!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('hello');//控制臺(tái)輸出日志
                console.info('信息');//控制臺(tái)輸出信息
                console.error('錯(cuò)誤');//控制臺(tái)輸出錯(cuò)誤
                console.warn('警告');//控制臺(tái)輸出警告
            </script>
        </body>
      </html>

二吧彪、占位符

console上述的集中度支持printf的占位符格式待侵,支持的占位符有:字符(%s)丢早、整數(shù)(%d或%i)姨裸、浮點(diǎn)數(shù)(%f)和對(duì)象(%o)

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

效果:

三、信息分組

<!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("第一組第一條怨酝。");
           console.log("第一組第二條傀缩。");
         console.groupEnd();
         console.group("第二組信息");
           console.log("第二組第一條。");
           console.log("第二組第二條农猬。");
         console.groupEnd();
       </script>
   </body>
   </html>

四赡艰、查看對(duì)象的信息

console.dir();方法可以查看對(duì)象的信息。

    <script type="text/javascript">
            var info = {
                user_id:1,
                name:"miko",
                message:"登錄成功斤葱!"
            };
            console.dir(info);
    </script>

五慷垮、顯示某個(gè)節(jié)點(diǎn)的內(nèi)容

console.dirxml()用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)(node)所包含的html/xml代碼揖闸。

<!DOCTYPE html>
    <html>
    <head>
        <title>常用console命令</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="info">
            <h3>我的博客:www.ido321.com</h3>
           <p>程序愛(ài)好者:259280570,歡迎你的加入</p>
       </div>
       <script type="text/javascript">
           var info = document.getElementById('info');
           console.dirxml(info);
       </script>
   </body>
   </html>

六、判斷變量是否是真

console.assert()用來(lái)判斷一個(gè)表達(dá)式或變量是否為真料身。如果結(jié)果為否汤纸,則在控制臺(tái)輸出一條相應(yīng)信息,并且拋出一個(gè)異常芹血。

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

1是非0值贮泞,是真;而第二個(gè)判斷是假幔烛,在控制臺(tái)顯示錯(cuò)誤信息啃擦。

七、追蹤函數(shù)的調(diào)用軌跡

console.trace()用來(lái)追蹤函數(shù)的調(diào)用軌跡饿悬。

   <script type="text/javascript">
       /*函數(shù)是如何被調(diào)用的令蛉,在其中加入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>

八、計(jì)時(shí)功能

console.time()和console.timeEnd()狡恬,用來(lái)顯示代碼的運(yùn)行時(shí)間言询。

    <script type="text/javascript">
        console.time("控制臺(tái)計(jì)時(shí)器一");

        for(var i=0;i<1000;i++){
          for(var j=0;j<1000;j++){}
        }

        console.timeEnd("控制臺(tái)計(jì)時(shí)器一");
    </script>

九、console.profile()的性能分析

性能分析(Profiler)就是分析程序各個(gè)部分的運(yùn)行時(shí)間傲宜,找出瓶頸所在运杭,使用的方法是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('性能分析器');
           All();
           console.profileEnd();
       </script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末函卒,一起剝皮案震驚了整個(gè)濱河市辆憔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌报嵌,老刑警劉巖虱咧,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異锚国,居然都是意外死亡腕巡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)血筑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)绘沉,“玉大人,你說(shuō)我怎么就攤上這事豺总〕瞪。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵喻喳,是天一觀的道長(zhǎng)另玖。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么谦去? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任慷丽,我火速辦了婚禮,結(jié)果婚禮上鳄哭,老公的妹妹穿的比我還像新娘盈魁。我一直安慰自己,他們只是感情好窃诉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布杨耙。 她就那樣靜靜地躺著,像睡著了一般飘痛。 火紅的嫁衣襯著肌膚如雪珊膜。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1 299
  • 那天宣脉,我揣著相機(jī)與錄音车柠,去河邊找鬼。 笑死塑猖,一個(gè)胖子當(dāng)著我的面吹牛竹祷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播羊苟,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼塑陵,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了蜡励?” 一聲冷哼從身側(cè)響起令花,我...
    開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎凉倚,沒(méi)想到半個(gè)月后兼都,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡稽寒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年扮碧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片杏糙。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡慎王,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搔啊,到底是詐尸還是另有隱情柬祠,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布负芋,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏旧蛾。R本人自食惡果不足惜莽龟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锨天。 院中可真熱鬧毯盈,春花似錦、人聲如沸病袄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)益缠。三九已至脑奠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間幅慌,已是汗流浹背宋欺。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胰伍,地道東北人齿诞。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像骂租,于是被迫代替她去往敵國(guó)和親祷杈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 作者:dwqs文章地址:https://github.com/dwqs/blog/issues/32 一、顯示信息...
    51CTO學(xué)院閱讀 462評(píng)論 0 1
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理抽米,服務(wù)發(fā)現(xiàn)特占,斷路器,智...
    卡卡羅2017閱讀 134,652評(píng)論 18 139
  • 參考基礎(chǔ)教程的整理云茸,方便記憶 一是目、Object對(duì)象 (O大寫(xiě)) 所有其他對(duì)象都繼承自這個(gè)對(duì)象。Object本身也是...
    Viaphlyn閱讀 2,320評(píng)論 0 0
  • 工廠模式類(lèi)似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品标捺,去做同樣的事情懊纳,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 7,752評(píng)論 2 17
  • 對(duì)于js的調(diào)試亡容,一般我們經(jīng)常用alert()或者console.log()進(jìn)行調(diào)試嗤疯。但是alert()會(huì)讓程序中斷...
    豬豬俠闖天下閱讀 807評(píng)論 0 0