code小生?一個專注大前端領(lǐng)域的技術(shù)平臺公眾號回復Android加入安卓技術(shù)群

作者 | bitfish

譯者 | 王坤祥

策劃 | 蔡芳芳

來源 | 前端之巔

本文作者從開發(fā)者角度出發(fā)，介紹了幾個關(guān)于 Chrome 開發(fā)者工具的高級用法。熟練使用這些高級用法可以大大地提高你的生產(chǎn)力。

如果你選擇 Chrome 作為開發(fā)環(huán)境，那么你應該知道下面關(guān)于它的 11 個使用技巧。

圖片來源 Morning BrewonUnsplash

好了，現(xiàn)在由于某種原因，你最終選擇了 Chrome 瀏覽器作為開發(fā)及調(diào)試的環(huán)境。接下來，打開開發(fā)者工具并開始調(diào)試代碼。

很多時候你可以打開“控制臺”面板來檢查程序的輸出，或者打開“元素”面板來檢查 DOM 元素的 CSS 代碼。

但是你真的了解 Chrome 開發(fā)者工具嗎？實際上，它提供了許多強大但很多人未知的功能，可以極大地提高我們的開發(fā)效率。

在這里，我將介紹幾個最有用的功能，希望能對你有所幫助。

在開始之前，我想介紹一下 Chrome 的命令菜單。命令菜單之于 Chrome，就像 Shell 之于 Linux 一樣。你可以在鍵盤敲入相應命令來操作 Chrome。

首先，我們打開 Chrome 開發(fā)者工具，然后使用以下快捷鍵打開命令菜單：

• windows：Ctrl + Shift + P

• macOS：Cmd + Shift + P

或者我們可以按照下圖所示的步驟將其打開：

然后，我們可以轉(zhuǎn)到“命令”面板，在這里我們可以輸入一些命令來執(zhí)行很多強大的功能。

1. 強大的屏幕截圖

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

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

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

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

上面兩個需求的對應的命令是：

• Screenshot Capture full size screenshot

• Screenshot Capture node screenshot

舉個例子

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

https://medium.com/tag/javascript

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

然后，我們可以就獲得當前頁面的完整屏幕截圖了。

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

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

首先，我們在“元素”面板中選擇一個元素，然后運行Capture node screenshot命令，如下圖所示。

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

2. 在控制臺中引用上一次的執(zhí)行結(jié)果我們常常需要在控制臺中調(diào)試代碼。比如你想知道如何在 JavaScript 中反轉(zhuǎn)字符串，然后你在網(wǎng)絡(luò)上搜索相關(guān)信息并找到以下代可行代碼。'abcde'.split('').reverse().join('')

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

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

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

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

3. 重新發(fā)送 XHR 請求

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

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

對于新手來說，可能會選擇刷新頁面，但這可能比較麻煩。實際上，我們可以直接在“網(wǎng)絡(luò)”面板中進行調(diào)試。

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

• 單擊 XHR 按鈕

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

• 重放 XHR 請求

下面是一個 gif 示例，方便你理解：

4. 監(jiān)控頁面加載狀態(tài)

從一開始完全加載頁面可能需要十秒鐘以上的時間。我們有時需要監(jiān)控頁面在不同的時間點相關(guān)資源的加載行為。關(guān)注公眾號 逆鋒起筆，回復 pdf，下載你需要的各種學習資料。

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

單擊每個屏幕截圖可以顯示相應的當前時間的網(wǎng)絡(luò)請求狀態(tài)。這種可視化的演示會讓你更好地了解網(wǎng)絡(luò)請求的詳細過程。

5. 復制變量

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

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

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

6. 將復制圖像為 Data URI

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

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

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

所以在 Chrome 瀏覽器中，我們該如何將圖像轉(zhuǎn)換為 Data URL 呢？可以參考下面的 gif 圖像：

7. 表對象數(shù)組假設(shè)我們有一個下面這樣的數(shù)組對象：let?users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]

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

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

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

8. 在“元素”面板對 DOM 元素進行拖放

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

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

9. 在控制臺中引用當前選定的 DOM 元素

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

10. CSS 樣式觸發(fā)

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

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

舉個例子

下面有一個測試網(wǎng)頁：

我們在瀏覽器中將其打開，然后通過“元素”面板對 CSS 樣式進行調(diào)試。

隱藏元素的快捷方式

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

此操作實際上增加了visibility: hidden !important;樣式到對應的元素上面。

11. 將 DOM 元素存儲在全局臨時變量中

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

• 選擇某個元素

• 右鍵點擊鼠標

• 存儲為全局變量

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

作者介紹

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

延伸閱讀

https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674

不要讓 Chrome 成為下一個 IE！

谷歌 Chrome 瀏覽器終于讓你可以對標簽進行整理和分組了

點贊+在看，小編感恩大家??

總結(jié)

以上是生活随笔為你收集整理的chrome 获取剪贴板内容_Chrome 开发者工具的11 个高级使用技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。