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

作者:dwqs
文章地址:https://github.com/dwqs/blog/issues/32

一演训、顯示信息的命令

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.log('hello');
  10:         console.info('信息');
  11:         console.error('錯(cuò)誤');
  12:         console.warn('警告');
  13:     </script>
  14: </body>
  15: </html>

最常用的就是console.log了。

二贝咙、占位符

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

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

效果:

三乌奇、信息分組

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.group("第一組信息");
  10:
  11:         console.log("第一組第一條:我的博客(http://www.ido321.com)");
  12:
  13:         console.log("第一組第二條:CSDN(http://blog.csdn.net/u011043843)");
  14:
  15:       console.groupEnd();
  16:
  17:       console.group("第二組信息");
  18:
  19:         console.log("第二組第一條:程序愛(ài)好者QQ群: 259280570");
  20:
  21:         console.log("第二組第二條:歡迎你加入");
  22:
  23:       console.groupEnd();
  24:     </script>
  25: </body>
  26: </html>

效果:

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

console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法眯娱。

   1: <script type="text/javascript">
   2:         var info = {
   3:             blog:"http://www.ido321.com",
   4:             QQGroup:259280570,
   5:             message:"程序愛(ài)好者歡迎你的加入"
   6:         };
   7:         console.dir(info);
   8: </script>

效果:

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

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

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

效果:

六徙缴、判斷變量是否是真

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

   1: <script type="text/javascript">
   2:       var result = 1;
   3:       console.assert( result );
   4:       var year = 2014;
   5:       console.assert(year == 2018 );
   6: </script>

1是非0值,是真穿剖;而第二個(gè)判斷是假蚤蔓,在控制臺(tái)顯示錯(cuò)誤信息

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

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

   1: <script type="text/javascript">
   2: /*函數(shù)是如何被調(diào)用的秀又,在其中加入console.trace()方法就可以了*/
   3:   function add(a,b){
   4:         console.trace();
   5:     return a+b;
   6:   }
   7:   var x = add3(1,1);
   8:   function add3(a,b){return add2(a,b);}
   9:   function add2(a,b){return add1(a,b);}
  10:   function add1(a,b){return add(a,b);}
  11: </script>

控制臺(tái)輸出信息:

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

console.time()console.timeEnd(),用來(lái)顯示代碼的運(yùn)行時(shí)間吐辙。

   1: <script type="text/javascript">
   2:   console.time("控制臺(tái)計(jì)時(shí)器一");
   3:   for(var i=0;i<1000;i++){
   4:     for(var j=0;j<1000;j++){}
   5:   }
   6:   console.timeEnd("控制臺(tái)計(jì)時(shí)器一");
   7: </script>

運(yùn)行時(shí)間是38.84ms

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

性能分析(Profiler)就是分析程序各個(gè)部分的運(yùn)行時(shí)間,找出瓶頸所在昏苏,使用的方法是console.profile()尊沸。

   1: <script type="text/javascript">
   2:       function All(){
   3:             alert(11);
   4:          for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7:         funcB(10000);
   8:       }
   9:
  10:       function funcA(count){
  11:         for(var i=0;i<count;i++){}
  12:       }
  13:
  14:       function funcB(count){
  15:         for(var i=0;i<count;i++){}
  16:       }
  17:
  18:       console.profile('性能分析器');
  19:       All();
  20:       console.profileEnd();
  21:     </script>

輸出如圖:
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市贤惯,隨后出現(xiàn)的幾起案子洼专,更是在濱河造成了極大的恐慌,老刑警劉巖孵构,帶你破解...
    沈念sama閱讀 221,430評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件壶熏,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浦译,警方通過(guò)查閱死者的電腦和手機(jī)棒假,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)精盅,“玉大人帽哑,你說(shuō)我怎么就攤上這事√厩危” “怎么了妻枕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,834評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)粘驰。 經(jīng)常有香客問(wèn)我屡谐,道長(zhǎng),這世上最難降的妖魔是什么蝌数? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,543評(píng)論 1 296
  • 正文 為了忘掉前任愕掏,我火速辦了婚禮,結(jié)果婚禮上顶伞,老公的妹妹穿的比我還像新娘饵撑。我一直安慰自己,他們只是感情好唆貌,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布滑潘。 她就那樣靜靜地躺著,像睡著了一般锨咙。 火紅的嫁衣襯著肌膚如雪语卤。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,196評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音粹舵,去河邊找鬼钮孵。 笑死,一個(gè)胖子當(dāng)著我的面吹牛齐婴,可吹牛的內(nèi)容都是我干的油猫。 我是一名探鬼主播稠茂,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼柠偶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了睬关?” 一聲冷哼從身側(cè)響起诱担,我...
    開(kāi)封第一講書(shū)人閱讀 39,671評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎电爹,沒(méi)想到半個(gè)月后蔫仙,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,221評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丐箩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評(píng)論 3 340
  • 正文 我和宋清朗相戀三年摇邦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屎勘。...
    茶點(diǎn)故事閱讀 40,444評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡施籍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出概漱,到底是詐尸還是另有隱情丑慎,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評(píng)論 5 350
  • 正文 年R本政府宣布瓤摧,位于F島的核電站竿裂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏照弥。R本人自食惡果不足惜腻异,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望这揣。 院中可真熱鬧捂掰,春花似錦、人聲如沸曾沈。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,285評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)塞俱。三九已至姐帚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間障涯,已是汗流浹背罐旗。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,399評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工膳汪, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人九秀。 一個(gè)月前我還...
    沈念sama閱讀 48,837評(píng)論 3 376
  • 正文 我出身青樓遗嗽,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鼓蜒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子痹换,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評(píng)論 2 359

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