firebase-development-debug
Firebaseエミュレーターの不具合、ルール違反、関数エラー、認証問題、デプロイ失敗といったFirebase開発における様々な問題を、「エラー」「動かない」「デバッグ」などのキーワードから判断し、原因特定や解決を支援するSkill。
📜 元の英語説明(参考)
This skill should be used when troubleshooting Firebase emulator issues, rules violations, function errors, auth problems, or deployment failures. Triggers on "error", "not working", "debug", "troubleshoot", "failing", "broken", "permission denied", "emulator issue".
🇯🇵 日本人クリエイター向け解説
Firebaseエミュレーターの不具合、ルール違反、関数エラー、認証問題、デプロイ失敗といったFirebase開発における様々な問題を、「エラー」「動かない」「デバッグ」などのキーワードから判断し、原因特定や解決を支援するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o firebase-development-debug.zip https://jpskill.com/download/16717.zip && unzip -o firebase-development-debug.zip && rm firebase-development-debug.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16717.zip -OutFile "$d\firebase-development-debug.zip"; Expand-Archive "$d\firebase-development-debug.zip" -DestinationPath $d -Force; ri "$d\firebase-development-debug.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
firebase-development-debug.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
firebase-development-debugフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Firebase デバッグ
概要
このサブスキルは、Firebase の開発における問題の体系的なトラブルシューティングをガイドします。エミュレータの問題、ルール違反、関数エラー、認証の問題、デプロイの失敗を扱います。
主要な原則:
- まず問題の種類を特定する (エミュレータ、ルール、関数、認証、デプロイ)
- 診断にはエミュレータ UI と Rules Playground を使用する
- 再起動する前にエミュレータの状態をエクスポートする
- 今後の参照のために問題と解決策を文書化する
このサブスキルが適用される場合
- エミュレータが起動しない、またはポートの競合がある
- Firestore のルール違反が発生する (PERMISSION_DENIED)
- Cloud Functions がエラーを返すか、実行されない
- エミュレータで認証が機能しない
- デプロイが不可解なエラーで失敗する
- ユーザーが「debug」、「troubleshoot」、「error」、「not working」、「failing」と言う
以下には使用しないでください:
- 新しいプロジェクトのセットアップ →
firebase-development:project-setup - 新しい機能の追加 →
firebase-development:add-feature - 特定のエラーがないコードレビュー →
firebase-development:validate
TodoWrite ワークフロー
次の 10 個のステップを含むチェックリストを作成します。
ステップ 1: 問題の種類の特定
エラーを分類します。
| カテゴリ | 症状 | キーワード |
|---|---|---|
| エミュレータが起動しない | ポートの競合、初期化エラー | "EADDRINUSE", "emulator failed" |
| ルール違反 | 読み取り/書き込みの権限拒否 | "PERMISSION_DENIED", "insufficient" |
| 関数エラー | HTTP 500、タイムアウト、実行されない | "function failed", "timeout" |
| 認証の問題 | トークンエラー、認証されていない | "auth failed", "invalid token" |
| デプロイの失敗 | デプロイコマンドが失敗する | "deployment failed", "deploy error" |
不明な場合は、AskUserQuestion を使用して問題の種類を明確にします。
ステップ 2: エミュレータのログとターミナルの確認
実行中のエミュレータの場合: 問題を再現しながらターミナルの出力を監視します。
起動しないエミュレータの場合:
lsof -i :4000 && lsof -i :5001 && lsof -i :8080 # ポートの確認
kill -9 <PID> # 競合するプロセスの強制終了
デプロイエラーの場合: firebase-debug.log を確認します。
参照: docs/examples/emulator-workflow.md
ステップ 3: エミュレータ UI を開く
open http://127.0.0.1:4000
エミュレータ UI を使用して以下を行います。
- Firestore のデータと構造の表示
- 認証されたユーザーの確認
- 関数の呼び出しログの確認
- 統合されたログの検索
ステップ 4: Playground でルールをテストする (ルールに関する問題の場合)
エミュレータ UI → Firestore → Rules Playground:
- 操作の種類を選択 (get/list/create/update/delete)
- ドキュメントパスを指定
- 認証コンテキストを設定 (uid、カスタムクレーム)
- 書き込みのリクエストデータを追加
- シミュレーションを実行し、評価トレースを確認
参照: docs/examples/firestore-rules-patterns.md
ステップ 5: デバッグログの追加 (関数エラーの場合)
戦略的な console.log ステートメントを追加します。
- 関数のエントリ確認
- 入力データ (req.body, req.params)
- 認証コンテキスト (userId, API key)
- 中間操作の結果
- スタックトレースを含むエラーの詳細
再現しながらターミナルの出力を監視します。
参照: docs/examples/express-function-architecture.md
ステップ 6: 認証構成の確認 (認証の問題の場合)
環境変数を確認します。
cat functions/.env
cat hosting/.env.local # NEXT_PUBLIC_USE_EMULATORS=true が必要
クライアントコードと API キーミドルウェアでのエミュレータ接続を確認します。
参照: docs/examples/api-key-authentication.md
ステップ 7: デプロイ構成の確認 (デプロイの失敗の場合)
cat firebase-debug.log # エラーの詳細
cat firebase.json # 構成の問題
cat .firebaserc # プロジェクト ID
firebase target:list # ターゲットの確認
ローカルで predeploy hooks をテストします。
cd functions && npm run build
ステップ 8: エミュレータの状態のエクスポート
修正を行う前に:
# グレースフルシャットダウン (Ctrl+C で自動的にエクスポート)
# または手動エクスポート:
firebase emulators:export ./backup-data
エクスポートの確認: ls -la .firebase/emulator-data/
ステップ 9: 修正の実装とテスト
診断に基づいて修正を適用し、次に以下を実行します。
firebase emulators:start --import=.firebase/emulator-data
確認:
- 元のエラーが発生しなくなった
- ターミナルに成功ログが表示される
- エミュレータ UI で期待される動作が確認される
ステップ 10: 問題と解決策の文書化
docs/debugging-notes.md にエントリを作成します。
- 症状と正確なエラーメッセージ
- 根本原因
- 適用された解決策
- 将来のための予防策
一般的な問題のクイックリファレンス
| 問題 | 解決策 |
|---|---|
| ポートの競合 | lsof -i :<port>、プロセスを強制終了 |
| データの永続性が失われた | エミュレータを停止するには Ctrl+C を使用する (kill は使用しない) |
| コールドスタートの遅延 | 最初の呼び出しには 5〜10 秒かかる (正常) |
| ルールがリロードされない | エミュレータを再起動する |
| Admin vs Client SDK | Admin はルールをバイパスし、クライアントはルールを尊重する |
| CORS がない | app.use(cors({ origin: true })) を追加する |
| エミュレータ接続 | NEXT_PUBLIC_USE_EMULATORS=true を設定する |
| API キーのプレフィックス | プレフィックスが実際のキーと一致することを確認する |
Superpowers との統合
Firebase 固有のツールで根本原因が明らかにならない場合は、superpowers:systematic-debugging を呼び出して以下を行います。
- 複雑なマルチサービスインタラクション
- 競合状態またはタイミングの問題
- Firebase レイヤーを超えるコールスタックのトレース
パターンの参照
- エミュレータワークフロー:
docs/examples/emulator-workflow.md - ルールパターン:
docs/examples/firestore-rules-patterns.md - 認証パターン:
docs/examples/api-key-authentication.md - 関数:
docs/examples/express-function-architecture.md
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Firebase Debugging
Overview
This sub-skill guides systematic troubleshooting of Firebase development issues. It handles emulator problems, rules violations, function errors, auth issues, and deployment failures.
Key principles:
- Identify issue type first (emulator, rules, functions, auth, deployment)
- Use Emulator UI and Rules Playground for diagnosis
- Export emulator state before restarting
- Document issues and solutions for future reference
When This Sub-Skill Applies
- Emulators won't start or have port conflicts
- Getting Firestore rules violations (PERMISSION_DENIED)
- Cloud Functions returning errors or not executing
- Authentication not working in emulators
- Deployment fails with cryptic errors
- User says: "debug", "troubleshoot", "error", "not working", "failing"
Do not use for:
- Setting up new projects →
firebase-development:project-setup - Adding new features →
firebase-development:add-feature - Code review without specific errors →
firebase-development:validate
TodoWrite Workflow
Create checklist with these 10 steps:
Step 1: Identify Issue Type
Categorize the error:
| Category | Symptoms | Keywords |
|---|---|---|
| Emulator Won't Start | Port conflicts, initialization errors | "EADDRINUSE", "emulator failed" |
| Rules Violation | Permission denied on read/write | "PERMISSION_DENIED", "insufficient" |
| Function Error | HTTP 500, timeout, not executing | "function failed", "timeout" |
| Auth Issue | Token errors, not authenticated | "auth failed", "invalid token" |
| Deployment Failure | Deploy command fails | "deployment failed", "deploy error" |
If unclear, use AskUserQuestion to clarify issue type.
Step 2: Check Emulator Logs and Terminal
For running emulators: Watch terminal output while reproducing the issue.
For emulators that won't start:
lsof -i :4000 && lsof -i :5001 && lsof -i :8080 # Check ports
kill -9 <PID> # Kill conflicting process
For deployment errors: Check firebase-debug.log
Reference: docs/examples/emulator-workflow.md
Step 3: Open Emulator UI
open http://127.0.0.1:4000
Use Emulator UI to:
- View Firestore data and structure
- Check authenticated users
- Review function invocation logs
- Search consolidated logs
Step 4: Test Rules in Playground (If Rules Issue)
In Emulator UI → Firestore → Rules Playground:
- Select operation type (get/list/create/update/delete)
- Specify document path
- Set auth context (uid, custom claims)
- Add request data for writes
- Run simulation and review evaluation trace
Reference: docs/examples/firestore-rules-patterns.md
Step 5: Add Debug Logging (If Function Error)
Add strategic console.log statements:
- Function entry confirmation
- Input data (req.body, req.params)
- Auth context (userId, API key)
- Intermediate operation results
- Error details with stack trace
Watch terminal output while reproducing.
Reference: docs/examples/express-function-architecture.md
Step 6: Verify Auth Configuration (If Auth Issue)
Check environment variables:
cat functions/.env
cat hosting/.env.local # Should have NEXT_PUBLIC_USE_EMULATORS=true
Check emulator connection in client code and API key middleware.
Reference: docs/examples/api-key-authentication.md
Step 7: Check Deployment Config (If Deployment Failure)
cat firebase-debug.log # Full error details
cat firebase.json # Config issues
cat .firebaserc # Project ID
firebase target:list # Verify targets
Test predeploy hooks locally:
cd functions && npm run build
Step 8: Export Emulator State
Before making fixes:
# Graceful shutdown (Ctrl+C exports automatically)
# Or manual export:
firebase emulators:export ./backup-data
Verify export: ls -la .firebase/emulator-data/
Step 9: Implement and Test Fix
Apply fix based on diagnosis, then:
firebase emulators:start --import=.firebase/emulator-data
Verify:
- Original error no longer occurs
- Terminal shows success logs
- Emulator UI confirms expected behavior
Step 10: Document Issue and Solution
Create entry in docs/debugging-notes.md:
- Symptom and exact error message
- Root cause
- Solution applied
- Prevention for future
Common Issues Quick Reference
| Issue | Solution |
|---|---|
| Port conflicts | lsof -i :<port>, kill process |
| Data persistence lost | Use Ctrl+C (not kill) to stop emulators |
| Cold start delays | First call takes 5-10s (normal) |
| Rules not reloading | Restart emulators |
| Admin vs Client SDK | Admin bypasses rules, client respects them |
| Missing CORS | Add app.use(cors({ origin: true })) |
| Emulator connection | Set NEXT_PUBLIC_USE_EMULATORS=true |
| API key prefix | Verify prefix matches actual keys |
Integration with Superpowers
If Firebase-specific tools don't reveal root cause, invoke superpowers:systematic-debugging for:
- Complex multi-service interactions
- Race conditions or timing issues
- Call stack tracing beyond Firebase layer
Pattern References
- Emulator workflow:
docs/examples/emulator-workflow.md - Rules patterns:
docs/examples/firestore-rules-patterns.md - Auth patterns:
docs/examples/api-key-authentication.md - Functions:
docs/examples/express-function-architecture.md