在 Codex 中用 Browser Use 除錯網頁應用程式
🏦 台灣Pay 銀行轉帳 💙 PayPal
Codex 的 Browser Use 支援 CDP，可實際分析效能與網路流量來除錯網頁 app
- 00:00 Codex 現在更能除錯和測試你正在開發的網頁應用程式
- 00:30 Developer Mode 讓 Codex 更深入掌握它所控制的應用程式，所以 Codex 開始用 CDP 檢查網站時，你必須明確核准
- 01:00 Codex 會先分析 app 中特定互動的效能，或查看 app 發出的網路請求，找出真正的瓶頸，再動手修正
💡 你可以怎麼用：如果你用 Codex 做網頁 app，遇到變慢或怪怪的狀況，先到瀏覽器設定打開 Developer Mode。接著跟它說：「用 Browser Use 實際量效能、看網路請求，找出瓶頸再修，並附上修改前後的數據。」
看全部 11 條重點
🧑🏫 這支影片介紹 Codex（OpenAI 幫人寫程式的 AI 助手）的新能力：它現在能直接打開你做的網頁，用 Chrome 內建的檢查工具找出問題。值得看的原因是，網頁變慢、出錯這類問題，常常光看程式碼找不到原因，要實際把網頁跑起來量測才抓得到。
- 00:00 Codex 現在更能除錯和測試你正在開發的網頁應用程式↳ Codex 本來就能幫你寫程式。這次更新後，它更會替你正在做的網頁 app 找問題、做測試。
- 00:00 Codex 的 Browser Use 功能新增支援 Chrome DevTools Protocol（CDP）↳ Browser Use 是讓 Codex 自己開瀏覽器、操作網頁的功能。CDP 是 Chrome 提供給外部程式的控制介面，平常按 F12 叫出的開發者工具就是靠它運作。
- 00:00 透過 CDP，Codex 可以做效能分析（performance profiling），也可以檢查網路流量↳ 效能分析（performance profiling）是記錄每個操作各花多少時間。網路流量（network traffic）是網頁和伺服器之間來回傳的資料。這兩樣都能看出網頁慢在哪裡。
- 00:00 透過 CDP，Codex 也能檢查 console logs、runtime errors、local storage，以及套用的樣式（applied styling）↳ console logs 是程式執行時印出的訊息，runtime errors 是跑起來才出現的錯誤，local storage 是網頁存在你電腦裡的小筆資料，applied styling 是畫面元素實際套用到的樣式。
- 00:00 使用方式：在 Codex app 的瀏覽器設定中開啟 Developer Mode↳ 要用這些功能，得先到 Codex app 的瀏覽器設定，打開 Developer Mode（開發者模式）這個開關。
- 00:30 Developer Mode 讓 Codex 更深入掌握它所控制的應用程式，所以 Codex 開始用 CDP 檢查網站時，你必須明確核准↳ 開了之後，Codex 能看到、能碰到的東西變多。所以它開始用 CDP 檢查網站時，一定要你明確同意才會進行，主控權還是在你手上。
- 00:30 範例：一個聊天 app 最近明顯變慢，對話清單越長越嚴重，載入要等一段時間，打字也明顯延遲↳ 影片舉的例子是一個聊天 app 越用越慢。聊天紀錄越長越卡，打開要等一陣子，打字也會延遲。
- 00:30 可以請 Codex 用 Browser Use 來除錯。它不只看過一遍程式碼，還會實際檢查網路流量並分析應用程式效能↳ code pass 指把程式碼從頭讀過一遍。用 Browser Use 除錯時，Codex 不只讀程式碼，還會把 app 跑起來，實際看流量、量效能，用真實狀況找原因。
- 01:00 Codex 會先分析 app 中特定互動的效能，或查看 app 發出的網路請求，找出真正的瓶頸，再動手修正↳ 瓶頸（bottleneck）是拖慢整體速度的那個環節。Codex 先量某個操作花的時間，也看 app 發出哪些請求，確定卡在哪裡之後才動手改，不會憑感覺亂修。
- 01:00 範例結果：Codex 找到幾個問題並修好，還附上清楚的量測數據，證明效能有改善↳ 結果 Codex 找出好幾個問題並修好，還附上清楚的量測數字，讓你看到確實變快了，而不是只丟一句「應該有改善」。
- 01:00 這只是其中一個例子，說明開發應用程式時，Codex 可以靠 CDP 取得更深入的 Browser Use 能力↳ 聊天 app 只是一個示範。重點是 Codex 有了 CDP 之後，在瀏覽器裡能查得更深，開發網頁時很多檢查工作都可以交給它。
📘 術語
Chrome DevTools Protocol (CDP)（Chrome 開發者工具協定）：加進 Codex Browser Use 的支援，讓 Codex 能用效能分析、檢查網路流量等進階功能
Browser Use（瀏覽器操作功能）：Codex 的一項功能，可操作瀏覽器來除錯和測試網頁 app，不只是看過一遍程式碼
Developer Mode（開發者模式）：在 Codex app 瀏覽器設定中開啟，讓 Codex 更深入掌握它控制的應用程式
performance profiling（效能分析）：字幕提到 Codex 可分析 app 中特定互動的效能，藉此找出真正的瓶頸
network traffic / network requests（網路流量／網路請求）：字幕提到 Codex 可檢查網路流量，以及查看 app 發出的網路請求
console logs（主控台紀錄）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
runtime errors（執行時期錯誤）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
local storage（本機儲存空間）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
applied styling（套用的樣式）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
bottleneck（瓶頸）：字幕說 Codex 先透過效能分析和網路請求找出真正的瓶頸，再動手修正
code pass（看過一遍程式碼）：字幕用來對比：用 Browser Use 除錯時，不只看程式碼，還會實際檢查流量和分析效能
Browser Use（瀏覽器操作功能）：Codex 的一項功能，可操作瀏覽器來除錯和測試網頁 app，不只是看過一遍程式碼
Developer Mode（開發者模式）：在 Codex app 瀏覽器設定中開啟，讓 Codex 更深入掌握它控制的應用程式
performance profiling（效能分析）：字幕提到 Codex 可分析 app 中特定互動的效能，藉此找出真正的瓶頸
network traffic / network requests（網路流量／網路請求）：字幕提到 Codex 可檢查網路流量，以及查看 app 發出的網路請求
console logs（主控台紀錄）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
runtime errors（執行時期錯誤）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
local storage（本機儲存空間）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
applied styling（套用的樣式）：字幕只列為 Codex 可檢查的項目之一，沒有進一步解釋
bottleneck（瓶頸）：字幕說 Codex 先透過效能分析和網路請求找出真正的瓶頸，再動手修正
code pass（看過一遍程式碼）：字幕用來對比：用 Browser Use 除錯時，不只看程式碼，還會實際檢查流量和分析效能
✏️ 小考一題
要讓 Codex 的 Browser Use 使用 CDP 功能，字幕說必須先做什麼？
A. 在 Codex app 的瀏覽器設定中開啟 Developer ModeB. 把專案部署到正式環境後再讓 Codex 檢查C. 在終端機設定 CDP 的 API keyD. 在 Chrome 安裝 Codex 擴充功能看答案
答案：A。[00:00] 字幕說要使用這項功能，必須在 Codex app 的瀏覽器設定中開啟 Developer Mode。
💛 覺得有幫助？支持一下
課本免費、沒有廣告，支持與否都能照常讀 🐰