diagnostic-logs について
診断用コンソールログの書式を整えるコーディングスキルです。用途の明記、検索可能な識別子、JSON文字列化、デバッグ後のログ削除を定めています。
主な機能
- 01目的が明確なログメッセージ
- 02検索可能な大文字識別子
- 03オブジェクトのJSON文字列化
- 04デバッグ後のログ削除
活用シーン
- 01デバッグ中に検索可能なログを追加
- 02コンソールデータをコピーしやすくする
- 03一時的な診断ログを整理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ editframe/ skills --skill diagnostic-logsインストール後、Claude Code で/diagnostic-logsを入力して読み込まれたか確認します。
詳細
診断ログ
形式
console.log('[IDENTIFIER] Clear purpose message', JSON.stringify({ object: data }));
要件
- 目的を明確にする - このログが何を示しているかを明確にします。
- フィルタリング可能な識別子を1つにする -
[UPPER_CASE]のプレフィックスを付けます(例:[THUMB_STRIP]、[RENDER])。 - オブジェクトを文字列化する - ブラウザーのコンソールから簡単にコピーできるように、
JSON.stringify()を使用します。 - 作業が終わったら削除する - デバッグ完了後に診断ログを削除します。
例
// ✅ Good
console.log('[THUMB_STRIP] Starting animation', JSON.stringify({
loadingCount: 3,
totalSlots: 10
}));
// ❌ Bad - no identifier, object not stringified
console.log('Starting animation', { loadingCount: 3 });
コメント
Markdown 対応