# 策展 · X (Twitter) 🔥🔥🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：OpenAI Developers (@OpenAIDevs) · 平台：X (Twitter) · 日期：2026-06-12

> 原始來源：https://x.com/OpenAIDevs/status/2065226355495895521

## 中文摘要

OpenAI Developers 推出 Codex 開發者模式實現網頁偵錯。

**核心功能與應用**
OpenAI 此次更新為「Codex」的瀏覽器使用功能（Browser use）引入了「開發者模式」，旨在提升 AI 在網頁開發與除錯過程中的技術深度。透過整合 Chrome DevTools Protocol (CDP)，Codex 現在能執行更細緻的技術診斷，具體能力包括：
- 效能分析：擷取基準追蹤資料並分析 JavaScript 執行效能。
- 網路監控：檢查網路流量、請求狀態、持續時間（`durationMs`）及編碼大小（`encodedKB`）。
- 狀態檢視：檢查主控台紀錄（Console logs）、執行階段錯誤、本機儲存（Local storage）以及 DOM 與套用的樣式。

**啟用與操作流程**
若要啟用此功能，使用者需依照下列步驟進行設定：
1. 開啟 Codex 應用程式，進入 `Settings > Browser`（或點擊 [設定頁面](codex://settings/browser-use)）。
2. 在「Developer mode」區塊下，將「Enable full CDP access」選項開啟。
3. 若要針對 Chrome 瀏覽器進行操作，需先安裝 [Codex Chrome extension](https://developers.openai.com/codex/app/chrome-extension) 並在對話中呼叫 `@Chrome`。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781257884620-merck95b.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/ce028ba535951c26.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 講者介紹如何透過啟用「開發者模式」中的「完整 CDP 存取權」，讓該 AI 程式開發工具能更深入地偵錯與測試網頁應用程式。

**安全與使用限制**
由於完整 CDP 存取權涉及敏感的瀏覽器內部資訊，OpenAI 採取了嚴格的安全控管措施：
- 權限審核：Codex 在使用完整 CDP 存取特定網站前，會強制要求使用者進行明確授權，使用者需審核網站名稱、任務內容及請求的存取權限。
- 組織限制：若所屬組織已停用此設定，使用者將無法在本地端啟用。
- 內建瀏覽器限制：Codex 的「應用程式內瀏覽器（In-app browser）」不支援登入流程、Cookie、擴充功能或使用者既有的瀏覽器設定檔，僅適用於無需登入的頁面。官方特別提醒，請勿將機密資訊貼入瀏覽器流程中，並應將網頁內容視為不受信任的環境。

**實際開發場景**
透過此模式，開發者可以利用自然語言指令，例如：「This app is slow. Use @Browser to capture a performance trace and inspect network traffic, then identify the bottleneck.」，讓 AI 自動執行效能追蹤並識別瓶頸。在實際演示中，系統能自動分析重複的 API 請求並以 JSON 格式呈現數據，協助開發者快速定位並優化應用程式的載入速度。

## 媒體內容

**講者介紹如何透過啟用「開發者模式」中的「完整 CDP 存取權」，讓該 AI 程式開發工具能更深入地偵錯與測試網頁應用程式。**

**影片中的 Prompt 與操作**

Prompt（00:45）：

```
你好
```

原文：Hello

Prompt（01:52）：

```
你好，這
```

原文：Hello this

操作步驟：

1. （00:25）點擊「Developer mode」下的開關以啟用「Enable full CDP access」。
2. （00:35）點擊彈出視窗中的「Allow」按鈕授權 CDP 存取。
3. （00:38）點擊瀏覽器左上角的「Reload page」按鈕。
4. （00:45）在對話框輸入「Hello」並送出。
5. （00:57）點擊「Extract baseline trace data」以檢視網路追蹤數據。
6. （01:52）在對話框輸入「Hello this」並送出。

**逐字稿**

- `00:00` Codex 現在能更好地除錯並測試您正在建構的網頁應用程式。（Codex can now better debug and test the web applications that you're building.）
- `00:04` 我們已在 Codex 的瀏覽器使用功能中，加入了對 Chrome DevTools Protocol (CDP) 的支援。（We've added support for the Chrome DevTools Protocol or CDP to the browser use functionality）
- `00:09` 透過這種方式，Codex 可以存取更進階的功能，例如效能分析（in Codex. This way Codex has access to more advanced functionality like performance profiling）
- `00:15` 以及檢查網路流量，還有檢查主控台日誌、執行階段例外、（and inspecting network traffic, as well as the ability to inspect console logs, runtime errors,）
- `00:21` 本機儲存空間以及套用的樣式。若要使用此功能，您必須在 Codex 應用程式的瀏覽器設定中啟用開發者（local storage, and the applied styling. To use this functionality you will have to enable developer）
- `00:25` 模式。由於此模式能讓 Codex 更深入了解（mode in the browser settings of your Codex app. And since this mode gives Codex more insight into）
- `00:30` 它所控制的應用程式，因此當 Codex 開始使用 CDP（the application it is controlling, you'll have to explicitly approve when Codex starts using CDP）
- `00:36` 來檢查網站時，您必須明確核准。我一直在開發這個小型聊天應用程式，並注意到它最近（to inspect a website. I've been working on this little chat app and noticed that it recently）
- `00:40` 速度變慢了許多，特別是隨著對話列表不斷增加。它需要花點時間才能（slowed down quite significantly, especially as the list of conversations grows. It takes a while to）
- `00:46` 載入，而且整體輸入反應相當遲鈍。我可以要求 Codex 使用瀏覽器使用功能來進行除錯。這樣一來，它（load and typing overall is quite delayed. I can ask Codex to debug this using browser use. This way it）
- `00:51` 不僅僅是進行程式碼檢視，而是實際檢查網路流量並分析應用程式。（is not just doing a code pass but actually inspecting the network traffic and profiling the application.）
- `00:56` 透過這種方式，它能更深入了解您的應用程式，並透過分析應用程式中的特定（This way it can get a better understanding of your app and the true bottlenecks by profiling specific）
- `01:02` 互動，或是查看應用程式發出的網路請求，在動手修復之前找出真正的效能瓶頸。（interactions in your app or looking at the network requests your app is making before diving into）
- `01:06` 您可以看到它發現了幾個問題，修復了它們，並以明確的測量數據佐證這些修復帶來的改善。（fixing it. You can see it found a couple of issues, fixed them, and supported those fixes with clear）
- `01:12` 這只是 Codex 如何利用 CDP 在建構應用程式時，擁有更深入的瀏覽器使用能力的一個例子。（measurements showing the improvements. This is just one example of how Codex can use CDP to have more）
- `01:18` 試試看並讓我們知道您的想法。（in-depth browser use capabilities when building applications. Give it a try and let us know what you）

## 標籤

Codex, 功能更新, Web, OpenAI, Codex