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 開発者にワンストップの開発ツールソリューションを提供し、開発をより効率的に、デバッグをより便利にすることを目指しています。