Chrome 開(kāi)發(fā)者工具的11 個(gè)高級(jí)使用技巧

捕獲屏幕內(nèi)容是一個(gè)非常常見(jiàn)的功能需求，當(dāng)然我非常確定在你當(dāng)前的計(jì)算機(jī)上已經(jīng)有了非常方便的截圖工具了。但是，你可以完成以下任務(wù)嗎？

• 截取網(wǎng)頁(yè)上所有內(nèi)容的屏幕快照，包括可視窗口中未顯示的所有內(nèi)容。

• 精確捕獲 DOM 元素的內(nèi)容。

這是兩個(gè)很普通的要求，但是使用操作系統(tǒng)隨附的屏幕截圖工具不太容易解決。這個(gè)時(shí)候，我們可以在 Chrome 使用相關(guān)命令來(lái)幫助我們完成此要求。

上面兩個(gè)需求的對(duì)應(yīng)的命令是：

• Screenshot Capture full size screenshot

• Screenshot Capture node screenshot

現(xiàn)在可以打開(kāi)任意的網(wǎng)頁(yè)，例如，Medium 上 JavaScript 的熱門文章頁(yè)面。

https://medium.com/tag/javascript

打開(kāi)“命令”菜單并執(zhí)行Screenshot Capture full size screenshot。

然后，我們可以就獲得當(dāng)前頁(yè)面的完整屏幕截圖了。

上面的原始圖像實(shí)際上非常清晰，只是在這里我上傳了壓縮圖像以節(jié)省你的流量。

同樣地，如果要截取某個(gè) DOM 元素的屏幕截圖，就完全可以使用系統(tǒng)自帶的屏幕截圖工具，但當(dāng)窗口不能完全捕獲該元素內(nèi)容時(shí)，此時(shí)，你可以使用Capture node screenshot命令。

首先，我們?cè)凇霸亍泵姘逯羞x擇一個(gè)元素，然后運(yùn)行Capture node screenshot命令，如下圖所示。

下面是準(zhǔn)確的屏幕截圖的結(jié)果：

'abcde'.split('').reverse().join('')

沒(méi)問(wèn)題，上面的代碼確實(shí)對(duì)字符串進(jìn)行了翻轉(zhuǎn)。但你還想了解 split()、reverse()、join() 這些方法的作用以及運(yùn)行他們的中間步驟的結(jié)果。因此，現(xiàn)在你想逐步執(zhí)行上述代碼，可能會(huì)編寫如下內(nèi)容：

好了，經(jīng)過(guò)上面這些操作，我們確實(shí)知道了每個(gè)方法運(yùn)行的返回值，也就了解了各個(gè)方法的作用。

但是，這給人的感覺(jué)有點(diǎn)多此一舉。上面的做法既容易出錯(cuò)，又難以理解。實(shí)際上，在控制臺(tái)中，我們可以使用魔術(shù)變量$_引用上一次操作的結(jié)果。

$_是一個(gè)特殊變量，它的值始終等于控制臺(tái)中上一次操作的執(zhí)行結(jié)果。它可以讓你更加優(yōu)雅地調(diào)試代碼。

XHR，即 XMLHttpRequest，是一種創(chuàng)建 AJAX 請(qǐng)求的 JavaScript API 。

在我們的前端項(xiàng)目中，我們經(jīng)常需要使用 XHR 向后端發(fā)出請(qǐng)求來(lái)獲取數(shù)據(jù)。如果你想重新發(fā)送 XHR 請(qǐng)求，那么該怎么辦呢？

對(duì)于新手來(lái)說(shuō)，可能會(huì)選擇刷新頁(yè)面，但這可能比較麻煩。實(shí)際上，我們可以直接在“網(wǎng)絡(luò)”面板中進(jìn)行調(diào)試。

• 打開(kāi)“網(wǎng)絡(luò)”面板

• 單擊 XHR 按鈕

• 選擇要重新發(fā)送的 XHR 請(qǐng)求

• 重放 XHR 請(qǐng)求

下面是一個(gè) gif 示例，方便你理解：

從一開(kāi)始完全加載頁(yè)面可能需要十秒鐘以上的時(shí)間。我們有時(shí)需要監(jiān)控頁(yè)面在不同的時(shí)間點(diǎn)相關(guān)資源的加載行為。關(guān)注公眾號(hào) 逆鋒起筆，回復(fù) pdf，下載你需要的各種學(xué)習(xí)資料。

在 Chrome 開(kāi)發(fā)者工具中，我們可以使用“網(wǎng)絡(luò)”面板下的Capture Screenshots功能來(lái)捕獲頁(yè)面加載時(shí)的屏幕截圖。

單擊每個(gè)屏幕截圖可以顯示相應(yīng)的當(dāng)前時(shí)間的網(wǎng)絡(luò)請(qǐng)求狀態(tài)。這種可視化的演示會(huì)讓你更好地了解網(wǎng)絡(luò)請(qǐng)求的詳細(xì)過(guò)程。

你可以將 JavaScript 變量的值復(fù)制到其他地方嗎？

這似乎是不可能完成的任務(wù)，但是在 Chrome 瀏覽器中，有一個(gè)名為copy的函數(shù)可以幫助你實(shí)現(xiàn)這個(gè)功能。

該copy函數(shù)不是由 ECMAScript 定義的，而是由 Chrome 瀏覽器提供的。使用此功能，你可以將 JavaScript 變量的值復(fù)制到你的剪貼板中，方便在其他位置使用。

處理網(wǎng)頁(yè)上的圖像的通常有兩種方法，一種是通過(guò)外部資源鏈接加載它們，另一種是將圖像編碼為 Data URI。

Data URL，即前綴為data:協(xié)議的 URL，允許內(nèi)容創(chuàng)建者在文檔中嵌入小文件。在被 WHATWG 撤消該名稱之前，它們被稱為“Data URI”。

將這些小圖像編碼到 Data URL 并將它們直接嵌入到我們的代碼中，可以減少頁(yè)面需要發(fā)出的 HTTP 請(qǐng)求的數(shù)量，從而加快頁(yè)面加載速度。

所以在 Chrome 瀏覽器中，我們?cè)撊绾螌D像轉(zhuǎn)換為 Data URL 呢？可以參考下面的 gif 圖像：

let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]

這樣的數(shù)組在控制臺(tái)中不容易查看閱讀。如果數(shù)組更長(zhǎng)，元素內(nèi)容很復(fù)雜，那么該數(shù)據(jù)將變得更加難以理解。

幸運(yùn)的是，Chrome 提供了表格展示功能，可以將數(shù)組對(duì)象進(jìn)行列表展示，方便理解。

在很多情況下，該功能非常好用。

有時(shí)我們想調(diào)整頁(yè)面上某些 DOM 元素的位置以測(cè)試 UI。在“元素”面板中，你可以拖放任何 HTML 元素來(lái)更改其在頁(yè)面中的顯示位置：

上面的展示中，在“元素”面板中將某個(gè) div 的位置拖動(dòng)到其他位置，它在網(wǎng)頁(yè)上的展示位置就會(huì)同步更改。

$0是另一個(gè)魔術(shù)變量，它會(huì)引用“元素”面板中當(dāng)前選定的 DOM 元素。

CSS 偽類不僅可以讓你將樣式應(yīng)用于文檔樹(shù)內(nèi)容，還可以將其應(yīng)用于外部元素，例如導(dǎo)航器的歷史記錄（例如:visited），其內(nèi)容的狀態(tài)（ 例如某些表單元素的:checked），或鼠標(biāo)的位置（例如:hover，它可以讓你知道當(dāng)前鼠標(biāo)是否在某個(gè)元素內(nèi)容之上）。

我們可能為一個(gè)元素編寫多個(gè) CSS 偽類，并且為了方便我們對(duì)這些樣式進(jìn)行測(cè)試，我們可以直接在“元素”面板中選擇觸發(fā)或關(guān)閉這些樣式。

下面有一個(gè)測(cè)試網(wǎng)頁(yè)：

我們?cè)跒g覽器中將其打開(kāi)，然后通過(guò)“元素”面板對(duì) CSS 樣式進(jìn)行調(diào)試。

在調(diào)試 CSS 樣式時(shí)，我們通常需要隱藏一個(gè)元素。如果選擇元素并按下鍵盤上的H鍵，我們就可以快速隱藏該元素。

此操作實(shí)際上增加了visibility: hidden !important;樣式到對(duì)應(yīng)的元素上面。

如果要想在控制臺(tái)中快速獲取某個(gè) DOM 元素的引用，可以執(zhí)行以下操作：

• 選擇某個(gè)元素

• 右鍵點(diǎn)擊鼠標(biāo)

• 存儲(chǔ)為全局變量

以上就是我想要介紹的 Chrome 開(kāi)發(fā)者工具的高級(jí)用法，希望可以幫助到你。

bitfish，Medium 平臺(tái)社區(qū)編輯，愛(ài)好閱讀、寫作和編程。