Web開発者ツール

パフォーマンス指標、技術スタック検出、デバッグユーティリティを備えた包括的なWeb開発者ツール拡張機能。

# 🛠️ dtools - Web 開発者ツール ## タイトル **dtools - 強力な Web 開発者ツールブラウザ拡張機能** ## 紹介 dtools は、Web 開発者向けに特別に設計された強力なブラウザ拡張機能で、複数の実用的な開発デバッグツール、パフォーマンス監視指標、および技術スタックの自動検出機能を統合しています。Web サイトの開発、デバッグ、または最適化を行う際、dtools はあらゆるニーズに包括的なサポートを提供します。 ### コア機能 **📄 ページ情報分析** - URL 情報の完全な表示（プロトコル、ホスト名、パス、クエリパラメータ、ハッシュ） - Meta タグ情報の自動抽出（説明、キーワード、作成者、ビューポート設定など） - Open Graph および Twitter Card メタデータの解析サポート - 画像統計と見出し構造の分析 - 詳細な DOM 構造統計 **🔍 包括的な技術スタック分析** - **広範なフロントエンド技術サポート**: ページで使用されている多様な技術を自動検出し、主流の開発フレームワーク、UIコンポーネントライブラリ、ユーティリティ関数ライブラリなどをカバーします。 - **深く統合されたコンテンツ認識**: コンテンツ管理システム（CMS）、データ分析ツール、コンテンツデリバリネットワーク（CDN）の使用状況を正確に識別します。 - **明確なアーキテクチャの洞察**: 技術名を列挙するだけでなく、詳細なDOM構造の統計分析を提供し、開発者がアプリケーションのアーキテクチャを迅速に理解するのに役立ちます。 - **バンドリングツール検出**: 現在最も普及しているWeb開発バンドリングツールの分析を行います。 **📊 パフォーマンス指標監視** - コア Web Vitals：LCP（最大コンテンツ描画）、FID（初回入力遅延）、CLS（累積レイアウトシフト）、FCP（初回コンテンツ描画） - ネットワークパフォーマンス分析：TTFB（初回バイト時間）、DNS クエリ時間、TCP 接続時間、SSL ハンドシェイク時間、リクエスト/レスポンス時間 - DOM パフォーマンス指標：DOM インタラクティブ時間、DOM 完了時間、DOM 処理時間、リソース読み込み時間、ページ完全読み込み時間 - 自動パフォーマンススコアリングシステム（良好/改善必要/不良） **💻 デバイス情報表示** - オペレーティングシステムとブラウザの詳細情報 - 画面解像度とビューポートサイズ - User Agent 文字列の解析 - ネットワークステータス、メモリ、CPU コア数 - 言語、タイムゾーン、プラットフォーム情報 **🗜️ 画像圧縮ツール** - 複数の画像形式のサポート - バッチ処理機能 - 調整可能な圧縮設定 - 最大サイズとサイズ制限 - パフォーマンス向上のための Web Worker サポート **💾 ストレージ管理** - ストレージ分析：LocalStorage、SessionStorage、Cookies の概要 - ストレージビューア：LocalStorage および SessionStorage 項目の表示、編集、削除 - Cookie ビューア：詳細情報付きで Cookie の表示、編集、削除 **🔧 API クライアント** - 組み込みの Postman スタイルの API テストツール - 複数の HTTP メソッドのサポート（GET、POST、PUT、DELETE など） - カスタムリクエストヘッダーとボディ - レスポンスの表示とフォーマット - リクエスト履歴 **🛠️ ユーティリティツールセット** 14 以上の開発者ユーティリティツールを含む： - URL エンコード/デコード - Base64 エンコード/デコード - JWT トークンパーサーとバリデーター - JSON フォーマッターとビューティファイア - ハッシュ計算（MD5、SHA1、SHA256、SHA512） - UUID ジェネレーター - Lorem Ipsum テキストジェネレーター - Meta タグジェネレーター - Unix タイムスタンプコンバーター - カラーピッカーとコンバーター - CSS box-shadow ジェネレーター - 正規表現テスター - User Agent パーサー - QR コードジェネレーター **⚙️ その他の機能** - 多言語サポート：中国語、英語、日本語 - モダンな UI：React + Ant Design で構築 - 寄付サポート：開発者の継続的な改善をサポート - 設定機能：カスタマイズ可能な言語設定 - タブ状態の永続化：最後にアクティブだったタブを記憶 ### 使用シーン - **フロントエンド開発デバッグ**：ページ情報の迅速な表示、技術スタックの検出、DOM 構造の分析 - **パフォーマンス最適化**：コア Web Vitals 指標の監視、パフォーマンスボトルネックの特定 - **API テスト**：ツールを切り替えることなく迅速にインターフェースをテスト - **日常的な開発**：組み込みツールセットを使用して開発効率を向上 - **学習と研究**：Web サイトで使用されている技術スタックとアーキテクチャの理解 dtools は、Web 開発者にワンストップの開発ツールソリューションを提供し、開発をより効率的に、デバッグをより便利にすることを目指しています。