使用 Chrome 開發人員工具剖析行動 HTML5 應用程式

John McCutchan
John McCutchan
X 首頁

簡介

目前，我們認為您應該採取最重要的網站行動，確保使用手機或平板電腦造訪時效能良好。請繼續閱讀下文，瞭解如何使用 Chrome 開發人員工具和 Android 裝置，針對行動瀏覽器最佳化網站。

最佳化行動網路為什麼如此重要？

效能

我們從 2G 和 3G 轉換至 4G，因此行動裝置的 CPU 速度更快、RAM 更多、GPU 更快，網路存取速度也更快。儘管現今的科技發展日新月異，但與電腦相比，行動裝置的電力不足。更具體的說，載入網路資源花費的時間較長，解除封裝圖片的時間會更久、繪製頁面的時間會較長，執行指令碼也要花費更長的時間。放心，如果網頁在行動裝置上的執行速度會變慢 5 到 10 倍，

電池

行動裝置僅有電池供電。行動裝置使用者希望能盡可能延長電池續航力。次不佳的網站會快速消耗電池的時間。盡可能減少網路流量並減少繪製作業，降低電池耗電量。擷取資源時，請務必開啟 Wi-Fi 或手機無線電，以消耗電池電力。瀏覽器繪製元素時，CPU 和 GPU 用量會遽增，這也會消耗電力。

參與度

可以提升您最重視的指標。Facebook 的重點在於捲動瀏覽。我們在 A/B 版本測試中，將捲動速度從每秒 60 個影格減為 30 個影格。已收合參與畫面。雖說如此，捲動是很重要的。

在 Edge Conference 中的 Facebook

行動裝置使用者會希望可以快速進入和離開。速度最快的網站能獲得最高的參與度。

管理成效

Chrome 隨附許多優質的開發人員工具。 本文將說明如何運用這些工具製作行動版網站。如果您已熟悉 Chrome 開發人員工具，那就太好了！如果沒有，請參考以下優質教學課程：

完成所有課程後，接著來看看如何使用 DevTools 加快行動版網站速度。如果您是第一次使用 Android 版 Chrome 開發人員工具，請參閱文章底部的入門指南。

從遠端使用 Chrome 開發人員工具

Android 裝置與電腦共用網路。使用電腦版 Chrome 前往 http://localhost:9222，在 Android 裝置上開啟網站。系統會將您導向 Android 裝置上已開啟的分頁清單。 從「可檢查的頁面」清單中挑選你的網頁。

可檢查頁面

，系統會將您導向該網頁的 Chrome 開發人員工具。

遠端開發人員工具

噢...這邊有熟悉的 Chrome 開發人員工具工具列。 關於遠端 Chrome 開發人員工具，最重要的一點就是，就是您今天在電腦上使用的開發人員工具。 唯一的差別在於 Android 裝置只負責網頁，而您的電腦負責處理開發人員工具。基本上，系統收集的資料相同，使用者也能使用相同功能。

舉例來說，我用手機前往 www.sfgate.com/movies。在電腦上使用 Chrome 開發人員工具時，將滑鼠遊標懸停在元素工具中的 div 上，就和在電腦上一樣，在 Android 裝置上，div 會醒目顯示。

原始碼程式碼片段。
已醒目顯示 Div。

您也可以使用元素工具開啟或關閉樣式，在嘗試調查繪製時間時相當實用。

網路存取上的壁燈

網路效能可匯入，而對行動版網站來說更是重要。 行動裝置的連線速度通常比桌上型電腦和筆記型電腦慢。為了確保您執行的是正確的作業，請前往「Network tool」(網路工具) 並按下 [Record] (記錄)，即可拍攝網路快照。

網路工具

螢幕截圖顯示 Google 搜尋產生的網路流量。 觀察網站發出的網路要求，找出減少要求的方法。如果網站向伺服器發出輪詢要求，建議您支付使用者活動的記錄，並避免在使用者處於閒置狀態時輪詢。網路工具可讓您查看原始 HTTP 標頭，在行動網路有任何變更時相當實用。

最佳化繪製時間

繪製您的網頁是行動網路瀏覽器的最大瓶頸之一。 繪圖是指使用指定樣式在頁面中繪製元素的過程。如果某個元素繪製出高昂的成本，就會拖慢整個頁面的繪製速度。Chrome 會嘗試在螢幕外緩衝區中快取先前繪製的元素。但在行動裝置上，可用的 GPU RAM 數量有限，會限制螢幕外可快取的元素數量。副作用是繪製更多，且每張顏料都比電腦版慢。 您必須盡量縮短繪製時間，才能採用回應式捲動功能。

Chrome 25 提供連續頁面重新繪製模式。 連續頁面重新繪製模式一律不會快取繪製元素，而是為每個頁框繪製所有元素。強制執行所有元素都要繪製到每個影格，就可以透過切換元素、關閉及關閉樣式來執行 A/B 測試，進而執行繪製時間的 A/B 測試。雖然整個程序必須手動進行，但這是一項極具價值的工具，可以用於追蹤網頁上每個元素的繪製成本。最佳化線索的第一條原則是評估要取得基準的結果。讓我們來看看一個簡單的範例。

首先，啟用連續頁面重新繪製模式：

啟用後，Android 裝置右上角會顯示圖表。圖表的 x 軸是時間，分割成多個影格。圖表的 y 軸會測量繪製時間 (以毫秒為單位)。您會發現，在我的裝置上 頁面需要 14 毫秒才能繪製完成繪製時間的下限和上限也會與使用的 GPU 記憶體一併顯示。

完成前

為了進行實驗，我將所選元素的樣式設為 display: none。我們來看看網頁繪圖的成本

之後，

繪製時間從每影格 14 毫秒縮短到 4 毫秒。換句話說，繪製一個元素需要大約 10 毫秒。按照切換元素開啟或關閉樣式的程序，您可以快速縮小網頁上昂貴部分。提醒您，時間越快，資源浪費越少，電池壽命也越長，使用者參與度也會隨之提升。如果您想要深入瞭解，請務必閱讀這篇有關連續頁面重新繪製模式的說明文章。

進階功能

關於：追蹤

電腦版 Chrome 提供的許多更先進開發人員功能，也可以在 Android Chrome 中使用。例如 about:gpu-internals、about:appcache-internals 和 about:net-internals。調查特別棘手的問題時，有時為了縮小問題原因，有時需要更多資料。在電腦上，您可能會使用 about:tracing。如果您不熟悉 about:tracing，請觀看我的影片，瞭解如何使用和探索 about:tracing 剖析工具。您可以從 Android Chrome 擷取相同的資料，請按照下列步驟開始使用：

  1. 下載 adb_trace.py
  2. 從指令列執行 adb_trace.py
  3. 在 Android 裝置上使用 Chrome
  4. 在指令列上按下 Enter 鍵，關閉 adb_trace.py 指令碼。

adb_trace.py 完成後，就會取得 JSON 檔案，您可以在電腦版 Chrome 的 about:tracing 中載入。

入門指南

瞭解遠端 Chrome 開發人員工具的功能後，我們接著將說明如何開始遠端偵錯工作階段。如果您之前沒用過，請參閱詳細的入門操作說明。如果您已使用這些方法，但忘記如何使用，請參考這裡的簡短操作說明。

1. 安裝 Android SDK

您可能想知道，為網路開發時為何必須安裝 Android SDK。SDK 中包含的 ADB (Android Debug Bridge)。Chrome 電腦版必須與 Android 裝置通訊。 Chrome 不會直接與 Android 裝置通訊，而是透過 ADB 轉送通訊。

ADB 橋接器。

2. 在裝置上啟用 USB 偵錯功能

啟用 USB 偵錯功能

在 Android 設定中找到啟用 USB 偵錯的選項。啟用。

3. 連線至裝置

透過 USB 將 Android 裝置連接至電腦 (如果尚未連結)。如果您是第一次使用 USB 偵錯，系統會顯示下列提示：

允許 USB 偵錯

如果您會經常執行遠端偵錯工作階段，建議您勾選「Always allow from this computer」。

4. 確認裝置已正確連接

從命令提示字元執行 ADB 裝置。畫面中應會列出您的裝置。

5. 在 Chrome 中啟用 USB 偵錯功能

依序開啟「Settings」>「Advanced」>「DevTools」，然後勾選「Enable USB Web debugging」選項，如下所示：

允許 USB 偵錯

6. 與 Android 裝置建立開發人員工具連線

執行下列指令：

adb forward tcp:9222 localabstract:chrome_devtools_remote

透過 ADB 在電腦和 Android 裝置之間建立橋接。如果您遇到任何問題，請參閱這裡的詳細設定操作說明。

7. 正在驗證資料是否符合需求

在電腦上開啟 Chrome，然後前往 http://localhost:9222，確認裝置已正確連線。如果您收到 404 錯誤、另一個錯誤或沒有出現以下的訊息：

可檢查頁面：

如需詳細設定操作說明，請參閱這篇文章。

結論

行動使用者經常覺得便捷，需要很快從您的網頁取得這些重要資訊。確保網頁載入速度飛快，且適合行動裝置瀏覽，是你身為行動網站的責任。否則使用者參與度將會下降。遠端 Chrome 開發人員工具的功能與桌面上對應的功能相同。使用者介面已經很相似，您不必學習一組新的工具。也就是說，你的工作會持續沿用。別忘了，Facebook 無法降低效能，您的網站當然也不例外。網站效能越高，使用者參與度越高。