chrome-devtools
DevTools MCP で Chrome をデバッグ
ブラウザーのデバッグでは、コンソールログ、ネットワークリクエスト、スクリーンショット、ページ状態にまたがって手動確認を繰り返す必要があることがよくあります。このスキルは、chrome-devtools-mcp を通じて Chrome を制御するための実用的なコマンドパターンを Claude、Codex、Claude Code に提供します。
インストール前に停止して確認を求めてください。
計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "chrome-devtools" from https://skillstore.io/skills/cygnusfear-chrome-devtools.md and its manifest at https://skillstore.io/api/skills/cygnusfear-chrome-devtools/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「chrome-devtools」を使用しています。 ローカル開発ページのコンソールを確認してください。
期待される結果:
ページは分離された Chrome セッションで開かれました。コンソールにはアプリケーションエラーが 1 件、警告が 2 件表示されており、エラーは不足している設定値に関連しています。
「chrome-devtools」を使用しています。 ログインページが送信されない理由を調査してください。
期待される結果:
- ページ構造を取得しました。
- 送信ボタンとフォームフィールドを見つけました。
- 送信後に失敗したネットワークリクエストを確認しました。
- 認証エンドポイントのレスポンスを確認することを提案しました。
「chrome-devtools」を使用しています。 テストページのスクリーンショットを撮り、説明してください。
期待される結果:
フルページのスクリーンショットを取得しました。ページにはヘッダー、メインコンテンツカード、フッターが表示されており、明らかなレイアウトのはみ出しはありません。
セキュリティ監査
高リスクThe skill is primarily a Chrome DevTools MCP usage guide, not malicious code. Real risks come from copy-paste shell commands, runtime execution of chrome-devtools-mcp through bunx, process-killing cleanup commands, remote browser control, and screenshot capture of potentially sensitive pages.
確認済みのセキュリティ上の懸念 (1)
機能レビュー項目 (23)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
⚙️ 外部コマンド (50)
🌐 ネットワークアクセス (18)
📁 ファイルシステムへのアクセス (7)
検出されたパターン
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/cygnusfear-chrome-devtools/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/cygnusfear-chrome-devtools?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/cygnusfear-chrome-devtools?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cygnusfear-chrome-devtools/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/cygnusfear-chrome-devtools.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形式の引用
Cygnusfear. (2026). chrome-devtools security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cygnusfear-chrome-devtools/audits/10BibTeX形式の引用
@techreport{cygnusfear-cygnusfear-chrome-devtools-2026,
author = {Cygnusfear},
title = {chrome-devtools security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/cygnusfear-chrome-devtools/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 security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "Cygnusfear"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/cygnusfear-chrome-devtools/audits/10"
identifiers:
- type: other
value: "skillstore:cygnusfear-chrome-devtools:audit:10"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中作成できるもの
ローカル Web アプリをデバッグする
localhost ページを開き、開発中にコンソールエラーを調査し、ページ内容を確認します。
ネットワーク動作を調査する
ページへ移動し、ネットワークリクエストを一覧表示して、失敗した呼び出しや予期しないレスポンスを理解します。
ブラウザー上の証拠を取得する
視覚的なバグやページ状態の問題を説明するのに役立つスクリーンショットとスナップショットを取得します。
これらのプロンプトを試す
Chrome DevTools MCP を使ってローカルアプリを開き、コンソールにエラーがないか確認してください。
Chrome DevTools MCP で対象ページを開き、テキストスナップショットを取得して、表示されているページ構造を要約してください。
ページへ移動し、ネットワークリクエストを一覧表示して、失敗または不審なリクエストをステータス詳細とともに特定してください。
分離された 1 つの Chrome DevTools MCP セッションを使用して、ページ移動、コンソールログ収集、ネットワークリクエスト一覧表示、小さな JavaScript チェックの評価、スクリーンショット取得を行ってください。
ベストプラクティス
- 既存の Chrome セッションが意図的に必要な場合を除き、分離されたブラウザープロファイルを使用してください。
- シェルコマンドを実行する前に確認してください。特にクリーンアップやパッケージ実行コマンドは注意が必要です。
- スクリーンショット、スナップショット、ネットワークログを収集する際は、認証済みページや機密性の高いページを避けてください。
回避
- 明示的な同意なしに、非公開アカウントに対してブラウザーデバッグコマンドを実行しないでください。
- タスク完了後に Chrome のリモートデバッグポートを開いたままにしないでください。
- シークレット、セッショントークン、本番環境の認証情報を自動ブラウザーセッションに貼り付けないでください。
よくある質問
このスキルは何に役立ちますか?
コマンドラインツールは必要ですか?
ローカル開発サイトを調査できますか?
スクリーンショットを取得できますか?
なぜ分離されたプロファイルを推奨しているのですか?
本番アカウントで使用しても安全ですか?
開発者情報
作成者
Cygnusfearライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
メンテナンスの新しさ
2026/7/25
利用状況
10 ダウンロード · 192 閲覧
ファイル構成
📄 SKILL.md