Policybazaar 如何運用代理專用 Chrome 開發人員工具和 Modern Web Guidance，將稽核負擔降低 92%，並將畫面傳送速度提升超過 90%

Aman Soni

Swetha Gopalakrishnan

發布日期：2026 年 11 月 10 日

Policybazaar 是印度首屈一指的保險平台，擁有超過 9, 700 萬名註冊客戶。每月約有 80% 的顧客造訪網站。其母公司 PB Fintech 最近推出 Pensionbazaar，這是一個端對端退休規劃平台，也是 Paisabazaar Marketing & Consulting Private Limited 旗下的品牌。

兩個團隊都已使用程式設計代理，雖然能快速編寫程式碼，但無法在瀏覽器中查看程式碼的作用。代理常會使用過時的網頁模式，且無法檢查畫面是否正確算繪，因此工程師仍須手動驗證所有內容。

為解決這個問題，兩家公司在 Agentic Workflows 中結合了兩項工具：Modern Web Guidance，用於教導模型現代網路標準；以及代理專用 Chrome 開發人員工具，為代理提供即時、無頭瀏覽器，以便檢查及驗證工作。

影響如下：

挑戰：程式碼快速，驗證緩慢

Policybazaar 和 Pensionbazaar 遇到兩個不同的瓶頸，標準 AI 程式設計工作流程無法在正式環境中最佳化。

Pensionbazaar：新畫面需要長時間的品質確保

Pensionbazaar 需要數十個複雜的新畫面，例如多步驟的退休自由分數計算機、可自訂的投資費用預測，以及自動化建議報表。團隊使用程式設計代理和 Figma MCP 伺服器建構這些功能，但有兩個問題導致品質確保週期過長。

首先，代理在編寫程式碼時，無法得知程式碼的執行結果。基礎模型可以生成程式碼，但無法查看算繪的介面、比較計算樣式與設計規格、偵測版面配置偏移，或讀取網路瀑布圖。因此，使用者介面遭到裁剪和版面配置偏移等相關問題，都會進入手動品質確保階段。

其次，生成的程式碼停留在過去。由於不瞭解 現代網頁平台，代理程式會採用過時的解決方法，編寫繁重 的 JavaScript 模態，而非使用內建的 <dialog> 元素、新增 不必要的 polyfill，並省略 fetchpriority 等效能提示。

Policybazaar：30 個到達網頁和人工稽核

Policybazaar 的人壽保險團隊為不同的保險產品經營約 30 個到達網頁，每個網頁可能因應不同的行銷廣告活動而有不同版本。這些網站每天合計有 20 萬到 30 萬名訪客，且每個網頁每月都會更新設計和商業邏輯。團隊必須維持高 Core Web Vitals 分數，並確保每個變化版本都能在各種螢幕大小上正確顯示，且可供存取。

在自動化之前，工程師會手動稽核每個頁面：

1. 執行 PageSpeed Insights，收集實際使用者資料。
2. 評估 Core Web Vitals 分數和建議。
3. 檢查開發或測試版本、診斷分數背後的問題，並套用程式碼修正。

這項程序緩慢、重複，且無法擴充。這可能導致錯失最佳化機會、稽核涵蓋範圍不一致、未偵測到效能迴歸，以及延遲發布。

在變更工作流程之前，團隊設定了三個目標：將開發人員花在效能稽核的時間減少 80% 以上，同時持續進行稽核、透過經過驗證的報表縮短品質確保作業時間，以及減少因畫面與線框不符而產生的 UI 錯誤。

解決方案：程式碼驗證迴圈

Pensionbazaar 縮短了編寫和檢查程式碼的時間。代理會編寫程式碼、啟動乾淨的瀏覽器執行個體、以程式輔助方式稽核頁面，檢查視覺效果是否一致、版面配置是否損壞、控制台錯誤和效能，並修正發現的問題，幾乎不需要人為介入。代理會從 Figma MCP 取得設計，比較轉譯後的頁面與設計師的預期效果。

以下影片展示了這個迴圈的實際運作情形。代理會讀取新畫面的 Figma 設計、實作該畫面，然後使用代理專用 Chrome 開發人員工具檢查轉譯後的頁面，並修正發現的差異。

步驟 1：依據現代網路標準建立代理

Pensionbazaar 團隊希望產生的程式碼遵循現代網頁最佳做法、使用目前的平台功能，且仍可在舊版瀏覽器中運作。手動檢查相當繁瑣，且代理程式不一定能與平台保持最新。Modern Web Guidance 可解決這個問題。這項代理技能由 Chrome 和網路社群的網路專家編寫及維護，涵蓋超過 200 個用途。這項功能可引導代理程式使用新式網頁平台 API，並採用符合基準目標的效能和無障礙最佳做法。如未設定目標，預設值為基準廣泛可用。

代理從 Figma 檔案擷取情境資訊後，會使用 Modern Web Guidance 編寫程式碼。Pensionbazaar 透過三種方式變更程式碼：

• 原生元素取代 JavaScript 解決方法。代理商使用內建的 <dialog> 元素和 Popover API 製作方案詳細資料互動視窗，並使用 CSS Grid 和 Flexbox 製作財務摘要資訊卡。
• 代理新增了基礎模型通常會忽略的成效提示。 包括在主頁橫幅 LCP 圖片上使用 fetchpriority="high"、在不需捲動位置的方案資訊卡上使用 loading="lazy"，以及使用 scheduler.yield() 執行時間預算，保護 Interaction to Next Paint (INP)。
• 新功能不會破壞舊版瀏覽器。Pensionbazaar 支援舊版瀏覽器，並在 Browserslist 中定義。代理程式在動態密碼 (OTP) 欄位上使用了 :user-invalid CSS 虛擬類別和 autoComplete="one-time-code" 等功能。舊版瀏覽器會忽略這些屬性，核心功能仍可正常運作。

基礎模型與最佳做法的差距不大，團隊發現成效約有 70% 符合最佳做法。代理的報告列出 12 項 Modern Web Guidance 規則，可彌補剩餘差距。以下提供四個範例：

對 Pensionbazaar 來說，我們的首要任務是從第一天起就建構優質程式碼，避免日後產生技術債。Modern Web Guidance 引導程式設計代理採用現代網路標準和效能最佳做法，同時遵循我們特定的瀏覽器相容性目標。這讓前端程式碼審查變得更簡單、更快速，最終縮短了開發作業時間。

Policybazaar 工程經理 Aman Soni

Step 2: Give the agent a browser

代理專用 Chrome 開發人員工具是一組工具，包括 MCP 伺服器、CLI 和代理技能，可讓程式設計代理即時存取執行階段偵錯資料，例如控制台記錄、網路流量、無障礙樹狀結構和其他開發人員工具功能。

團隊在程式設計代理 Claude Code 中，以外掛程式形式安裝代理專用 Chrome 開發人員工具：

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

該團隊希望每項測試都在乾淨的瀏覽器執行個體中執行，因此安裝的 Chrome 擴充功能不會影響結果，個人或機密資料也不會外洩。如要取得，請在 MCP 伺服器設定的 args 陣列中加入 --isolated：

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

如果測試需要現有的已登入瀏覽器工作階段，請改用 --autoConnect。

步驟 3：讓代理檢查並修正自己的工作

工程團隊會在代理的指令中列出檢查項目，可以是提示詞或代理技能。大致來說，代理程式會執行下列操作：

• 檢查 DOM 樹狀結構和計算出的 CSS，並與 Figma 設計進行比較。
• 將頁面調整為行動裝置可視區域大小，測試回應能力。
• 記錄效能追蹤記錄，找出由指令碼、轉譯阻斷資源和其他效能問題造成的長動畫影格 (LoAF)。
• 在工程師審查前，重寫程式碼以修正設計不符、效能問題和控制台例外狀況。

下表列出支援各項檢查的代理專用 Chrome 開發人員工具：

當代理程式發現問題 (例如小螢幕上的文字遭到截斷、彈性換行中斷，或未最佳化的圖片導致版面配置偏移)，就會執行簡短的修正迴圈：

1. 代理專用 Chrome 開發人員工具會擷取確切錯誤。
2. 代理會分析資料，並重寫有問題的 CSS 或 JavaScript。
3. 服務專員重新載入頁面，確認問題已解決。

在其中一個螢幕上，代理程式轉譯了頁面，發現標題版面配置、間距和漸層與設計不符。系統已修正相關的 .scss 檔案。此外，它也會與網頁互動，例如展開折疊式選單，確認開啟狀態是否符合設計。

步驟 4：將經過驗證的報表交給品質確保人員

驗證完成後，代理會提供可部署於正式環境的程式碼，以及 QA 團隊的稽核報告。這份報表包含：

• 與 Figma 設計進行視覺比較，醒目顯示像素差異，由螢幕截圖、DOM 快照和計算樣式建構而成。
• 不同螢幕大小的轉譯網頁螢幕截圖。
• performance_start_trace 和 performance_analyze_insight 的 Core Web Vitals 和效能診斷，例如 Speed Index 和 Total Blocking Time (TBT)。
• lighthouse_audit 的 Lighthouse SEO、最佳做法和無障礙功能分數。
• 檢查互動是否通過或失敗，例如收合資料列和切換按鈕，以及控制台錯誤和應用程式狀態變更，例如編輯資料列、刪除資料列和空白狀態。

將相同做法套用到 30 個廣告活動頁面

Policybazaar 在主要平台上，將手動執行 PageSpeed Insights 的作業，改為透過 Kiro 中的代理專用 Chrome 開發人員工具執行稽核。在廣告活動頁面上線前，工程師會針對行動裝置和電腦的測試網址觸發稽核。代理會執行效能和 Lighthouse 稽核，而代理專用 Chrome 開發人員工具會自動擷取實際的 Chrome 使用者體驗報告 (CrUX) 欄位資料，以及實驗室資料。這完全取代了 PageSpeed Insights 步驟。

接著，代理會回報效能分數、發現的瓶頸，以及優先改善事項清單，供工程師修正。在預先發布版稽核中，系統標記了在載入網頁期間接連觸發的非關鍵 API 呼叫，這些呼叫會與關鍵算繪作業競爭資源。團隊在網頁上線前修正了問題。

現在，代理完成 12 項效能稽核的時間，與工程師完成一項的時間相同。這代表手動作業減少了 92%。

網站效能對於維持良好的使用者體驗至關重要，但手動稽核、評估數十個到達網頁的瀑布圖和追蹤記錄，既繁瑣又耗時，是主要的瓶頸。代理專用 Chrome 開發人員工具改變了這項流程，將工程師的效能稽核時間縮短 92%，讓他們能專注於更複雜的工作。

Policybazaar 工程經理 Aman Soni

影響

Policybazaar 和 Pensionbazaar 採用 Modern Web Guidance 和代理專用 Chrome 開發人員工具，將前端測試從手動、被動的流程，轉變為主動的自動化流程。下表比較變更前後的工作流程：

92% 的降幅超越了團隊超過 80% 的目標。在到達網頁進入測試或品質確保階段前，找出迴歸問題。在 Pensionbazaar，程式碼在送達時已完成稽核，並附上多個可視區域的螢幕截圖，減少設計、工程和品質確保團隊之間的來回溝通。

團隊重點摘要

• 以權威指南為代理建立基準。Modern Web Guidance 等精選指南可讓代理避免使用過時模式，並確保程式碼符合基準目標。
• 請勿讓代理程式在檢查轉譯頁面之前，將前端工作標示為完成。代理專用 Chrome 開發人員工具可讓代理在實際瀏覽器中檢查版面配置、可視區域和效能追蹤記錄。
• 為迴圈設定明確的結束條件。設定步驟限制，以及明確的通過和失敗條件，避免代理重複執行並浪費權杖。
• 從高頻率、範本導向的網頁開始。在講求周轉速度的情況下，封閉式迴圈工作流程最能發揮效益。
• 在乾淨的瀏覽器中執行稽核。使用 --isolated，這樣擴充功能和快取資料就不會影響結果或洩漏個人資料。

資源

• Modern Web Guidance
• Modern Web Guidance 來源存放區
• 代理專用 Chrome 開發人員工具說明文件
• GitHub 上的代理專用 Chrome 開發人員工具