偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Javascript調(diào)試命令——你只會Console.log() ?

開發(fā) 前端
Console對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。

[[218407]]

Console對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。

Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。

它被瀏覽器定義為 Window.Console,也可被簡單的 Console 調(diào)用。

最常用的方法就是Console.log(),就是在控制臺輸出內(nèi)容。剛開始學(xué)前端的時(shí)候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法,難道Console真的沒有別的用法了?查了一下后發(fā)現(xiàn)Console還是非常強(qiáng)大的,至于為什么很少看到有人用可能是因?yàn)橛眠^都刪掉了吧。在此記錄一下Console的其他用法。

注意:因?yàn)镃onsole 對象提供對瀏覽器控制臺的接入 所以在不同瀏覽器中的支持及表現(xiàn)形式可能不太一樣,但是調(diào)試內(nèi)容只有我們開發(fā)者會看,所以保證開發(fā)環(huán)境能用這些方法就可以了,下面演示全部都為Chrome上面的效果。

分類輸出

不同類別信息的輸出 

  1. console.log('文字信息');  
  2. console.info('提示信息');  
  3. console.warn('警告信息');  
  4. console.error('錯(cuò)誤信息'); 

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內(nèi)容。

還可以使用Console.groupCollapsed()來代替Console.group()生成折疊的分組。 

  1. console.group('第一個(gè)組');  
  2.     console.log("1-1");  
  3.     console.log("1-2");  
  4.     console.log("1-3");  
  5. console.groupEnd();  
  6. console.group('第二個(gè)組');  
  7.     console.log("2-1");  
  8.     console.log("2-2");  
  9.     console.log("2-3");  
  10. console.groupEnd();  

Console.group()還可以嵌套使用  

  1. console.group('第一個(gè)組');  
  2.     console.group("1-1");  
  3.         console.group("1-1-1");  
  4.             console.log('內(nèi)容');  
  5.         console.groupEnd();  
  6.     console.groupEnd();  
  7.     console.group("1-2");  
  8.         console.log('內(nèi)容');  
  9.         console.log('內(nèi)容');  
  10.         console.log('內(nèi)容');  
  11.     console.groupEnd();  
  12. console.groupEnd(); 
  13.  console.groupCollapsed('第二個(gè)組');  
  14.     console.group("2-1");  
  15.     console.groupEnd();  
  16.     console.group("2-2");  
  17.     console.groupEnd();  
  18. console.groupEnd(); 

表格輸出

使用console.table()可以將傳入的對象,或數(shù)組以表格形式輸出。適合排列整齊的元素 

  1. var Obj = {  
  2.     Obj1: {  
  3.         a: "aaa" 
  4.         b: "bbb" 
  5.         c: "ccc"  
  6.     }, 
  7.  
  8.     Obj2: {  
  9.         a: "aaa" 
  10.         b: "bbb" 
  11.         c: "ccc"  
  12.     }, 
  13.  
  14.     Obj3: {  
  15.         a: "aaa" 
  16.         b: "bbb" 
  17.         c: "ccc"  
  18.     }, 
  19.  
  20.     Obj4: {  
  21.         a: "aaa" 
  22.         b: "bbb" 
  23.         c: "ccc"  
  24.     } 
  25.   
  26.  
  27.  
  28. console.table(Obj);  
  29.  
  30. var Arr = [  
  31.     ["aa","bb","cc"],  
  32.     ["dd","ee","ff"],  
  33.     ["gg","hh","ii"],  
  34.   
  35. console.table(Arr); 

查看對象

使用Console.dir()顯示一個(gè)對象的所有屬性和方法

在Chrome中Console.dir()和Console.log()效果相同 

  1. var CodeDeer = {  
  2.     nema: 'CodeDeer' 
  3.     blog: 'www.xluos.com',   
  4.   
  5. console.log("console.dir(CodeDeer)");  
  6. console.dir(CodeDeer);  
  7. console.log("console.log(CodeDeer)");  
  8. console.log(CodeDeer); 

查看節(jié)點(diǎn)

使用Console.dirxml()顯示一個(gè)對象的所有屬性和方法

在Chrome中Console.dirxml()和Console.log()效果相同

百度首頁logo的節(jié)點(diǎn)信息

條件輸出

利用console.assert(),可以進(jìn)行條件輸出。

  • 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為真時(shí),不輸出內(nèi)容
  • 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為假時(shí),輸出后面的內(nèi)容并拋出異常 
  1. console.assert(true"你永遠(yuǎn)看不見我"); 
  2.  
  3. console.assert((function() { return true;})(), "你永遠(yuǎn)看不見我"); 
  4.  
  5. console.assert(false"你看得見我"); 
  6.  
  7. console.assert((function() { return false;})(), "你看得見我"); 

計(jì)次輸出

使用Console.count()輸出內(nèi)容和被調(diào)用的次數(shù)

  1. (function () {  
  2.     for(var i = 0; i < 3; i++){  
  3.         console.count("運(yùn)行次數(shù):");  
  4.     }  
  5. })() 

 

追蹤調(diào)用堆棧

使用Console.trace()來追蹤函數(shù)被調(diào)用的過程,在復(fù)雜項(xiàng)目時(shí)調(diào)用過程非常多,用這個(gè)命令來幫你縷清。

  1. function add(a, b) {  
  2.     console.trace("Add function");  
  3.     return a + b;  
  4.  
  5. function add3(a, b) {  
  6.     return add2(a, b);  
  7.  
  8. function add2(a, b) {  
  9.     return add1(a, b);  
  10.  
  11. function add1(a, b) {  
  12.     return add(a, b);  
  13.  
  14. var x = add3(1, 1); 

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

使用Console.time()和Console.timeEnd()包裹需要計(jì)時(shí)的代碼片段,輸出運(yùn)行這段代碼的事件。

  • Console.time()中的參數(shù)作為計(jì)時(shí)器的標(biāo)識,具有唯一性。
  • Console.timeEnd()中的參數(shù)來結(jié)束此標(biāo)識的計(jì)時(shí)器,并以毫秒為單位返回運(yùn)行時(shí)間。
  • 最多同時(shí)運(yùn)行10000個(gè)計(jì)時(shí)器。 
  1. console.time("Chrome中循環(huán)1000次的時(shí)間");  
  2. for(var i = 0; i < 1000; i++)  
  3.  
  4. console.timeEnd("Chrome中循環(huán)1000次的時(shí)間"); 

性能分析

使用Console.profile()和Console.profile()進(jìn)行性能分析,查看代碼各部分運(yùn)行消耗的時(shí)間,但是我在Chrome自帶的調(diào)試工具中并沒有找到在哪里查看這兩個(gè)方法生成的分析報(bào)告。應(yīng)該需要其他的調(diào)試工具。

具體參考這里:

http://www.oschina.net/transl...

有趣的Console.log()

最后再來介紹一下強(qiáng)大的Console.log(),這個(gè)方法有很多的用法(其他輸出方法的用法,如error()等,可以參照log()使用)。

一、提示輸出

可以再輸出的對象、變量前加上提示信息,增加辨識度 

  1. var ans = 12345;  
  2. console.log("這是臨時(shí)變量ans的值:",ans); 

二、格式化輸出

占位符 含義

%s 字符串輸出

%d or %i 整數(shù)輸出

%f 浮點(diǎn)數(shù)輸出

%o 打印javascript對象,可以是整數(shù)、字符串以及JSON數(shù)據(jù)

樣例: 

  1. var arr = ["小明""小紅"]; 
  2. console.log("歡迎%s和%s兩位新同學(xué)",arr[0],arr[1]);  
  3. console.log("圓周率整數(shù)部分:%d,帶上小數(shù)是:%f",3.1415,3.1415); 

三、自定義樣式

使用%c為打印內(nèi)容定義樣式,再輸出信息前加上%c,后面寫上標(biāo)準(zhǔn)的css樣式,就可以為輸出的信息添加樣式了 

  1. console.log("%cMy stylish message""color: red; font-style: italic"); 
  2.  
  3. console.log("%c3D Text"" text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em"); 
  4.  
  5. console.log('%cRainbow Text ''background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;'); 
  6.  
  7. console.log('%cMy name is classicemi.''color: #fff; background: #f40; font-size: 24px;'); 

總結(jié)

Console的用法很多,有些再調(diào)試過程中非常實(shí)用,可以節(jié)省很多時(shí)間。當(dāng)然我知道debug還是用斷點(diǎn)調(diào)試的方法比較好,但是小問題用“printf大法”也是很好用的(滑稽臉)。

參考資料

 

責(zé)任編輯:龐桂玉 來源: segmentfault
相關(guān)推薦

2021-03-17 08:53:21

JavaScript開發(fā)代碼

2024-04-08 11:42:14

代碼console開發(fā)

2023-02-24 08:00:00

2023-08-31 09:10:18

JavaScript調(diào)試

2020-01-09 08:26:16

代碼JS開發(fā)

2024-10-29 12:54:27

2025-02-14 11:04:07

JavaScript開發(fā)函數(shù)

2024-04-15 00:00:00

console語法樹AST

2017-09-12 15:11:12

Chrome

2024-03-18 07:56:49

CSSJS代碼調(diào)試

2022-08-22 08:32:17

招聘函數(shù)string

2020-03-25 08:26:44

console.log前端

2020-05-20 19:38:11

前端js調(diào)試工具

2021-03-27 10:59:45

JavaScript開發(fā)代碼

2025-01-06 05:20:00

前端開發(fā)定位

2021-09-07 07:53:43

Console函數(shù)DOM

2014-03-03 09:57:29

JavaScript工具

2020-03-29 20:16:09

JavaScript前端技術(shù)

2019-04-04 14:05:20

consolejs前端

2023-07-27 15:04:10

Node.js核心API
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號