Chrome DevTools 一些隱藏技巧

如果你是一名 Web 開發(fā)人員，那么你肯定會花不少時間在瀏覽器開發(fā)工具或 Web 控制臺中，審查元素、修改 CSS 或在控制臺中運行命令，這些是每個 Web 開發(fā)都知道如何使用的一些基本操作，但其實上我們還可以在瀏覽器內(nèi)完成很多其他事情，讓你的調(diào)試、開發(fā)和網(wǎng)頁設(shè)計更加高效。以下是 Chrome DevTools 的一些隱藏的或鮮為人知的功能......

按照表格打印數(shù)組

當用 JavaScript 處理大量數(shù)據(jù)時（例如創(chuàng)建數(shù)據(jù)可視化），從來都不是一次就能成功的，你將不可避免地去 web 控制臺查看數(shù)據(jù)，一般我們熟悉的是用 console.log 命令。這可以打印 JavaScript 對象(JSON)，但是對于二維數(shù)組來說，可讀性很差的，很難找到有用的信息。但是有一個簡單的解決方法。

只需要將 console.log 換成 console.table 就可以了，這個函數(shù)可以很容易地顯示一維和二維數(shù)組，這個函數(shù)額外還有一個有用的地方在于它還可以正確地顯示列名，而且最重要的是，它還允許你按這些列的每一列進行排序。因此，為了得到像上面這樣的表格，你需要使用以下格式的數(shù)據(jù)。

[
??{?"country":?"Austria",?"percentage":?11.6429,?"year":?2012},
??{?"country":?"Belgium",?"percentage":?8.5718,?"year":?2012},
??{?"country":?"Czechia",?"percentage":?3.1569,?"year":?2012},
??{?"country":?"Denmark",?"percentage":?13.0096,?"year":?2012},
??{?"country":?"Estonia",?"percentage":?8.3903,?"year":?2012},
??{?"country":?"Finland",?"percentage":?23.3728,?"year":?2012},
??{?"country":?"France",?"percentage":?10.1641,?"year":?2012},
??{?"country":?"Germany",?"percentage":?7.4749,?"year":?2012},
??{?"country":?"Greece",?"percentage":?9.2186,?"year":?2012},
??{?"country":?"Hungary",?"percentage":?10.4749,?"year":?2012},
??{?"country":?"Iceland",?"percentage":?13.9053,?"year":?2012}
]

多光標使用

基本上每個代碼編輯器中最基本的功能和快捷鍵之一就是多光標和多選擇。如果你像我一樣想盡可能的提高效率，那么你一定需要把這些快捷鍵用好。多光標需要使用 CTRL+點擊。

多光標是很有幫助的，但不是很準確，而且當你需要選擇和替換一個文本的大量出現(xiàn)時，有點麻煩。對于這些情況，你可以使用更合適的CTRL+D 快捷鍵。

在上面的 GIF 中，你可以看到如何使用 CTRL+D 來選擇（也可以選擇CTRL+U 來取消選擇）文本，以方便修改或替換它們。

使用命令面板

Chrome DevTools 中有很多工具、選項卡、文件、命令等，要記住每個工具的名稱或找到它們的位置可能并不容易。我們可以使用命令面板來幫助我們找到，可以使用 CTRL + Shift + P 打開。

在這個調(diào)色板中，你可以找到所有的快捷鍵、面板、控制臺設(shè)置、標簽、設(shè)置等。

此外，如果你省略了這個快捷鍵中的 Shift 鍵，而使用 CTRL + P，它將為你提供所有可用的文件列表，如果你的網(wǎng)站有很多源文件，這非常方便。

顏色選擇器

為了使顏色調(diào)整更容易，我們可以使用顏色選擇器，通過找到你想改變顏色的元素，然后點擊它的 CSS 顏色字段來打開。這是一個很好的功能，但真正厲害的是在顏色選擇器打開時，只要點擊它就能從網(wǎng)站上選擇任何顏色。

暗黑模式

從上面的截圖和 GIF 中，你可能已經(jīng)注意到我在 Chrome DevTools 中使用的是暗黑模式。如果你想知道如何從淺色模式改為深色模式，那么可以導(dǎo)航到 DevTools 的右上角--點擊3個豎點圖標，接下來選擇更多工具，然后選擇設(shè)置，在設(shè)置菜單中選擇首選項，最后將主題設(shè)置為暗色即可。

查找 CSS 屬性的定義位置

使用 CSS 需要很多調(diào)試，與其在 IDE 中編輯代碼和刷新瀏覽器之間來回奔波，不如節(jié)省一些時間，在 DevTools 中直接完成。其中一個技巧是使用 CTRL+Click 找到 CSS 屬性的定義位置，這樣你就可以在它的源文件中編輯它。

使用設(shè)計模式

另一個 CSS 和設(shè)計技巧是使用設(shè)計模式直接編輯網(wǎng)站上的內(nèi)容，不需要修改 HTML 和 CSS 源文件，只需點擊/高亮頁面上的內(nèi)容，就可以修改它。要開啟這個模式，只需在控制臺中輸入 document.designMode = "on" 即可。

條件斷點

一般來說，使用 IDE 調(diào)試瀏覽器中運行的 JavaScript 是相當困難煩人的，所以，與其使用 IDE，不如直接使用 DevTools 調(diào)試器。

在調(diào)試器中設(shè)置基本的斷點你肯定知道如何操作。那么條件斷點呢？有時，你可能會有一個 for 循環(huán)，循環(huán)超過 1000 條或更多的記錄，你知道只有當滿足某些條件時，錯誤才會出現(xiàn)，例如，當所在循環(huán)中的 if 語句返回 false 時。為了在滿足這個條件時才停止斷點，我們可以設(shè)置條件斷點。

我們首先右擊現(xiàn)有的斷點（紅點），然后點擊編輯斷點，插入我們想要的表達式。當這個表達式評估為真時，斷點就會被觸發(fā)，我們就有機會去摸索了。這個條件斷點不需要只添加在有 if 語句的行上，它可以在任何行上，每次代碼執(zhí)行經(jīng)過它時，它的表達式都會被評估。

當你在四處尋找暫停執(zhí)行過程中的錯誤時，你也可以考慮將可疑的變量添加到 Watch 選項卡中，這樣你就可以在值變化時關(guān)注它們。要將變量添加到 Watch 中，你可以執(zhí)行以下操作。

模擬慢網(wǎng)絡(luò)

大多數(shù)人都知道 DevTools 中的網(wǎng)絡(luò)選項卡，在這個選項卡中，你可以看到每個功能、操作或文件加載需要多長時間。但大多數(shù)人不知道的是，你還可以使用網(wǎng)絡(luò)選項卡來模擬緩慢的網(wǎng)絡(luò)連接，使用 Network Throttling 就可以做到這點。

添加和選擇這個配置文件后，剩下要做的就是刷新頁面，看看它在糟糕的網(wǎng)絡(luò)連接下的表現(xiàn)。

衡量網(wǎng)站性能

在性能這個話題上，我們來探討一下 Chrome DevTools 在應(yīng)用程序剖析方面可以為我們做什么。要運行 profiler，我們需要切換到 DevTools 中的性能選項卡。在該選項卡上，我們只需按 CTRL + Shift + E 鍵，該快捷鍵啟動剖析器并同時刷新頁面。在頁面加載后，我們需要再次按下這個相同的快捷鍵來停止剖析器的記錄。

從這里我們可以挖掘網(wǎng)絡(luò)性能、動畫、函數(shù)時間等，有很多東西你可以簡單看看，但有一個特別的就是檢查函數(shù)時間。要檢查其中的一些功能，你可以點擊圖中的橙色條，然后選擇底部部分的 Bottom-Up 標簽，如果你再按照總時間進行排序，你可能會發(fā)現(xiàn)你的代碼中有些部分耗時過長。

總結(jié)

這些只是我平時比較喜歡的一些技巧，但這絕對不是 Chrome DevTools 的全部功能，我們可以在 Chrome DevTools 官方文檔(https://developers.google.com/web/tools/chrome-devtools)中找到很多其他有用的功能。

作者：Martin Heinz，原文鏈接：https://martinheinz.dev/blog/33

K8S進階訓(xùn)練營，點擊下方圖片了解詳情