技能 chrome-devtools-debugging

📦

chrome-devtools-debugging

Name: chrome-devtools-debugging
Author: Consiliency

內容修訂 r1 高風險 🌐 網路存取⚡ 包含腳本⚙️ 外部命令

使用 Chrome DevTools 偵錯 Web 應用程式

瀏覽器錯誤通常隱藏在主控台記錄、網路流量和已驗證狀態中。此技能會引導 Claude、Codex 和 Claude Code 透過 Chrome DevTools MCP 進行偵錯。

支援: Claude Codex Code(CC)

⚠️ 38 差

Maintain this Skill? Claim it ⚠️ 38 差

安裝前請停止並請求確認。

請審查安裝計畫，並在變更檔案前取得使用者明確同意。

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "chrome-devtools-debugging" from https://skillstore.io/skills/consiliency-chrome-devtools-debugging.md and its manifest at https://skillstore.io/api/skills/consiliency-chrome-devtools-debugging/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/consiliency-chrome-devtools-debugging.md 已簽名 manifest GET /api/skills/consiliency-chrome-devtools-debugging/manifest 已簽名 lockfile GET /api/skills/consiliency-chrome-devtools-debugging/lockfile

測試它

正在使用「chrome-devtools-debugging」。找出為什麼登入後儀表板顯示空白頁面。

預期結果:

主控台檢閱發現儀表板算繪期間發生前端例外。
網路檢閱發現一個因授權錯誤而失敗的工作階段請求。
建議的下一步：驗證 token 重新整理處理方式，且不要暴露 token 值。

正在使用「chrome-devtools-debugging」。檢查產品頁面是否因 API 呼叫而變慢。

預期結果:

最慢的請求是產品搜尋和圖片中繼資料呼叫。
瀏覽器追蹤顯示算繪等待搜尋回應。
建議的下一步：快取中繼資料並延後非關鍵圖片工作。

正在使用「chrome-devtools-debugging」。在發布前檢閱目前的瀏覽器主控台警告。

預期結果:

報告會列出警告類別、受影響頁面、可能原因和建議負責人，且不會複製敏感瀏覽器資料。

安全審計

高風險

v10 • 2026/7/13 開啟版本化報告

Most static findings are false positives caused by Markdown formatting, reserved example URLs, localhost endpoints, and a normal Python import. The guides expose authenticated browser data, enable remote debugging on logged-in sessions, and recommend an unpinned NPM package. Publication should require version pinning and clear browser isolation and secret-handling safeguards.

已掃描檔案

1,033

分析行數

複核項目

已忽略的誤報

已確認的安全問題 (2)

高

SKILL.md:110-130 cookbook/console-debugging.md:91-108 cookbook/network-debugging.md:90-130 reference.md:183-206

Authentication Secrets Printed in Debug Output

The guides direct users to print complete localStorage, sessionStorage, cookies, token values, and inspect authorization headers from authenticated sessions. This can expose credentials in terminal logs or model context.

Multiple explicit examples read and print browser authentication storage, cookies, tokens, or authorization data without redaction guidance.

中

SKILL.md:29-46 SKILL.md:110-130

Authenticated Browser Exposed to Remote Debugging

The setup enables a DevTools endpoint and then operates on a logged-in browser session. Any process that can reach the endpoint can control tabs and inspect sensitive page data.

The documented workflow explicitly starts Chrome with remote debugging and uses the connection against an authenticated session.

能力複核項目 (1)

這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。

中

SKILL.md:172-179

Ruby/shell backtick execution

- MCP server not installed (`npx chrome-devtools-mcp@latest`)

The troubleshooting guidance recommends npx chrome-devtools-mcp@latest, which can download and execute a mutable package version without integrity pinning.

風險因素

🌐 網路存取 (16)

cookbook/console-debugging.md:200 cookbook/network-debugging.md:60 cookbook/network-debugging.md:149 cookbook/network-debugging.md:227 reference.md:102 reference.md:314 reference.md:80 reference.md:20 reference.md:222 reference.md:235 reference.md:275 reference.md:20 SKILL.md:144 SKILL.md:46 SKILL.md:180 SKILL.md:46

⚡ 包含腳本 (1)

reference.md:110-114

⚙️ 外部命令 (38)

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/consiliency-chrome-devtools-debugging/security.svg)](https://skillstore.io/skills/consiliency-chrome-devtools-debugging?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/consiliency-chrome-devtools-debugging?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/consiliency-chrome-devtools-debugging/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/consiliency-chrome-devtools-debugging.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

Consiliency. (2026). chrome-devtools-debugging security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10

BibTeX 引用

@techreport{consiliency-consiliency-chrome-devtools-debugging-2026,
  author = {Consiliency},
  title = {chrome-devtools-debugging security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "chrome-devtools-debugging security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
  - name: "Consiliency"
date-released: "2026-07-13"
url: "https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10"
identifiers:
  - type: other
    value: "skillstore:consiliency-chrome-devtools-debugging:audit:10"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

診斷前端主控台失敗

檢閱瀏覽器錯誤、警告、堆疊追蹤和應用程式狀態，以識別可能的前端缺陷。

調查已驗證 API 問題

在手動登入後檢查失敗的 XHR 和 fetch 請求，同時保護敏感工作階段資料。

分析頁面載入緩慢

擷取追蹤、找出緩慢請求，並將效能問題與網路和主控台證據相互關聯。

試試這些提示

檢查主控台錯誤

使用 Chrome DevTools 偵錯來列出目前的主控台錯誤和警告。摘要說明可能原因，且不要列印機密資訊。

檢閱失敗的 API 呼叫

列出最近失敗的 XHR 和 fetch 請求。依狀態碼、端點模式和可能的前端影響分組。

偵錯已驗證流程

檢查已驗證頁面的主控台錯誤和失敗的 API 呼叫。回報前先遮蔽 cookies、tokens 和請求主體。

關聯效能證據

擷取頁面載入追蹤、檢閱緩慢的網路請求，並將最有力的證據連結到具體的最佳化步驟。

最佳實務

使用專用的測試瀏覽器設定檔進行偵錯工作階段。
分享輸出前，先遮蔽 tokens、cookies、請求主體和個人資料。
先從摘要開始，只有在需要時才要求完整請求或主控台詳細資料。

避免

列印完整的 localStorage、sessionStorage、cookies 或 authorization headers。
在工作階段結束後仍讓 Chrome remote debugging 可用。
未經檢閱就執行未釘選版本的 npx 套件或複製來的命令。

常見問題

此技能可協助偵錯什麼？

它有助於檢查主控台訊息、網路請求、效能追蹤、瀏覽器狀態和已驗證的 Web 工作階段。

它會取代瀏覽器自動化工具嗎？

否。它專注於 DevTools 偵錯，而不是螢幕截圖、表單填寫或廣泛的自動化工作流程。

它可以搭配已登入的工作階段使用嗎？

可以，前提是 Chrome 已登入且 DevTools 存取權限已設定完成。敏感資料必須遮蔽。

為什麼 remote debugging 是安全疑慮？

DevTools 端點可以檢查並控制瀏覽器頁面。請使用 loopback 存取、測試設定檔和短時間工作階段。

使用者應避免分享什麼？

避免分享 cookies、tokens、authorization headers、個人資料、完整儲存空間傾印和私人請求主體。

支援哪些 AI 工具？

報告列出對 Claude、Codex 和 Claude Code 的支援。

開發者詳細資訊

作者

Consiliency

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/Consiliency/treesitter-chunker/tree/main/.ai-dev-kit/skills/chrome-devtools-debugging

引用

635f69fb8d2f4e6330ba47a4e5a0fb239c04d110

維護新鮮度

2026/7/18

使用量

7 次下載 · 226 次瀏覽

檔案結構

📁 cookbook/

📄 console-debugging.md

📄 network-debugging.md

📄 reference.md

📄 SKILL.md