Media
3 items
Description
ショートカットキーから localStorage やリセット操作を呼び出せる軽量デバッグHUD console-HUD は、ショートカットだけで localStorage や IndexedDB を確認・削除し、DevTools を開かずに再読み込みまで一気に進められる開発者向けの HUD 型 Chrome 拡張です。Ctrl+Shift+V で HUD を呼び出し、整形済み JSON をカードレイアウトで俯瞰。Ctrl+Shift+Y で同じタブのストレージを削除して自動リロードできます。 【主な特徴】 ・HUD 表示: ショートカット 1 回で表示される JSON ビューア。キーを上、整形された JSON を下に並べ、見やすいカードレイアウトで表示します。 ・ワンクリックリセット: Ctrl+Shift+Y で localStorage / IndexedDB を browsingData API で削除し、タブを即座にリロードします。 ・セキュアな動作: データはブラウザ内で完結し、外部送信も永続保存もしません。 ・視認性の高い UI: React + Tailwind で構築したカード型 HUD。角丸と余白の多いデザイン、タブごとの配色で状況を素早く判断できます。 ・開発フローにフィット: Manifest V3、Service Worker、Content Script を組み合わせた構成。ショートカット割り当ては chrome://extensions/shortcuts から自由に変 更できます。 【使い方】 1. 拡張を読み込んだら chrome://extensions/shortcuts を開き、ショートカットの割り当てを確認します（デフォルトは Ctrl+Shift+V と Ctrl+Shift+Y）。 2. デバッグしたいタブで Ctrl+Shift+V を押すと HUD が表示されます。再度押すか HUD の × ボタンで閉じます。 3. ストレージを消したいときは Ctrl+Shift+Y を押します。localStorage と IndexedDB を削除し、自動で同じタブをリロードします。 【こんな人におすすめ】 ・localStorage に溜まったフラグを迅速にクリアしながら動作確認したいフロントエンド開発者 ・DevTools を開くほどではないが JSON の中身だけさっと確認したい QA やデバッグ担当 ・ショートカット主体で作業スピードを上げたいパワーユーザー