jpskill.com
📦 その他 コミュニティ

pwdebug

ウェブブラウザを操作してフロントエンドのデバッグを効率的に行い、ナビゲーションやJavaScript実行、スクリーンショット取得などを、コマンドラインを通じて複数回にわたり同じブラウザセッションで実行するSkill。

📜 元の英語説明(参考)

用于需要通过命令行操作真实浏览器实例进行前端调试（如导航、执行 JS、截图、元素拾取、控制台日志）且希望跨多次命令复用同一浏览器会话的场景。

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブブラウザを操作してフロントエンドのデバッグを効率的に行い、ナビゲーションやJavaScript実行、スクリーンショット取得などを、コマンドラインを通じて複数回にわたり同じブラウザセッションで実行するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o pwdebug.zip https://jpskill.com/download/18602.zip && unzip -o pwdebug.zip && rm pwdebug.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18602.zip -OutFile "$d\pwdebug.zip"; Expand-Archive "$d\pwdebug.zip" -DestinationPath $d -Force; ri "$d\pwdebug.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して pwdebug.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → pwdebug フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
6

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Playwright ブラウザデバッグ CLI

概観

このスキルは、Playwright をベースとしたコマンドラインツールを提供し、ブラウザサービスの起動、ナビゲーションの実行、JS の評価、スクリーンショットの撮影、要素の選択、ログの監視などのデバッグ操作を可能にします。現在、Chromium（CDP 接続経由）のみをサポートしています。

快速開始

作業ディレクトリはこのファイルが存在するディレクトリである必要があります。サンプルコマンドはデフォルトでこのディレクトリから実行されます。

  1. ブラウザサービスを起動します（常駐プロセス）：
scripts/pwdebug.py start
  1. 新しいタブでページを開きます：
scripts/pwdebug.py nav https://example.com --new
  1. JS 式を実行します：
scripts/pwdebug.py evaluate "document.title"
  1. スクリーンショットを撮影します：
scripts/pwdebug.py screenshot --full
  1. 対話的に要素を選択します：
scripts/pwdebug.py pick "クリックしてログインボタン"
  1. コンソールログを監視します：
scripts/pwdebug.py watch-logs
  1. 最近のログを表示します：
scripts/pwdebug.py logs 100

説明

  • CLI エントリポイント：scripts/pwdebug.py
  • ログパス：~/.cache/pwdebug/console.log.jsonl
  • ステータスパス：~/.cache/pwdebug/server.json

依存関係とインストール

  • スクリプトの依存関係は uv --script で管理されます。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Playwright 浏览器调试 CLI

概览

该技能提供一个基于 Playwright 的命令行工具，用于启动浏览器服务并执行导航、评估 JS、截图、元素拾取与日志监听等调试操作。当前仅支持 Chromium（通过 CDP 连接）。

快速开始

工作目录应为本文件所在目录，示例命令默认从该目录执行。

  1. 启动浏览器服务（常驻进程）：
scripts/pwdebug.py start
  1. 在新标签页打开页面：
scripts/pwdebug.py nav https://example.com --new
  1. 执行 JS 表达式：
scripts/pwdebug.py evaluate "document.title"
  1. 截图：
scripts/pwdebug.py screenshot --full
  1. 交互式拾取元素：
scripts/pwdebug.py pick "点击登录按钮"
  1. 监听控制台日志：
scripts/pwdebug.py watch-logs
  1. 查看最近日志：
scripts/pwdebug.py logs 100

说明

  • CLI 入口：scripts/pwdebug.py
  • 日志路径：~/.cache/pwdebug/console.log.jsonl
  • 状态路径：~/.cache/pwdebug/server.json

依赖与安装

  • 脚本依赖通过 uv --script 管理。

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。