2013 年 Chrome 開發人員工具革命

Arthur Evans
Twitter GitHub
Tim Statler
Twitter

簡介

隨著網頁應用程式的複雜性和功能不斷增加，Chrome 開發人員工具也隨之增加。在 Paul Ireland 在 2013 年 Google I/O 大會上發表的演講中，談到 Chrome DevTools Revolutions 2013，您可以瞭解最新功能，如何顛覆網路應用程式的建構和測試方式。

如果您錯過 Paul 的對談，可以在上方找到答案 (繼續等待，我們會等一下)，或者直接切入功能匯報：

  • Workspace 可讓您使用 DevTools 做為原始碼編輯器。
  • 如果您使用的是 Sass，可以在開發人員工具中即時編輯 Sass (.scss) 檔案，而且相關變更會立即反映在頁面中。
  • 使用 Android 版 Google Chrome 時，遠端對網頁偵錯已有一段時間，但 ADB 擴充功能可讓你更輕鬆地連線至 Android 裝置。反向通訊埠轉送功能可讓您輕鬆從裝置連線至開發機器上的 localhost。
  • 應用程式的效能一直以來都相當關注效能，開發人員工具有許多新功能可協助您追蹤瓶頸，包括全新 CPU 分析的火焰圖圖表，以及多種新工具，可用於偵錯與轉譯和記憶體用量相關的效能問題。

這些功能已在 Chrome 28 版中推出，現在透過穩定版更新版提供。

工作區

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

下方螢幕截圖是工作區的實際運作範例。日曆網站已透過 localhost 載入，而「Source」面板則會顯示網站根資料夾的本機檔案系統檢視畫面。你對這個資料夾中的檔案所做的編輯會保留在磁碟中。在下方螢幕截圖中，我們已對 Calendar.css 進行一些未儲存的變更，因此檔案名稱旁會顯示一個星號。

「來源」面板。

按下 Control+S 或 Command+S 會保留對磁碟所做的變更。

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

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

新增工作區資料夾

使用工作區分為兩個部分：將本機資料夾的內容提供給開發人員工具，並將該資料夾對應至網址。

如何新增工作區資料夾：

  1. 在開發人員工具中，按一下「Settings」圖示 設定圖示 開啟開發人員工具設定。
  2. 按一下 [工作區]。
  3. 按一下「新增資料夾」。
  4. 前往含有專案來源檔案的資料夾，然後按一下「Select」(選取)。
  5. 出現提示訊息時按一下「Allow」(允許)，開放開發人員工具的完整存取權。

「Source」面板會顯示新的工作區資料夾，以及透過 localhost 載入的來源。你現在可以在工作區資料夾中即時編輯檔案，系統會將變更內容保存在磁碟中。

顯示 localhost 資源和工作區檔案的來源面板。

將資料夾對應至網址

新增工作區資料夾後，即可將其對應至特定網址。每當 Chrome 載入指定的網址時，「來源」面板會顯示工作區資料夾的內容，取代網路資料夾內容。

如何將工作區資料夾對應至網址：

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

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

對應的工作區資料夾

你可以透過下列兩種方式將網路資料夾連結至工作區資料夾：

  • 在網路資源上按一下滑鼠右鍵 (或按住 Control 鍵並按一下滑鼠)，然後選取「Map to File System Resource」。
  • 在開發人員工具「Settings」對話方塊的「Workspace」分頁中手動新增對應。

Sass/CSS 來源地圖偵錯

Sass (CSS 來源地圖) 偵錯功能可讓您在「來源」面板中即時編輯 Sass (.scss) 檔案並查看結果，而不必離開開發人員工具或更新頁面。當您檢查由 Sass 產生的 CSS 檔案提供樣式的元素時，「Elements」面板會顯示 .scss 檔案的連結，而非產生的 .css 檔案。

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

點選連結會在「來源」面板中開啟 (可編輯) 的 SCSS 檔案。你可以對這個檔案進行任何變更。

顯示 .scss 檔案的我們的 Asces 面板

如果您在開發人員工具或其他地方儲存 SCSS 檔案的變更，Sss 編譯器會重新產生 CSS 檔案。接著，開發人員工具會重新載入新產生的 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 偵錯功能。

運作方式

除了編譯的 CSS 之外，Sass 編譯器還會針對處理的每個 SCSS 來源檔案產生來源對應檔案 (.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 進行遠端偵錯

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

ADB Chrome 擴充功能簡化了遠端偵錯的設定流程。這樣做的好處如下：

  • 封裝 Android Debug Bridge (ADB)，這樣就不必安裝。
  • 完全不必與指令列互動。
  • 可輕鬆啟動和停止 ADB Daemon 的 UI，並查看已連結的裝置。

反向通訊埠轉送功能可讓您輕鬆將 Android 版 Chrome 連線至 localhost 中運作的網路伺服器，因為某些網路環境將難以排解任何 DNS 問題。

使用 ADB 擴充功能

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

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

ADB 擴充功能選單。

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

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

按一下「查看裝置」，開啟「about:inspect」頁面，當中會顯示每部已連結的裝置及其分頁。如要在開發人員工具中檢查分頁，請按一下網址旁的「檢查」連結。

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

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

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

通常您在本機開發機器上執行網路伺服器，而且想從裝置連線至該網站。如果開發機器和裝置都連上同一個網路，做法就相當簡單。但在某些情況下 (例如在受限的公司網路中，缺少一些巧妙的 DNS 技巧可能會無法做到這一點)。這項 Chrome for Android 新功能稱為「反向通訊埠轉送」，可讓您輕鬆完成這項作業。方法是在裝置上建立監聽 TCP 通訊埠，將流量透過 USB 傳輸至開發電腦上的特定 TCP 通訊埠。

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

  • 在開發機器上安裝 Chrome 28 以上版本
  • 已在裝置上安裝 Chrome for Android 測試版
  • 在開發機器上安裝 Android Debug Bridge (ADB Chrome 擴充功能或完整 Android SDK)

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

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

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

接著，請新增通訊埠轉送規則：

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

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

JavaScript 設定檔的火焰圖視覺化

新的火焰圖檢視畫面會以視覺化方式，呈現一段時間內的 JavaScript 處理情形，與「時間軸」和「網路」面板類似。

火焰圖。

橫軸為時間，縱軸則是呼叫堆疊。面板上方會顯示完整錄製資訊，您可以透過滑鼠選取總覽區域來「放大」，如下所示。詳細資料檢視畫面的時間範圍會據此縮小。

已放大的火焰圖。

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

  • 名稱：函式的名稱。
  • 自我時間：執行目前叫用函式所需的時間所花費的時間，其中僅包含函式本身的陳述式，不含該函式所呼叫的任何函式。
  • 總時間：完成這個函式的目前叫用 (以及該函式所呼叫的任何函式) 所花費的時間。
  • 匯總自我時間：匯總此記錄中函式所有叫用的匯總時間，而「不」包含這個函式呼叫的函式。
  • 匯總總時間：函式所有叫用的總時間 (包括這個函式呼叫的函式)。
顯示時間資料的火焰圖

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

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

如何使用火焰圖：

  1. 在開發人員工具中，按一下「Profiles」分頁標籤。
  2. 選擇「記錄 JavaScript CPU 設定檔」，然後按一下「開始」。
  3. 資料收集完成後，按一下「Stop」。
  4. 在設定檔檢視畫面中，選取「Flame Chart」示意圖。
    個人資料檢視畫面中的視覺化選單

五大成效評估功能

有關開發人員工具的革命進展問卷調查，這是一項用於調查效能問題的新功能：

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

連續繪製模式

連續繪製模式是開發人員工具設定中的選項 (「轉譯」 >「啟用持續頁面重新繪製」)，協助您瞭解個別元素或 CSS 樣式的轉譯費用。

一般來說，Chrome 只會在版面配置或樣式變更時算繪螢幕畫面，以及只有需要更新的螢幕區域。如果啟用持續重新繪製頁面功能，系統會不斷重新繪製整個畫面。抬頭顯示器會顯示 Chrome 繪製網頁所需的時間、時間範圍，以及顯示近期顯示時間分佈情形的圖表。直方圖的水平線代表 16.6 毫秒符號。

繪製時間的抬頭顯示畫面。

使用這種做法的好處是，您可以在「元素」面板中步行 DOM 樹狀結構，並隱藏個別元素 (按下 H 鍵隱藏目前選取的元素)，或停用元素的 CSS 樣式。您可以藉由瞭解網頁顯示時間的改變，查看網頁元素或樣式在網頁中加入了多少時間 (如果有的話)。如果隱藏單一元素會大幅縮短繪製時間，就表示你知道重點是該元素的樣式或建構。

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

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

詳情請參閱「使用開發人員工具的持續繪製模式剖析長繪製時間」。

顯示繪製矩形和圖層框線

開發人員工具中的另一個選項是顯示要繪製顯示畫面的矩形區域。(「設定」>「算繪」>「顯示繪製矩形」)。例如，在螢幕截圖下方螢幕截圖中，有人正在對紫色圖形套用 CSS 懸停效果的區域，繪製出一個繪製矩形範圍。這種做法很不錯，因為螢幕相對較小。

顯示油漆矩形的網站。

建議您避免採用會導致整個螢幕重新繪製的設計和開發做法。例如，在下列螢幕截圖中，使用者正在捲動頁面。捲軸環繞著捲軸的繪製矩形，另一個則圍繞著整個頁面的其他部分。在這個範例中，問題就是內文元素的背景圖片。圖片位置在 CSS 中已設為固定，因此 Chrome 在每次捲動時必須重新繪製整個頁面。

顯示全螢幕重新繪製內容的網站。

FPS 計量器

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

FPS 計量器

如何顯示 FPS 計量器：

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

你可以開啟 about:flags，開啟「FPS 計數器」，然後重新啟動 Chrome，強制一律顯示 FPS 計量器。

找出強制同步版面配置 (版面配置刺激)

為了盡可能提高轉譯效能，Chrome 通常會批次處理應用程式要求的版面配置變更，並安排版面配置傳遞作業，以非同步方式計算及轉譯要求的變更。不過，如果應用程式要求提供與版面配置相關的屬性值 (例如 offsetHeight 或 offsetWidth)，Chrome 將強制立即以同步方式執行網頁版面配置。這些稱為強制同步版面配置的「強制同步版面配置」可大幅降低轉譯效能，特別是在對大型 DOM 樹狀結構重複執行時。這種情境又稱為「版面配置竄改」。

時間軸記錄功能在偵測到強制同步版面配置時，會在對應的時間軸記錄旁邊顯示黃色警告圖示。將滑鼠遊標懸停在其中一項記錄上，即可針對使版面配置失效的程式碼以及強製版面配置的程式碼顯示堆疊追蹤。

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

這個彈出式視窗還會顯示需要版面配置的節點數量、重新版面配置樹狀結構的大小、版面配置範圍以及版面配置根層級。

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

物件配置追蹤

物件配置追蹤是一種新型記憶體設定檔，可顯示隨著時間配置的配置情形。開始追蹤配置情形時，開發人員工具會持續擷取堆積快照。堆積配置設定檔會顯示物件的建立位置，並識別保留路徑。

堆積分配設定檔檢視畫面。

如何追蹤物件配置：

  1. 在開發人員工具中，按一下「Profiles」分頁標籤。
  2. 選擇「Record heap 分配 s」，然後按一下「Start」。
  3. 資料收集完成後，按一下「Stop record heap profile」(停止記錄堆積設定檔) (剖析窗格左下角的紅色圓圈)。

畫布剖析 (實驗功能)

最後，這是相當實驗性的功能。Canvas 剖析功能可讓您記錄及播放在 Canvas 元素上進行的 WebGL 呼叫。你可以逐步執行個別 WebGL 呼叫或通話群組，並查看轉譯後的結果。以及重播這些特定呼叫所花費的時間。

如何使用畫布剖析功能：

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