溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

控制臺的用法有哪些

發(fā)布時(shí)間：2021-10-15 10:30:59 來源：億速云 閱讀：169 作者：iii 欄目：編程語言

本篇內(nèi)容介紹了“控制臺的用法有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

突破舒適區(qū)

同樣作為開發(fā)者，有一點(diǎn)不可否認(rèn)的是程序員這個群體總是會不斷優(yōu)化工作流程，使其變得更高效。不過這很容易使我們陷入誤區(qū)，讓我們很難突破已經(jīng)慣有的工作流程，繼而閉耳塞聽得認(rèn)為沒有比現(xiàn)在更好的工作方法和流程。

一般Web開發(fā)者的工作流程是在IDE中寫好代碼并保存，然后到瀏覽器中刷新測試。同時(shí)使用瀏覽器的DevTools調(diào)整CSS，還可以測試產(chǎn)品在不同分辨率和移動設(shè)備上的表現(xiàn)。在需要深入研究的地方可以通過添加 console.log()語句來調(diào)試我們的腳本。

如果console.log()在最終產(chǎn)品中被濫用，那么你在網(wǎng)上沖浪時(shí)如果一直打開DevTools，你就會在控制臺中看到很多本不該出現(xiàn)在最終產(chǎn)品中的調(diào)試信息。

下面讓我為大家介紹一下除了console.log()之外的其他命令，看看它們會不會為各位的工作帶來什么新的啟發(fā)吧！

控制臺的多種用法

我們可能已經(jīng)習(xí)慣了通過 console.log("參數(shù)") 來了解程序中正在發(fā)生的事情，一般來說對于字符或數(shù)字這種類型的輸出，這種用法就足夠了，不過在輸出些類似像對象、數(shù)組類型的數(shù)據(jù)時(shí)卻沒有那么順手。

第一個技巧是在變量上加上大括號，這樣不僅可以打印出它們的值，還可以打印出變量的名稱，這使我們在日志中更方便的定位到什么值來自哪里。

1

2

3

let                   x = 2;

console.log(x)          //                   2

console.log({x})          //                   {x: 2}

格式化日志

你可以在console.log中使用以百分號操作符指代不同格式的記錄值來格式化字符串，以下是操作符類型的定義：

  • %s: 字符串

  • %i或%d：整數(shù)。

  • %f：浮點(diǎn)數(shù)。

  • %c：CSS樣式。

  • %o：可擴(kuò)展DOM元素。

  • %O：可擴(kuò)展JavaScript對象。

你可以把它們分別放在控制臺試試效果，首先是字符串和整數(shù)的示例：

1

2

console.log(         '%ix %s developer'         , 10,          'console'         );

//                   10x console developer

如果計(jì)劃將數(shù)字格式化為整型，可以使用如下示例：

1

2

console.log(         '%i'         , 12.34455241234324234);

//                   12

%c操作符可以令你使用CSS樣式定制輸出日志的樣式

1

console.log(         '%cPay attention to me'         ,         'color:firebrick;font-size:40px'         )

其他更多日志功能可以查看官方文檔，看看有哪些已經(jīng)實(shí)現(xiàn)了，避免重復(fù)造輪子。

分組日志

你可以使用console.group()來對日志進(jìn)行分組，以將其顯示為可擴(kuò)展和可折疊的組。

1

2

3

4

5

6

7

const label =          'The Millenium Falcon Crew'         ;

console.group(label);

console.log(         'Leia'         );

console.log(         'Han'         );

console.log(         'Chewie'         );

console.log(         'Ben'         );

console.groupEnd(label);

控制臺的用法有哪些

你可以嵌套分組，并可以使用 console.groupCollapsed() 在默認(rèn)情況下不展開它們：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

const extendedlabel =          'The Millenium Falcon Crew extended'         ;

const meat =          'Humanoids'         ;

const metal =          'Droids'         ;

console.group(extendedlabel);

console.groupCollapsed(meat);

console.log(         'Leia'         );

console.log(         'Han'         );

console.log(         'Chewie'         );

console.log(         'Ben'         );

console.groupEnd(meat);

console.group(metal);

console.log(         'R2D2'         );

console.log(         'C3PO'         );

console.groupEnd(metal);

console.groupEnd(extendedlabel);

控制臺的用法有哪些　　

日志控制臺過濾

除了console.log外，你也可以使用 console.info()、console.error()和 console.warning()來代替它。通過這些語句，你可以在控制臺側(cè)邊欄或下拉列表中來過濾你在控制臺中看到的消息。這樣一來，你可以更容易地在來自第三方腳本和項(xiàng)目中的其他腳本中找到自己的日志消息。

其他控制臺命令

你可能在debug時(shí)曾創(chuàng)建過統(tǒng)計(jì)某個方法被調(diào)用或被執(zhí)行次數(shù)的變量。這里推薦另一種方法， console.count()和 console.countReset()，通過它們你可以創(chuàng)建任意數(shù)量的變量，并通過標(biāo)簽來區(qū)分。

1

2

3

4

5

6

7

console.count(         'Chocula'         );          //                   Chocula: 1

console.count();          //                   default: 1

console.count(         'Chocula'         );          //                   Chocula: 2

console.countReset(         'Chocula'         );

console.count();          //                   default: 2

console.count();          //                   default: 3

console.count(         'Chocula'         );          //                   Chocula: 1

您還可以使用console.time()方法去統(tǒng)計(jì)代碼執(zhí)行的總耗時(shí)：

1

2

3

4

5

console.         time         (         'go'         );

for         (         let                   i = 0; i < 200000; i+=1) {

           let                   x = Math.random()*2000;

}

console.timeEnd(         'go'         );          //                   go: 11.7861328125 ms

使用 console.dir()不僅可以顯示內(nèi)容，還可以顯示你發(fā)送的數(shù)據(jù)類型。例如，如果你想要一個節(jié)點(diǎn)的XML表示，你可以使用console.dirxml()。而console.table()對于顯示JSON數(shù)據(jù)作為一個可排序的表格顯示效果也很好。

使用實(shí)時(shí)表達(dá)式Live Expression替代console.log

使用 console.log() 來監(jiān)測那些變化范圍很大的數(shù)值時(shí)，不僅低效且困難。你可在在開發(fā)人員工具中通過點(diǎn)擊“眼睛“圖標(biāo)來激活Live Expression功能。它可以將你想要關(guān)注的數(shù)值pin在工具頂端。

控制臺的用法有哪些

例如，你可以先輸入document.activeElement 來試試。該表達(dá)式表示當(dāng)前獲得焦點(diǎn)的元素。

在這有一點(diǎn)需要說明，因?yàn)長ive Expression并不和某一個站點(diǎn)及域名所關(guān)聯(lián)，所以它會一直保留在你的DevTools中。因此建議在完成一項(xiàng)調(diào)試后及時(shí)刪除它們，以免為調(diào)試其他站點(diǎn)時(shí)帶來不必要的麻煩。

使用控制臺處理當(dāng)前文檔

開發(fā)人員工具中的控制臺不僅僅是用于顯示日志的一種方式。它是一個REPL，可讓您編寫和執(zhí)行JavaScript并使用自動完成功能了解當(dāng)前文檔的可用方法和屬性。

你可以試試，在開發(fā)人員工具的控制臺，輸入doc并按下tab，它會自動將其轉(zhuǎn)為document。如果輸入’.’ 你會看到所有document可用的方法和屬性。這是一種學(xué)習(xí)可用方法和屬性的有趣且簡單的方法之一，這樣可以使你在短時(shí)間內(nèi)寫出大量代碼。

　　

除此之外，控制臺和當(dāng)前文檔進(jìn)行交互還有很多快捷方式可供你使用 “控制臺實(shí)用程序”。其中一些是：

  • $_存儲最后一條控制臺命令的結(jié)果。所以如果你之前輸入了2+2并按回車鍵，你在輸入$_將為你直接提供4。

  • $0 到 $4 是你通過Elements 選項(xiàng)卡選中元素的堆棧，$0 為當(dāng)前你選擇的元素。

  • $() 通過選擇器選擇頁面中的元素

  • $$()返回與給定選擇器匹配的元素?cái)?shù)組。此命令等同于document.querySelectorAll()。。

  • $x() 允許您通過XPATH選擇DOM元素。

  • copy() 將您提供的所有內(nèi)容復(fù)制到剪貼板。

  • clear() 清除控制臺。

  • getEventListeners(node) 返回在指定對象上注冊的事件監(jiān)聽器。

  • monitorEvents(node, events) 監(jiān)視并記錄對象上發(fā)生的事件。

  • monitor(method) 每當(dāng)調(diào)用方法時(shí)，都會創(chuàng)建一個日志。

其中有些方法的功能很強(qiáng)大，但可能我們在并不清楚的前提下自己實(shí)現(xiàn)了一系列 console.log() 語句。

例如如下使用場景：

1

2

monitorEvents(window, [         'resize'         ,          'scroll'         ]);

monitorEvents($0,          'key'         );

每次窗口滾動或調(diào)整大小時(shí)都會記錄一條日志。第二個示例比較有意思，因?yàn)樗涗浟水?dāng)前選定元素上的任何按鍵行為。

以下代碼列出頁面中的所有a標(biāo)簽（因?yàn)?$('a')是document.querySelectorAll('a')的簡稱），并以可排序的表格形式顯示。作為table方法的第二個參數(shù)的數(shù)組定義了表格的列。否則，鏈接的每個屬性都會變成一列，那就很難瀏覽了。這個表不僅是可排序的，而且你還可以復(fù)制和粘貼它--例如，復(fù)制到Excel中。

1

console.table($$(         'a'         ),[         'href'         ,         'text'         ])

控制臺的用法有哪些　　

與其使用復(fù)雜的JavaScript來過濾這些結(jié)果，你不如試試CSS選擇器。再比如，你想獲得一個文檔中所有非內(nèi)嵌圖片的src和alt信息的表格，你可以使用以下方法：

1

console.table($$(         'img:not([src^=data])'         ), [         'src'         ,         'alt'         ])

另外，當(dāng)您使用Markdown生成HTML時(shí)，大多數(shù)頁面生成器都會在標(biāo)題上創(chuàng)建自動ID，例如 # New Stuff標(biāo)題會變成<h2 id="new-stuff">New stuff</h2>。如果我需要批量創(chuàng)建許多指向這些錨點(diǎn)的URL，但不想手動去做這些事時(shí)，可能需要通過控制臺編寫腳本來為我做這件事：

1

2

3

4

5

6

7

8

9

let                   out =          ''         ;

$$(         '#main [id]'         ).filter(

             elm => {         return                   elm.nodeName.startsWith(         'H'         )}

).forEach(elm => {

            out += `${elm.innerText}

${document.location.href}         #${elm.id}

`

});

copy(out);

結(jié)果是一個文本塊，每個標(biāo)題的文本內(nèi)容后跟指向該標(biāo)題的完整URL。

這里展示了$$快捷方式的一個有趣的額外功能。document.querySelectorAll('#main [id]').filter() 會導(dǎo)致一個錯誤，因?yàn)榉祷氐闹挡皇且粋€數(shù)組而是一個NodeList。你需要用[...document.querySelectoAll('#main [id]').filter()]或Array.from(document.querySelectoAll('#main [id]').filter())方法把它強(qiáng)制轉(zhuǎn)換成一個Array，這在相當(dāng)長的一段時(shí)間中困擾著從jQuery轉(zhuǎn)到JavaScript的開發(fā)者，而使用$$，可以直接使用所有的Array方法。

一般來說，你可以通過控制臺來改變?yōu)g覽器頁面中的所有元素。而且你還有一個額外的好處，就是可以使用DevTools的元素選項(xiàng)卡來獲得元素所有的頁面路徑。點(diǎn)擊每個元素旁的...菜單，并通過彈出的上下文菜單中選擇你要復(fù)制的路徑。　　

控制臺的用法有哪些　　

雖然控制臺本身很好用，但很快你就會發(fā)現(xiàn)Console在編寫代碼存在著諸多困難，例如，Console是單行環(huán)境，不小心點(diǎn)擊Enter后就會立即執(zhí)行。不過在這最后為大家介紹一個小技巧，你可以使用Shift + Enter來代替編寫多行腳本。

Sources

總的來說，Console是一個很好的測試環(huán)境，但對于編輯體驗(yàn)來說卻很差。不過還好在Sources面板中也有一個完整的編輯器。在那里，你可以檢查當(dāng)前頁面的代碼，并編寫更復(fù)雜的腳本與之交互。

除了點(diǎn)按上面tab菜單之外，DevTools還有一套快捷鍵Command Menu供你使用，你可以通過按control + shift + P(Windows, Linux)或Command+Shift+P(macOS)來訪問它。或選擇（...或?）菜單，選擇“Run command”。

Snippets 代碼片段

Snippets是保存你曾寫過的能明顯提高開發(fā)效率的代碼小片段。在DevTools中點(diǎn)擊Command Menu鍵盤快捷鍵，輸入snip并按下Enter鍵，選擇創(chuàng)建一個新的snippet，這樣就會進(jìn)入Snippets編輯器，具體如下圖所示：　　

　　

右邊的窗體包括一個完整的源碼編輯器，具有關(guān)鍵詞著色、自動補(bǔ)全、多光標(biāo)等功能。下面我們開始試試上面的示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

console.         clear         ();

let                   out =          ''         ;

let                   problems = [];

$$(         'a'         ).forEach(a => {

           let                   text = a.innerText.trim();

           let                   prefix =          ''         ;

           if                   (!text) {

             if                   (a.querySelector(         'img'         )){

               text = a.querySelector(         'img'         ).alt;

               prefix =          'Image: '         ;

             }

             if                   (a.getAttribute(         'aria-label'         )) {

               text = a.getAttribute(         'aria-label'         );

               prefix =          'Aria Label: '         ;

             }       

             if                   (a.getAttribute(         'aria-labelledby'         )) {

               text = $(         '#'                   + a.getAttribute(         'aria-labelledby'         )).innerText;

               prefix =          'Aria Labelled By: '         ;

             }       

           }

           if                   (text) {

             text = prefix + text

           }          else                   {

             a.style.border =          '1px solid firebrick'         ;

             problems.push(a);

           }

           out += `

${text||         'No Link text'         }

${a.href}`;

});

if                   (out ===          ''         ) {

           console.warn(         'Sorry, no links found'         );

}          else                   {

           copy(out);

           console.info(         'done harvesting links, ready to paste'         );

           if                   (problems.length > 0) {

             console.warn(         'There were %d issues:'         , problems.length);

             console.groupCollapsed(         'Links without text'         );

             problems.forEach(a => {console.dirxml(a)});

             console.groupEnd(         'Links without text'         );

           }

}

以下是執(zhí)行演示：

控制臺的用法有哪些　　

Overrides

Override是通過修改遠(yuǎn)程文件的本地副本，實(shí)現(xiàn)本地測試替換服務(wù)器文件。例如，你可以在本地編輯完整的復(fù)雜樣式表，但無需等待冗長的重新build和部署過程即可看到效果，這也是能在開發(fā)階段即可發(fā)現(xiàn)問題的一種快捷的方式。

將開發(fā)人員工具和VS Code集成

你可以通過安裝Microsoft Edge Tools for VS Code擴(kuò)展 ，即可在編輯中獲得開發(fā)人員工具，通過下圖可以看到基礎(chǔ)用法。

“控制臺的用法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手