日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
熟練掌握J(rèn)Sconsole.log，拯救你的代碼

來(lái)源：Pexels JS Console

做網(wǎng)站、成都網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。成都創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營(yíng)銷(xiāo)思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開(kāi)源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺(jué)化效果。

調(diào)試就如同在犯罪電影中同時(shí)扮演偵探和兇手。

——Filipe Fortes

大多數(shù)的開(kāi)發(fā)人員喜歡在瀏覽器中輸出信息以更多地了解問(wèn)題。筆者應(yīng)該不是唯一一個(gè)這樣做的。

在瀏覽器控制臺(tái)中輸出信息對(duì)開(kāi)發(fā)人員來(lái)說(shuō)就像一次拯救行動(dòng)。在代碼調(diào)試中遇到種種疑難雜癥時(shí)，Console.log()就像靈丹妙藥。

其實(shí)，除了最常用的Console.log()語(yǔ)句，還有其他簡(jiǎn)化調(diào)試過(guò)程的方式。

接下來(lái)，小芯將通過(guò)例子逐個(gè)介紹它們。

1. console.assert()

只想輸出選定日志時(shí)這一指令非常實(shí)用，它將只輸出錯(cuò)誤參數(shù)，如果第一個(gè)參數(shù)正確，它就不起作用。

斷言(assertion)

2. console.group() & console.groupEnd( )

可以使用控制臺(tái)將消息分組。

將消息分組

3. console.trace()

該方法會(huì)追蹤并顯示代碼在何時(shí)終止運(yùn)行。

追蹤

來(lái)源：Pexels JS Console

4. console.count()

該函數(shù)記錄count()函數(shù)的調(diào)用次數(shù)，有一個(gè)可選的參數(shù)label。

如果調(diào)用時(shí)提供了label，該函數(shù)將記錄使用該特定label調(diào)用count()的次數(shù)。

如果調(diào)用時(shí)省略label，函數(shù)將記錄在這一行調(diào)用count()的次數(shù)。

計(jì)數(shù)

5. console.table ()

希望看到合適易讀的JSON文本嗎?

對(duì)數(shù)組進(jìn)行更好的可視化處理!

6. 在控制臺(tái)消息中添加樣式

所有控制臺(tái)消息看起來(lái)都一樣嗎?現(xiàn)在就不一樣了，讓調(diào)試日志中重要的部分看起來(lái)更加醒目。

帶顏色的消息

可以通過(guò)以下方式改變?nèi)罩局刑囟▎卧~的顏色：

高亮顯示特定單詞

7. console.time()

console.time()用于跟蹤操作耗時(shí)，它是跟蹤JavaScript執(zhí)行所耗費(fèi)的短暫時(shí)間的好方法。

8. 控制臺(tái)中的HTML

從控制臺(tái)中獲取HTML元素，跟檢查元素的方式相同。

HTNL元素展示

9. console.dir()

輸出指定對(duì)象的JSON形式。

10. console.memory( )

想知道Javascript應(yīng)用占用了多少瀏覽器內(nèi)存?

內(nèi)存

來(lái)源：Pexels JS Console

11. 使用占位符

各種不同的占位符如下所示：

  • %o ：接受一個(gè)對(duì)象，
  • %s ：接受一個(gè)字符串
  • %d ：接受一個(gè)小數(shù)或整數(shù)

占位符介紹

12. console.log() | info( ) | debug( ) | warn( ) | error( )

這些語(yǔ)句將根據(jù)事件的類(lèi)型用不同顏色標(biāo)識(shí)原始字符串。

console log/info/debug/warn/error

13. console.clear( )

最后但也很重要的一點(diǎn)是，使用clear()命令清除所有控制臺(tái)消息。

以下是要點(diǎn)補(bǔ)充。

https://gist.github.com/Harshmakadia/fc25e56cb8f49145f4c9b3528f04215f

 
 
 
 
    
  
  
  
  
  1. // time and time end 
    2. 
  
  
  
  
  2. console.time("This"); 
    3. 
  
  
  
  
  3. let total =0; 
    4. 
  
  
  
  
  4. for (let j =0; j <10000; j++) { 
    5. 
  
  
  
  
  5. total += j 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. console.log("Result", total); 
    8. 
  
  
  
  
  8. console.timeEnd("This"); 
    9. 
  
  
  
  
  9. // Memory 
    10. 
  
  
  
  
  10. console.memory() 
    11. 
  
  
  
  
  11. // Assertion 
    12. 
  
  
  
  
  12. consterrorMsg='Hey! The number is not even'; 
    13. 
  
  
  
  
  13. for (let number =2; number <=5; number +=1) { 
    14. 
  
  
  
  
  14. console.assert(number %2===0, {number: number, errorMsg: errorMsg}); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16. // Count 
    17. 
  
  
  
  
  17. for (let i =0; i <11; i++) { 
    18. 
  
  
  
  
  18. console.count(); 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20. // group & groupEnd 
    21. 
  
  
  
  
  21. console.group(); 
    22. 
  
  
  
  
  22. console.log('Test message'); 
    23. 
  
  
  
  
  23. console.group(); 
    24. 
  
  
  
  
  24. console.log('Another message'); 
    25. 
  
  
  
  
  25. console.log('Something else'); 
    26. 
  
  
  
  
  26. console.groupEnd(); 
    27. 
  
  
  
  
  27. console.groupEnd(); 
    28. 
  
  
  
  
  28. // Table 
    29. 
  
  
  
  
  29. constitems= [ 
    30. 
  
  
  
  
  30. { 
    31. 
  
  
  
  
  31. name:"chair", 
    32. 
  
  
  
  
  32. inventory:5, 
    33. 
  
  
  
  
  33. unitPrice:45.99 
    34. 
  
  
  
  
  34. }, 
    35. 
  
  
  
  
  35. { 
    36. 
  
  
  
  
  36. name:"table", 
    37. 
  
  
  
  
  37. inventory:10, 
    38. 
  
  
  
  
  38. unitPrice:123.75 
    39. 
  
  
  
  
  39. }, 
    40. 
  
  
  
  
  40. { 
    41. 
  
  
  
  
  41. name:"sofa", 
    42. 
  
  
  
  
  42. inventory:2, 
    43. 
  
  
  
  
  43. unitPrice:399.50 
    44. 
  
  
  
  
  44. } 
    45. 
  
  
  
  
  45. ]; 
    46. 
  
  
  
  
  46. console.table(items) 
    47. 
  
  
  
  
  47. // Clear 
    48. 
  
  
  
  
  48. console.clear() 
    49. 
  
  
  
  
  49. // HTML Element 
    50. 
  
  
  
  
  50. let element =document.getElementsByTagName("BODY")[0]; 
    51. 
  
  
  
  
  51. console.log(element) 
    52. 
  
  
  
  
  52. // Dir 
    53. 
  
  
  
  
  53. constuserInfo= {"name":"John Miller", "id":2522, "theme":"dark"} 
    54. 
  
  
  
  
  54. console.dir(userInfo); 
    55. 
  
  
  
  
  55. // Color 
    56. 
  
  
  
  
  56. console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); 
    57. 
  
  
  
  
  57. // pass object, variable 
    58. 
  
  
  
  
  58. constuserDetails= {"name":"John Miller", "id":2522, "theme":"dark"} 
    59. 
  
  
  
  
  59. console.log("Hey %s, here is your details %o in form of object", "John", userDetails); 
    60. 
  
  
  
  
  60. // Default 
    61. 
  
  
  
  
  61. console.log('console.log'); 
    62. 
  
  
  
  
  62. console.info('console.info'); 
    63. 
  
  
  
  
  63. console.debug('console.debug'); 
    64. 
  
  
  
  
  64. console.warn('console.warn'); 
    65. 
  
  
  
  
  65. console.error('console.error'); 
    66.

網(wǎng)頁(yè)名稱(chēng)：熟練掌握J(rèn)Sconsole.log，拯救你的代碼
文章路徑：http://www.dlmjj.cn/article/dhgcohe.html