【譯】像高級前端開發人員同樣使用Chrome DevTools

時間 2020-07-27

標籤高級前端開發人員同樣使用 chrome devtools 欄目 Chrome 简体版

原文原文鏈接

原文地址： https://medium.com/javascript...
做者：Dornhothjavascript

若是選擇 Chrome 做爲開發環境，則必須知道的 11 個技巧。html

好的，如今因爲某種緣由，你最終選擇了 Chrome 爲開發使用的瀏覽器。而後，你打開了開發者工具（ Developer Tools ）並開始調試代碼。前端

有時你能夠打開控制檯面板（ Console panel ）來檢查程序的輸出，或者打開元素面板（ Elements panel ）來檢查 DOM 元素的 CSS 代碼。java

可是你真的瞭解 Chrome 開發者工具（ DevTools ）嗎？實際上，它提供了許多強大但未知的功能，能夠大大提升咱們的開發效率。node

在這裏，我將介紹最有用的功能，但願對你有所幫助。chrome

在開始以前，我想介紹一下命令菜單（ Command menu ）。命令菜單對於 Chrome 就像 Shell 對於 Linux 同樣。命令菜單容許你輸入一些命令來操做 Chrome。windows

首先，咱們打開 Chrome 開發工具，而後用如下快捷方式打開命令菜單：後端

windows：Ctrl + Shift + P
macOS：Cmd + Shift + P

或者咱們能夠單擊下面的按鈕將其打開：數組

而後咱們能夠到命令面板，在這裏咱們能夠選擇各類命令來執行各類強大的功能。瀏覽器

強大的屏幕截圖

捕捉屏幕的一部分是一個很是常見的需求，而且我肯定你當前的計算機上已經具備很是方便的截圖軟件。可是，你能夠完成如下任務嗎？

截取網頁上全部內容的屏幕快照，包括可視窗口中未出現的全部內容
精確捕獲 DOM 元素的內容

這是兩個常見的需求，可是使用操做系統附帶的截屏工具並不能很容易地解決它們。此時，咱們可使用命令來幫助咱們完成這個需求。

對應的命令是:

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。

首先，在元素面板中選擇一個元素，而後運行命令。

這是準確的截屏結果:

在控制檯中引用上一個操做的結果

咱們常常須要在控制檯中調試代碼。假設你想知道如何在 JavaScript 中反轉字符串，而後在網上搜索相關信息並找到如下代碼。

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

好吧，上面的代碼確實反轉了字符串。可是你仍然不理解split() reverse() join()方法的做用以及運行這些中間步驟的結果。因此如今你想要一步一步地執行上面的代碼，你能夠這樣寫:

好吧，在這些步驟以後，咱們確實知道每一個方法運行的返回值。

但這是很是多餘的。它既容易出錯，又難以理解。實際上，在控制檯中，咱們可使用神奇的變量$_來引用先前操做的結果。

$_是一個特殊的變量，它的值老是等於控制檯中最後一次操做的結果。這種技術是調試代碼的簡便方法。

從新發送XHR請求

在咱們的前端項目中，咱們常常須要使用 XHR 向後端發出請求以獲取數據。若是你想從新發送一個 XHR 請求，會怎麼作呢?

對於新手，他可能會刷新頁面，但這可能很麻煩。實際上，咱們能夠直接在網絡面板（ Network panel ）中進行調試。

打開網絡面板
點擊 XHR 按鈕
選擇您要從新發送的 XHR 請求
重發 XHR

這是一個 gif 例子:

監控頁面加載狀態

頁面從一開始就徹底加載可能須要 10 秒以上的時間。咱們須要監控頁面在不一樣時期是如何加載的。

在 Chrome 開發者工具中，咱們能夠在網絡面板下，選擇 Capture Screenshots 得到頁面加載的截圖。

單擊每一個屏幕截圖，以顯示相應時間的網絡請求。這種直觀的演示將使你更好地瞭解每時每刻正在發生的網絡請求。

複製變量

你能夠將 JavaScript 變量的值複製到其餘地方嗎？
這彷佛是一個不可能完成的任務，但在 Chrome 中，有一個名爲 copy 的函數能夠幫助你複製一個變量。

複製函數不是由 ECMAScript 定義的，而是由 Chrome 提供的。使用此函數，能夠將 JavaScript 變量的值複製到剪貼板中。

將圖像複製爲 data URI

有兩種方法能夠處理頁面上的圖像，一種是經過外部資源連接加載，另外一種是將圖像編碼爲 data URLs。

Data URLs，以 Data: 協議爲前綴的url，容許內容建立者將小文件內聯嵌入文檔中。它們之前被稱爲「data URIs」，直到 WHATWG 再也不使用這個名稱。

將這些小圖像編碼到 Data URLs 中，並將它們直接嵌入到咱們的代碼裏，能夠減小頁面須要發出的 HTTP 請求數，從而加快頁面加載速度。

在 Chrome 中，咱們如何將圖像轉換爲 data URL 呢?

這是一個 gif ：

表格對象數組（ Table object array ）

假設咱們有一個這樣的對象數組：

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

這樣的數組不容易在控制檯中查看。若是數組更長，元素更復雜，那麼就更難理解了。
幸運的是，Chrome 提供了一個表格函數，能夠將對象數組製成表格。

在許多狀況下，此功能很是有用。

拖放元素面板（ Elements panel ）

有時咱們須要調整頁面上某些 DOM 元素的位置來測試 UI。在元素面板，你能夠拖聽任何 HTML 元素，並更改其在頁面中的位置：

在上面的 gif 中，我在元素面板中拖動 div 的位置，它在頁面上的位置會同步改變。

在控制檯中引用當前選定的元素

$0是另外一個魔法變量，它引用元素面板中當前選擇的元素。

觸發CSS僞類

僞類容許您將樣式應用到一個元素時，不只與文檔樹的內容有關,還與外部因素有關,例如導航的歷史（ :visited 等）,其內容的狀態（如 :checked 在某些表單元素）,或鼠標的位置（如 :hover，它可讓你知道鼠標是否在元素上）。

咱們能夠爲一個元素編寫多個僞類，爲了方便對這些樣式的測試，咱們能夠直接元素面板中觸發這些樣式。

示例

這是一個頁面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

而後咱們在瀏覽器中打開它，並經過元素面板調試它的僞類樣式。