DevScope - Web診断ツール 作成者: POLPROG

DevScopeは、現在のWebページを必要なときに検査および診断するためのプロ向けブラウザーツールキットです。
構造、CSS、性能、ネットワーク、セキュリティヘッダー、アクセシビリティ、SEO、ストレージ、JavaScript実行環境、検出されたフレームワークを1つの画面で分析できます。

🧩 DOM解析と要素検査

• DOMの深さ、複雑さ、重複ID、切り離されたノード、インラインスタイル、セマンティック構造を分析
• ハイライト表示とパンくずナビゲーションでページ上の要素を直接選択
• 一般的な構造上のアンチパターンに対する改善ヒントを確認

🎨 CSS検査とライブ編集

• 計算済みスタイル、ボックスモデル、実際に適用されたプロパティを表示
• 詳細度の競合やレイアウト上の問題を検出
• スタイルをリアルタイムで編集し、変更を即座に確認して個別にリセット

⚡ 性能とCORE WEB VITALS

• Core Web Vitals、描画タイミング、リソースタイミング、長時間タスクを確認
• JavaScript実行シグナルと種類別リソース使用量を分析
• 遅いファイルと性能上のボトルネック候補を特定

🌐 ネットワーク、ストレージ、実行環境

• ネットワークリクエストを種類とステータスで分類し、タイミングを分析
• LocalStorage、SessionStorage、Cookie、IndexedDB、Cache APIを確認
• 実行時エラー、コンソールメッセージ、イベントリスナー、タイマー、スクリプト活動を検査

🔐 セキュリティとアクセシビリティ

• HTTPS、mixed content、CSP、HSTS、Permissions-Policy、X-Frame-Optionsを確認
• ARIA、コントラスト、ランドマーク、ラベル、代替テキストをWCAG観点で検査
• 明確な結果と提案で修正の優先順位を決定

🔎 SEOとフレームワーク検出

• メタタグ、Open Graph、canonical URL、構造化データ、見出し階層、インデックス可否を確認
• React、Vue、Angular、Svelte、jQuery、Next.js、Nuxt.js、Tailwind CSS、Bootstrapなどを検出
• 利用可能なバージョン情報と古い依存関係の可能性を確認

🏥 サイトヘルスレポート

• P0、P1、P2に分類された優先度付きの問題を生成
• 0から100のDX Scoreを技術的な健全性の目安として使用
• 安定性、ネットワーク、性能、DOM品質を1つのレポートで確認

📊 エクスポートと比較

• レポートをJSON、CSV、Markdownで出力
• スナップショットを作成し、結果を比較してリグレッションを検出
• 個別モジュールをエクスポートして重点的に分析

🛠 実際のデバッグ向け設計

パネルを右または下に固定し、フローティング表示、サイズ変更、Ctrl+Shift+Dでの切り替えができます。

Shadow DOM分離により検査ページへの影響を抑えます。ライトとダークテーマ、システム同期、15言語のインターフェースを利用できます。

🔒 プライバシー優先

個人データの収集、閲覧行動の追跡、分析、テレメトリー、外部サーバーへの接続は行いません。

ページ分析は端末上でローカルに実行されます。設定はブラウザー内に保存されます。

🏢 開発者について

DevScopeは、プライバシーを重視したブラウザー拡張機能、Webアプリ、モバイルアプリを開発するポーランドのテクノロジー企業POLPROGによって開発されています。

ウェブサイト: https://polprog.pl/
DevScope製品ページ: 製品ページを見る
ブラウザー版: Chrome Web Storeで見る