mcpField
B
browser-debugging

browser-debugging

github.com/aj-geddes開発373542 回インストール34 週間前に更新
リポジトリ

browser-debugging について

browser-debuggingは、JavaScriptエラー、レイアウト、パフォーマンス、操作、ネットワークリクエストなど、ブラウザー側の問題を調査するスキルです。ブラウザーデベロッパーツールでウェブページの不具合を分析し、修正する開発者向けです。

主な機能

  1. 01JavaScriptエラーの調査
  2. 02HTMLとCSSの確認・編集
  3. 03パフォーマンス問題の分析
  4. 04ネットワークリクエスト失敗の診断
  5. 05ユーザー操作の問題の確認

活用シーン

  1. 01ウェブページのスクリプトエラーの特定
  2. 02レイアウトやスタイルの問題の調査
  3. 03パフォーマンスやネットワーク障害の分析

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debugging

インストール後、Claude Code で/browser-debuggingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
browser-devtools-fundamentals.md
common-issues-solutions.md
debugging-techniques.md
performance-debugging.md
templates/
component-template.tsx

詳細

ブラウザーデバッグ

目次

概要

ブラウザーデバッグツールは、JavaScript エラー、レイアウトの問題、パフォーマンスの問題など、クライアント側の問題の特定と修正に役立ちます。

使用する場面

  • JavaScript エラー
  • レイアウト／スタイルの問題
  • パフォーマンスの問題
  • ユーザー操作の問題
  • ネットワークリクエストの失敗
  • アニメーションの不具合

クイックスタート

最小限の動作するサンプル：

Chrome DevTools Tabs:

Elements/Inspector:
  - Inspect HTML structure
  - Edit HTML/CSS in real-time
  - View computed styles
  - Check accessibility tree
  - Modify DOM

Console:
  - View JavaScript errors
  - Execute JavaScript
  - View console logs
  - Monitor messages
  - Clear errors

Sources/Debugger:
  - Set breakpoints
  - Step through code
  - Watch variables
  - Call stack view
  - Conditional breakpoints

Network:
  - View all requests
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装については、references/ ディレクトリを参照してください。

ガイド内容
Browser DevTools FundamentalsBrowser DevTools Fundamentals
Debugging TechniquesDebugging Techniques
Common Issues & SolutionsCommon Issues & Solutions
Performance DebuggingPerformance Debugging

ベストプラクティス

✅ 推奨事項
  • 確立されたパターンと規約に従います
  • クリーンで保守しやすいコードを書きます
  • 適切なドキュメントを追加します
  • デプロイ前に十分にテストします
❌ 禁止事項
  • テストや検証を省略しません
  • エラーハンドリングを無視しません
  • 設定値をハードコードしません

コメント

Markdown 対応