DevView — Offline Responsive Inspector

個人開発者向けの、完全オフラインで動くレスポンシブデザイン・プレビュー拡張機能です。 ローカルのHTML/CSS/JSを読み込み、デバイスサイズを切り替えながら確認し、要素を選んで 複製ファイルにレスポンシブコード（メディアクエリ等）を自動生成します。元ファイルは壊しません。

主な機能

• 完全オフライン: 外部サーバーへの通信ゼロ。ローカルファイル／フォルダをドラッグ＆ドロップで読み込み。
• デバイスプレビュー: スマホ / タブレット / PC のタブ切り替え、画面回転、1px単位のドラッグ・数値入力。
• 要素選択（インスペクター）: プレビュー上の要素にホバーで青枠、クリックでセレクタを取得。
• ショートカット: R（回転）/ S（スマホ）/ T（タブレット）/ P（PC）。
• 安全な自動書き換え: 元ファイルを保護するため複製（〇〇.responsive-backup.css 等）を作り、 拡張子（CSS / SCSS / CSS Modules / TSX）を判別して最適な構文を挿入・保存。

使い方

1. コマンドパレット（Ctrl+Shift+P）→ DevView: プレビューを開く。
2. プレビュー領域に HTML ファイル、または index.html を含むフォルダをドラッグ＆ドロップ。
3. デバイスタブやショートカットでサイズを切り替え、「選択」で要素を指定。
4. 対象の CSS/SCSS ファイルを開いた状態で「このサイズでスタイルを適用」を押すと、複製ファイルに追記されます。

既知の制約

• 要素選択が動くのは、ファイルを読み込んだ（srcdoc = 同一オリジン）状態のときです。
• 読み込んだHTMLのインライン <script> は、セキュリティ設定（CSP）により実行されない場合があります（レイアウト確認が主目的）。
• 相対パス解決はファイル名ベースの簡易実装です。

ライセンス

MIT