2013 年 Chrome 開發人員工具革命

Arthur Evans
X GitHub
Tim Statler
X

簡介

隨著網頁應用程式的複雜度和功能增加，Chrome 開發人員工具也隨之擴充。在 Paul Irish 於 2013 年 Google I/O 大會上發表的演講「Chrome DevTools 2013 年革命」的回顧中，您將瞭解最新功能如何徹底改變建構及測試網路應用程式的方式。

如果你錯過了 Paul 的演講，可以觀看上方的影片 (我們會等你)，也可以直接觀看精選內容：

  • Workspaces 可讓您使用開發人員工具做為原始碼編輯器。
  • 如果您使用 Sass，您會喜歡在開發人員工具中即時編輯 Sass (.scss) 檔案，並立即在頁面上看到變更。
  • 雖然 Android 版 Chrome 已可用於遠端偵錯網頁，但 ADB 擴充功能可讓您更輕鬆地連線至 Android 裝置。反向通訊埠轉送可讓您輕鬆從裝置連線至開發機器上的本機電腦。
  • 效能一直是網頁應用程式需要關注的議題，而 DevTools 提供多項新功能，可協助您追蹤瓶頸，包括用於 CPU 分析的新「火焰圖」可視化工具，以及多項新工具，可用於偵錯與轉譯和記憶體使用相關的效能問題。

這些功能已在 Chrome 28 中實作，現在可透過穩定版更新管道取得。

工作區

工作區可讓您將從本機網頁伺服器提供的資源對應至磁碟上的檔案，因此您可以在「來源」面板中編輯任何類型的來源檔案，並將這些變更儲存至磁碟。同樣地，您在外部編輯器中所做的變更會立即顯示在「來源」面板中。

下方螢幕截圖顯示工作區的實際運作情形。日曆網站已透過 localhost 載入，而「來源」面板則會顯示網站根目錄的本機檔案系統檢視畫面。您對此資料夾中的檔案所做的編輯會保留在磁碟上。在下方螢幕截圖中，Calendar.css 檔案有尚未儲存的變更，因此檔案名稱旁會顯示星號。

「來源」面板。

按下 Control+S 或 Command+S 會將變更儲存至磁碟。

同樣地，您在「元素」面板中對元素樣式所做的變更，也會反映在「來源」面板和外部編輯器中。請注意：

  • 元素面板中的 DOM 變更不會保留。只有「元素」面板上的樣式變更會保留。
  • 您只能變更在外部 CSS 檔案中定義的樣式。系統不會將對 element.style 或內嵌樣式的變更內容儲存回磁碟。如果您有內嵌樣式，可以在「來源」面板中變更。
  • 元素面板中的樣式變更會立即儲存，您不需要按下 Control+S 或 Command+S。
「元素」面板。

新增工作區資料夾

使用工作區有兩個步驟：讓本機資料夾的內容可供 DevTools 使用，以及將該資料夾對應至網址。

如要新增工作區資料夾，請按照下列步驟操作：

  1. 在開發人員工具中，按一下「設定」圖示 設定圖示 開啟開發人員工具設定。
  2. 按一下 [工作區]。
  3. 按一下「新增資料夾」。
  4. 瀏覽至包含專案原始碼檔案的資料夾，然後按一下「選取」。
  5. 出現提示時，請按一下「允許」，讓 DevTools 取得資料夾的完整存取權。

「來源」面板會顯示新的工作區資料夾，以及透過 localhost 載入的來源。你現在可以在工作區資料夾中即時編輯檔案，這些變更會持續儲存至磁碟。

「來源」面板顯示本機主機資源和工作區檔案。

將資料夾對應至網址

新增工作區資料夾後，您可以將該資料夾對應至網址。每當 Chrome 載入指定網址時，「來源」面板會顯示工作區資料夾內容，而非網路資料夾內容。

如要將工作區資料夾對應至網址，請按照下列步驟操作：

  1. 在「來源」面板中，按一下工作區資料夾中的檔案，或按住 Control 鍵並點選檔案。
  2. 選取「對應至網路資源」。
    顯示「Map to Network Resource」選項的內容選單
  3. 從目前載入的網頁中選取對應的網路資源。
    資源選取對話方塊。
  4. 在 Chrome 中重新載入網頁。

來源面板現在應該只會顯示網站本機工作區資料夾的內容，而非 localhost 來源，如下所示。

已對應的工作區資料夾

你也可以透過其他兩種方式，將網路資料夾連結至工作區資料夾：

  • 在網路資源上按一下滑鼠右鍵 (或按住 Control 鍵並點選)，然後選取「Map to File System Resource」。
  • 在「DevTools」設定對話方塊的「Workspace」分頁中手動新增對應項目。

Sass/CSS 來源對應偵錯

您可以在「Sources」面板中即時編輯 Sass (.scss) 檔案，並查看結果，而無須離開 DevTools 或重新整理網頁。當您檢查 Sass 產生的 CSS 檔案提供樣式的元素時，元素面板會顯示 .scss 檔案的連結，而非產生的 .css 檔案。

顯示 .scss 樣式表的「元素」面板

按一下連結，即可在「來源」面板中開啟 (可編輯) SCSS 檔案。您可以對這個檔案進行任何變更。

顯示 .scss 檔案的「資源」面板。

當您將變更儲存至 SCSS 檔案 (在 DevTools 或其他位置) 時，Sass 編譯器會重新產生 CSS 檔案。接著，DevTools 會重新載入新產生的 CSS 檔案。

使用 Sass 偵錯功能

如要在 Chrome 中使用 Sass 偵錯功能，您必須使用Sass 編譯器的預發布版本，這是目前唯一支援產生來源對應的版本。

gem install sass -v '>=3.3.0alpha' --pre

您還需要在開發人員工具實驗中啟用 Sass 偵錯功能：

  1. 在 Chrome 中開啟 about:flags。
  2. 開啟「啟用開發人員工具實驗」。
  3. 重新啟動 Chrome。
  4. 開啟開發人員工具設定，然後按一下「實驗」。
  5. 開啟「支援 Sass」 (或「Sass 樣式表調試」，視您使用的瀏覽器版本而定)。

安裝 Sass 後，請啟動 Sass 編譯器，監控 Sass 來源檔案的變更，並為每個產生的 CSS 檔案建立來源對應檔案，例如：

sass --watch **--sourcemap** sass/styles.scss:styles.css

請注意，如果您使用 Compass，則 Compass 尚不支援 Sass 的預發布版本，因此無法搭配 Compass 使用 Sass 偵錯功能。

運作方式

對於所處理的每個 SCSS 來源檔案，Sass 編譯器會產生編譯 CSS 檔案，以及來源對應檔案 (.map 檔案)。來源對應檔案是 JSON 檔案，可定義 .scss 檔案和 .css 檔案之間的對應關係。每個 CSS 檔案都包含註解，用於指定來源對應檔案的網址，並嵌入特殊註解：

/*# sourceMappingURL=<url>; */

舉例來說，請參考下列 SCSS 檔案：

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass 會產生類似以下的 CSS 檔案，並附上 sourceMappingURL 註解：

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

以下是來源對應檔案範例：

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

在 Android 版 Chrome 上更輕鬆進行遠端偵錯

開發人員工具中的幾項新功能，可讓您更輕鬆地在 Chrome 版 Android 上設定遠端偵錯功能：ADB 擴充功能和反向埠轉送。

ADB Chrome 擴充功能可簡化設定遠端偵錯的程序。這項功能具備下列優點：

  • 將 Android Debug Bridge (ADB) 打包，因此您不必安裝 ADB。
  • 不需要透過指令列互動。
  • 可輕鬆啟動及停止 ADB 守護程序，以及查看已連結的裝置。

反向埠轉送功能可讓您輕鬆將 Android 上的 Chrome 連線至本機主機上執行的網頁伺服器，但在某些網路環境中，如果沒有 DNS 技巧，這項操作可能會變得困難。

使用 ADB 擴充功能

首先，請從 Chrome 線上應用程式商店安裝 ADB Chrome 擴充功能。按一下「加到 Chrome」即可安裝擴充功能。

安裝完成後，Chrome 中會顯示灰色的 Android 選單圖示。如要啟動 ADB，請按一下圖示，然後點選「Start ADB」。

ADB 擴充功能選單。

ADB 啟動後，選單圖示會變成綠色，並顯示目前已連結的裝置數量 (如果有的話)。

ADB 擴充功能選單，顯示已連結的裝置。

按一下「View Devices」，開啟「about:inspect」頁面，查看每個已連結裝置及其分頁。如要在 DevTools 中檢查分頁，請按一下網址旁的「檢查」連結。

顯示裝置分頁連結的 about:inspect 頁面

如果沒有看到任何已連結的裝置，請確認裝置已連上 USB，且已在 Chrome 適用於 Android 的設定中啟用 USB 偵錯功能。如需更詳細的操作說明和疑難排解步驟，請參閱「在 Android 上進行遠端偵錯」。

反向通訊埠轉送 (實驗功能)

通常，您會在本機開發機器上執行網路伺服器，並想要從裝置連線至該網站。如果開發機器和裝置位於相同網路，這項操作就很簡單。但在某些情況下 (例如在受限制的公司網路中)，您可能需要使用一些聰明的 DNS 技巧，才能順利完成這項操作。Chrome 適用於 Android 的反向通訊埠轉送功能可讓您輕鬆完成這項操作。這項功能會在裝置上建立監聽 TCP 通訊埠，藉此透過 USB 將流量轉送至開發電腦上的特定 TCP 通訊埠。

如要使用這項功能，你需要：

  • 開發機器已安裝 Chrome 28 以上版本
  • 裝置上已安裝 Chrome 適用於 Android 的 Beta 版
  • 在開發機器上安裝 Android Debug Bridge (ADB Chrome 擴充功能或完整 Android SDK)

如要使用反向通訊埠轉送功能，您必須連線至裝置，以便進行遠端偵錯，如「使用 ADB 擴充功能」一文所述。接著，您需要啟用反向通訊埠轉送功能，並為應用程式新增通訊埠轉送規則。

首先，請啟用反向通訊埠轉送功能：

  1. 在開發機器上開啟 Chrome。
  2. 在 about:flags 中開啟「啟用開發人員工具實驗」，然後重新啟動 Chrome。
  3. 開啟 about:inspect。畫面上會顯示行動裝置和已開啟的分頁清單。
  4. 按一下任何列出網站旁邊的「檢查」連結。
  5. 在隨即開啟的 DevTools 視窗中，開啟「設定」面板。
  6. 在「實驗」下方，開啟「啟用反向轉送」。
  7. 關閉開發人員工具視窗，並返回 about:inspect。

然後新增通訊埠轉送規則：

  1. 再次點選「檢查」連結，開啟開發人員工具，然後再次開啟開發人員工具設定。
  2. 按一下「Port Forwarding」分頁標籤。
  3. 在「裝置連接埠」欄位中，輸入 Chrome 應連線至 Android 裝置的連接埠號碼 (預設為 8080)。
  4. 在「Target」欄位中，附加網頁應用程式在開發機器上執行的連接埠號碼。
    開發人員工具設定中的「Port Forwarding」分頁
  5. 在 Chrome 版 Android 中開啟 localhost:，其中 是您在 裝置連接埠欄位中輸入的值 (預設值為 8080)。

您應該會看到開發機器提供的內容。

JavaScript 剖析資料的火焰圖視覺化呈現

新的火焰圖檢視畫面可視覺化呈現 JavaScript 處理過程，類似於時間軸和網路面板中的資訊。

火焰圖。

水平軸是時間，垂直軸是呼叫堆疊。面板頂端會顯示總覽，可查看整個錄製內容。您可以使用滑鼠選取總覽中的某個區域，以便「放大」該區域，如下所示。詳細資料檢視畫面的時間軸也會隨之縮小。

放大顯示火焰圖。

在詳細資料檢視畫面中，呼叫堆疊會以一疊函式「區塊」表示。較低函式區塊會呼叫位於上方的區塊。將滑鼠游標懸停在特定區塊上，即可顯示函式名稱和時間資料：

  • 名稱：函式名稱。
  • Self time：完成目前函式呼叫所需的時間，僅包含函式本身的陳述式，不包含任何呼叫的函式。
  • 總時間：完成目前對此函式和該函式呼叫的任何函式的叫用所需的時間。
  • 匯總的自我時間：匯總記錄中函式所有叫用作業的時間，不包括此函式所呼叫的函式。
  • 匯總總時間：函式所有叫用作業的匯總總時間，包括由此函式所叫用的函式。
顯示時間資料的火焰圖

按一下函式區塊，即可在「來源」面板中開啟包含該函式的 JavaScript 檔案，並在定義函式的行中開啟該檔案。

「來源」面板中的函式定義。

如何使用火焰圖：

  1. 在 DevTools 中，按一下「Profiles」分頁標籤。
  2. 選擇「記錄 JavaScript CPU 設定檔」，然後按一下「開始」。
  3. 收集完資料後，按一下「停止」。
  4. 在設定檔檢視畫面中，選取「火焰圖」可視化資料。
    設定檔檢視畫面中的圖表選單

五大主要成效評估功能

這份問卷調查中，開發人員工具的重大進展包括幾項新功能，可用於調查效能問題：

  • 連續繪圖模式
  • 顯示繪圖矩形和圖層邊框
  • FPS 計量器
  • 找出強制同步版面配置 (版面配置衝突)
  • 物件配置追蹤

連續繪圖模式

持續繪圖模式是開發人員工具設定 (「繪圖」 >「啟用持續頁面重繪」) 中的選項，可協助您找出個別元素或 CSS 樣式的算繪成本。

一般來說，Chrome 只會在版面配置或樣式變更時，針對螢幕上需要更新的區域進行繪製。啟用持續重繪網頁功能後，整個螢幕會持續重繪。快訊顯示畫面會顯示 Chrome 繪製網頁所需的時間，以及時間範圍，並以圖表顯示近期繪製時間的分配情形。直方圖中的水平線代表 16.6 毫秒。

繪製計時抬頭顯示器。

使用這項功能的好處是，您可以在「元素」面板中瀏覽 DOM 樹狀結構，並隱藏個別元素 (按下 H 鍵即可隱藏目前選取的元素)，或停用元素的 CSS 樣式。您可以觀察網頁繪製時間的變化，瞭解某個元素或樣式會增加多少時間，以便判斷是否會影響網頁算繪的「重量」。如果隱藏單一元素可大幅縮短繪製時間，您就知道該專注於該元素的樣式或結構。

如要啟用持續繪圖模式，請按照下列步驟操作：

  1. 開啟開發人員工具設定。1. 在「一般」分頁的「算繪」下方，開啟「啟用持續頁面重繪」。

詳情請參閱「使用 DevTools 的持續繪圖模式剖析長時間繪圖時間」。

顯示繪製矩形和圖層邊框

DevTools 中的另一個選項是顯示要繪製的螢幕矩形區域。(「設定」>「算繪」>「顯示繪製矩形區」)。舉例來說，在下方螢幕截圖中，繪圖長方形會在套用 CSS 懸停效果的紫色圖形區域上繪製。這很好，因為這只是畫面中相對較小的部分。

顯示繪製矩形區的網站。

請避免採用會導致整個螢幕重繪的設計和開發做法。舉例來說，在下方螢幕截圖中，使用者正在捲動頁面。一個矩形會圍繞捲動條，另一個矩形則會圍繞整個頁面。在本例中，問題出在 body 元素的背景圖片。圖片位置在 CSS 中設為固定，因此 Chrome 必須在每次捲動時重新繪製整個網頁。

網站顯示全螢幕重繪畫面。

FPS 計量器

FPS 計量器會顯示網頁的目前影格速率、最低和最高影格速率、顯示影格速率隨時間變化的長條圖，以及顯示影格速率變化的直方圖。

FPS 計量器

如要顯示 FPS 計量器，請按照下列步驟操作：

  1. 開啟開發人員工具設定。
  2. 按一下「一般」。
  3. 在「算繪」下方，開啟「強制加速合成」和「顯示 FPS 計量器」。

如要強制顯示 FPS 計量器，請開啟 about:flags、開啟 FPS 計數器，然後重新啟動 Chrome。

找出強制同步版面配置 (版面配置耗盡)

為了盡可能提升算繪效能，Chrome 通常會將應用程式要求的版面配置變更分批處理，並排定版面配置傳遞作業，以非同步方式計算及算繪要求的變更。不過，如果應用程式要求版面配置相關屬性 (例如 offsetHeight 或 offsetWidth) 的值，Chrome 就會立即同步執行頁面版面配置。這些所謂的強制同步版面配置可能會大幅降低算繪效能，尤其是在大型 DOM 樹狀結構上重複執行時。這種情況也稱為「版面配置衝突」。

時間軸記錄會在偵測到強制同步版面配置時發出警報，並在相應的時間軸記錄旁邊顯示黃色警告圖示。將滑鼠游標懸停在其中一個記錄上，即可查看導致版面配置失效的程式碼和強制版面配置的程式碼的堆疊追蹤記錄。

在時間軸檢視畫面中強制同步版面配置彈出式視窗。

這個彈出式視窗也會顯示需要版面配置的節點數量、重新版面配置樹狀結構的大小、版面配置範圍和版面配置根目錄。

詳情請參閱「時間軸示範：診斷強制同步版面配置」。

物件配置追蹤

物件配置追蹤是一種新型的記憶體設定檔，可顯示隨時間變化的配置。開始分配追蹤後，DevTools 會持續拍攝堆積快照。堆積配置設定檔會顯示物件建立的位置，並識別保留路徑。

堆積分配剖析檢視畫面。

如要追蹤物件配置，請按照下列步驟操作：

  1. 在 DevTools 中，按一下「Profiles」分頁標籤。
  2. 選擇「記錄堆積配置」，然後按一下「開始」。
  3. 收集完資料後，請按一下「停止記錄堆積配置分析資料」 (剖析窗格左下角的紅色圓圈)。

無框畫分析 (實驗功能)

最後，我們要介紹一項完全實驗性的功能。您可以透過「畫布」剖析功能，記錄及重播在畫布元素上發出的 WebGL 呼叫。您可以逐一執行個別 WebGL 呼叫或呼叫群組，並查看算繪結果。您也會看到重播這些特定通話所需的時間。

如何使用畫布分析：

  1. 在「實驗」分頁中開啟「畫布檢查」功能，(如果找不到這個分頁，請開啟 about:flags，開啟「啟用開發人員工具實驗」，然後重新啟動 Chrome)。
  2. 按一下「Profiles」分頁標籤。
  3. 選取「擷取無框畫影像」，然後按一下「拍攝快照」。
  4. 您現在可以探索用來建立畫布影格呼叫。
Canvas 設定檔。