Browser Devtools MCP Vscode Extension logo

Browser Devtools MCP Vscode Extension

未申請

作者: serkan-ozal

VSCode Extension for the Browser DevTools MCP Server which is a Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

サーバーをセットアップ

01 / クライアントを選択

02 / 接続前の準備

認証方法は未指定です。接続前にプロジェクトの手順を確認してください。

プロジェクトが必要とする実行環境をインストールし、クライアントから利用できるようにしてください。

プロジェクトの手順

手順に記載された名前をカンマで区切って入力してください。秘密の値は入力しないでください。

03 / 設定を追加

出典:公開インストール手順から生成

claude mcp add --transport stdio 'browser-devtools-mcp-vscode-extension' -- 'npx' '-y' 'vsce' 'package'

プレースホルダーを置き換えてからターミナルで実行してください。

04 / クライアントで確認

クライアントの MCP 設定で接続とツール一覧を確認してください。設定のコピーだけでは接続成功は確認できません。

Search & Webの他のサーバー

ディレクトリ全体を見る

未申請リスティング

このMCPサーバーはあなたのものですか?

このリスティングは公開情報から自動的にインデックスされました。申請することで、ページの編集、互換性の設定、成長ツールのアンロックができます。2分以内に完了します。

このサーバーを申請する

セキュリティプロファイル

申請済みおよび認証済みのサーバーは毎週の静的スキャンを受け、コードが到達できる範囲(外部サービス、環境変数、シェルコマンド、エージェント設定フォルダ)と既知のアドバイザリを持つ依存関係が表示されます。このリスティングを申請すると利用できます。 セキュリティプロファイルの仕組み

40 件中 40 件

ドキュメントに記載されたツール (40)

プロジェクトのドキュメントに基づきます。サーバーのハンドシェイクは、各ツールの説明や動作を検証するものではありません。

a11y_take-aria-snapshot

Get ARIA snapshot (YAML format)

a11y_take-ax-tree-snapshot

Get AX tree with visual diagnostics

content_get-as-html

Get page HTML with filtering options

content_get-as-text

Get visible text content

content_save-as-pdf

Save page as PDF

content_take-screenshot

Take a screenshot (full page or element)

debug_add-watch

Add watch expression (evaluated at every tracepoint hit)

debug_clear-probes

Clear tracepoints, logpoints, and/or watch expressions

debug_list-probes

List tracepoints, logpoints, and/or watches

debug_put-exceptionpoint

Configure exception breakpoints (none, uncaught, all)

debug_put-logpoint

Set a logpoint (evaluates expression)

debug_put-tracepoint

Set a tracepoint (captures call stack)

debug_remove-probe

Remove a tracepoint, logpoint, or watch by type and id

execute

Batch-execute multiple tool calls in one request via JavaScript; use callTool(name, input, returnOutput?) to invoke tools. On browser platform the script has page (Playwright Page) for page.evaluate(), page.locator(), etc. Reduces round-trips and token usage.

figma_compare-page-with-design

Compare page with Figma design

interaction_click

Click an element

interaction_drag

Drag and drop

interaction_fill

Fill an input field

interaction_hover

Hover over an element

interaction_press-key

Press a keyboard key

interaction_resize-viewport

Resize viewport (Playwright emulation)

interaction_resize-window

Resize browser window (OS-level)

interaction_scroll

Scroll page or element

interaction_select

Select dropdown option

navigation_go-back-or-forward

Go back or forward in history (direction: back \

navigation_go-to

Navigate to a URL

navigation_reload

Reload the page

o11y_get-console-messages

Get console logs with filtering

o11y_get-http-requests

Get network requests with filtering

o11y_get-trace-id

Get current OpenTelemetry trace ID

o11y_get-web-vitals

Get Web Vitals (LCP, INP, CLS, TTFB, FCP)

o11y_new-trace-id

Generate new trace ID

o11y_set-trace-id

Set trace ID for distributed tracing

react_get-component-for-element

Get React component for DOM element

react_get-element-for-component

Get DOM element for React component

stub_clear

Clear stubs

stub_intercept-http-request

Intercept and modify requests

stub_list

List installed stubs

stub_mock-http-response

Mock HTTP response

sync_wait-for-network-idle

Wait for network to become idle

ツールの変更履歴

同じ設定での完全なチェック同士を比較します。ツールの列挙のみで実行はしていません。入力スキーマの変更は測定していません。

完全なツールチェックはまだありません。