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

作者 | bitfish

譯者 | 王坤祥

策劃 | 蔡芳芳

來源 | 前端之巔

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

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

圖片來源 Morning BrewonUnsplash

好了，現在由于某種原因，你最終選擇了 Chrome 瀏覽器作為開發及調試的環境。接下來，打開開發者工具并開始調試代碼。

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

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

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

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

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

• windows：Ctrl + Shift + P

• macOS：Cmd + Shift + P

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

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

1. 強大的屏幕截圖

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

• 截取網頁上所有內容的屏幕快照，包括可視窗口中未顯示的所有內容。

• 精確捕獲 DOM 元素的內容。

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

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

• Screenshot Capture full size screenshot

• Screenshot Capture node screenshot

舉個例子

現在可以打開任意的網頁，例如，Medium 上 JavaScript 的熱門文章頁面。

https://medium.com/tag/javascript

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

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

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

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

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

下面是準確的屏幕截圖的結果：

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

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

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

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

$_是一個特殊變量，它的值始終等于控制臺中上一次操作的執行結果。它可以讓你更加優雅地調試代碼。

3. 重新發送 XHR 請求

XHR，即 XMLHttpRequest，是一種創建 AJAX 請求的 JavaScript API 。

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

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

• 打開“網絡”面板

• 單擊 XHR 按鈕

• 選擇要重新發送的 XHR 請求

• 重放 XHR 請求

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

4. 監控頁面加載狀態

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

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

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

5. 復制變量

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

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

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

6. 將復制圖像為 Data URI

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

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

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

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

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

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

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

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

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

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

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

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

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

10. CSS 樣式觸發

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

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

舉個例子

下面有一個測試網頁：

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

隱藏元素的快捷方式

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

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

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

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

• 選擇某個元素

• 右鍵點擊鼠標

• 存儲為全局變量

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

作者介紹

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

延伸閱讀

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

不要讓 Chrome 成為下一個 IE！

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。