DevSuite Pro

1つの拡張機能に64以上の強力な開発者ツール — 検査、計測、キャプチャ、分析、デザイン

DevSuite Pro：オールインワン デベロッパーツールキット、Web開発キット、デザインスイート（1つのChrome拡張に64ツール） 要素検査やレスポンシブテストのために用途別の拡張を何十個もインストールするのはもう終わり。DevSuite Proは究極のオールインワン Web開発者ツールキット兼フロントエンド デザイン Chrome拡張です。64個のプロ仕様デベロッパーツール、Webデザインユーティリティ、SEOアナライザーを1つの高速でプライバシー重視の拡張に集約。CSSをライブ検査・編集、HTML編集、全ページスクリーンショット、画像とSVG一括ダウンロード、SEO監査、WCAGアクセシビリティとコントラスト チェック、JSON / XML / SQL整形、JWTデコード、パスワードとUUID生成、モバイル・タブレット並列シミュレーション、PDF変換、ネットワークとWebSocket監視、強制ダークモード、クッキー編集など、クリーンなポップアップとドラッグ可能なドックから操作。 💾 自動保存：サイトごとの永続的な編集 6つのツールが変更内容をURLごとに自動保存し、訪問のたびに再適用： • CSSインスペクター — ライブCSS編集を保持 • 要素移動 — 移動した要素は所定位置に • 要素削除/非表示 — 広告、ポップアップ、バナーを永続非表示 • 画像置換 — 差し替えた画像を維持 • フォント変更 — 選択書体を自動再適用 • ライブテキストエディター — 編集テキストを保持 ═══ 🎨 検査・編集・複製 ═══ 1) CSSインスペクター [無料] — 任意の要素にホバーしてCSS確認・ライブ変更、計算値、ボックスモデル、CSS変数を表示。サイトごとに自動保存。 2) アニメーション インスペクター [有料] — すべてのCSSアニメーション、transition、@keyframesを検出。スロー再生、フレーム単位スクラブ。 3) Tailwindとしてコピー [有料] — 要素を右クリックでCSSをTailwindユーティリティクラスに変換。HTMLからTailwindCSSコード取得。 4) アウトラインのみモード [無料] — すべての要素に1pxアウトライン適用。ワイヤーフレーム可視化、HTML/CSSデバッグ。 5) Tailwindヘルパー [有料] — 要素ホバーでブレークポイントとダークモード バリアント付きTailwindクラスを確認。チートシート内蔵。 6) ページアウトライナー [無料] — HTMLツリーをインタラクティブなアウトラインで描画。HTML構造、DOM階層を確認。 7) コンポーネント検出器 [有料] — popular JavaScript frameworks and component librariesを検出。 8) 要素移動 [有料] — 任意の要素を新位置へドラッグ。コードなしでレイアウト変更。サイトごと自動保存。 9) 要素削除 / 非表示 [無料] — クリックで要素削除/非表示。広告、クッキーバナー、ポップアップを永続非表示。 10) 要素エクスポート [有料] — 任意要素のHTML、計算CSS、JSONをエクスポート。クリーンなUIスナップショット保存。 11) コンポーネントコード コピー [有料] — 要素をReact JSX、Vue SFC、Svelteコンポーネントコードに変換。 12) DOMパス検索 [有料] — 要素ホバーでCSSセレクター、XPath、querySelector取得。Selenium, Puppeteer用。 ═══ 📸 キャプチャ & アセット ═══ 13) スクリーンショット [無料] — ビューポート、全ページ、または単一要素をキャプチャ。無限スクロールと遅延読み込み対応。透かしなし。 14) 画像抽出 [無料] — Webサイトの全画像をワンクリックでダウンロード。サイズ、形式（PNG、JPG、GIF、WebP、SVG）でフィルター、ZIP取得。 15) SVGグラバー [有料] — ページ上のSVGアイコンとインラインベクターを検出。プレビュー、コピー、最適化、SVG/PNG保存。 16) 画像置換 [有料] — ライブページの画像をローカルファイルまたはURLに置換。サイトごと自動保存。 17) PDFに変換 [無料] — 広告自動非表示、ライトテーマ強制、用紙サイズ指定でクリーンなPDF保存。HTMLからPDF変換。 ═══ 📐 レイアウト & 計測 ═══ 18) QRコード ジェネレーター [無料] — 現在のURLをQRコードに変換。コンテンツ（URL、テキスト、Wi-Fi、vCard）カスタマイズしPNG保存。 19) ページ定規 [無料] — ピクセル単位のルーラーとガイドラインを描画。水平、垂直、斜め計測。 20) レスポンシブ ビューア [有料] — common mobile, tablet, and desktop sizes、カスタムビューポートを並べて同時レンダリング。同期スクロール。 21) 距離測定 [無料] — 任意の2要素をクリックでX、Y、対角ピクセル距離を即座に表示。 22) Z-Index インスペクター [有料] — すべての重ね合わせコンテキストとz-indexレイヤーを可視化。隠れたモーダル、壊れたドロップダウンを診断。 23) Grid / Flex ビジュアライザー [有料] — CSS GridとFlexboxコンテナをカラフルなオーバーレイで検査。トラックライン、ギャップ表示。 ═══ 🔍 解析 & デバッグ ═══ 24) ヒートマップ シミュレーター [有料] — Fパターン読みと視覚階層に基づき予測ユーザー注目ヒートマップを生成。 25) 閲覧データ消去 [無料] — 現在のサイトのみキャッシュ、クッキー、localStorage、sessionStorageを選択的にクリア。 26) サイトスタック（技術検出） [有料] — Webサイト背後の技術を識別：frontend frameworks, CMS, e-commerce, CDN, hosting, analyticsなど。 27) SEOインスペクター [無料] — 包括的オンページSEO監査：title、meta description、H1〜H6、OpenGraph、Twitter Card、canonical、robots、altテキスト、リンク解析。 28) アクセシビリティ インスペクター [有料] — 自動化WCAG 2.1 Level AA監査。コントラスト、altテキスト、ARIA、ランドマーク検出。ADA、EAA、Section 508用。 29) ネットワーク モニター [有料] — すべてのfetch、XHR、AJAXリクエストをmethod、status、headers、payload、response、timing付きでキャプチャ。 30) WebSocket インスペクター [有料] — すべてのWebSocketフレームをリアルタイムでキャプチャ。Socket.io、チャットアプリのデバッグ。 31) リンク切れチェッカー [有料] — ページ全体をスキャンして壊れたリンク（404、500、DNS、タイムアウト）を検出。 32) 画像エラー検出 [無料] — 読み込み失敗画像（404、src欠如、DNS、CORS）を検出、ハイライト。 33) CORSチェッカー [無料] — クロスオリジンリクエストをテストしCORSヘッダーを検査。「blocked by CORS policy」エラーを診断。 ═══ 🅰️ デザイン & タイポグラフィ ═══ 34) ライブテキスト エディター [無料] — 任意のテキストをクリックでその場編集。見出し、段落、ボタンラベル。サイトごと自動保存。 35) フォント変更 [有料] — 1,500以上のGoogle Fontsから書体置換 — グローバルまたは要素ごと。サイトごと自動保存。 36) 全フォント一覧 [無料] — ページの全フォント発見 — Webフォント、システムフォント、ウェイト、スタイル。CSS font-familyをワンクリックコピー。 37) カラーピッカー [無料] — ピクセル精密スポイト。テキスト、背景、画像、グラデーション、SVGからカラー取得。HEX、RGB、HSL出力。 38) カラーパレット [無料] — Webページから完全なカラーパレットを抽出。頻度順スウォッチとHEX値。 39) カラー形式変換 [無料] — 1つのパネルですべてのCSSフォーマットに任意の色を変換します(例:#FF5733を貼り付けると、rgb(255, 87, 51)、hsl(11, 100%, 60%)、hsv(11, 80%, 100%)、oklch(64% 0.21 32)としてリアルタイムに表示され、透明度のためのアルファ版あり)。 40) 画像カラー抽出 [無料] — 画像からドミナントカラーパレットを抽出。写真とヒーロー画像から配色生成。 ═══ ⚡ トグル & ページユーティリティ ═══ 41) 強制ダークモード [無料] — Webサイトに快適なダークテーマ適用。ナイトモード、目の疲労軽減。インテリジェント反転で画像保護。 42) JavaScript切替 [無料] — タブごとにJavaScriptをワンクリック有効化/無効化。SSR検証、検索クローラー視点確認。 43) クッキーエディター [無料] — 完全クッキー管理：表示、作成、編集、削除、インポート、エクスポート。認証フローのデバッグ。 44) コンソールロガー [無料] — console.log、warn、errorをページ上でインライン表示。モバイルデバッグに最適。 45) ローカルストレージ エディター [無料] — localStorageとsessionStorageの表示、編集、追加、削除。フィーチャーフラグ、A/Bテストのデバッグ。 46) ページパフォーマンス [無料] — タイミングメトリクス、リソース内訳、DOM統計、総合ヘルススコア。Lighthouseなしでクイック計測。 ═══ ⚙️ フォーマッター、コンバーター & ジェネレーター ═══ 47) JSONフォーマッター [無料] — JSONを整形、最小化、検証。構文エラー検出付き折りたたみツリー表示。 48) Base64 エンコーダー/デコーダー [無料] — テキストをBase64にエンコード/デコード。UTF-8とバイナリ対応。 49) URL エンコーダー/デコーダー [無料] — 特殊文字をパーセントエンコード/デコード。クエリ文字列修復。 50) HTMLエンティティ エンコーダー [無料] — HTML特殊文字（&、<、>、"、'）をエンティティに変換/デコード。 51) バックスラッシュ エスケープ [無料] — バックスラッシュシーケンス（\\n、\\t、\\"、\\\\）をエスケープ/アンエスケープ。 52) 画像 ↔ Base64 [無料] — 画像（PNG、JPG、GIF、SVG、WebP）をBase64データURLに変換、または逆変換。 53) JWT デバッガー [無料] — JSON Web Tokensのデコードと検査。header、payload、signatureを整形JSON表示。 54) UUID ジェネレーター [無料] — v4 UUID（RFC 4122）を1つずつまたは一括生成。 55) ハッシュ ジェネレーター [無料] — テキストからMD5、SHA-1、SHA-256、SHA-384、SHA-512ハッシュを生成。 56) パスワード ジェネレーター [無料] — カスタム長、文字セットで暗号学的に安全なパスワードを生成。 57) 正規表現テスター [無料] — ライブマッチハイライト、キャプチャグループ、フラグ対応（g、i、m、s、u、y）。チートシート内蔵。 58) タイムスタンプ変換 [無料] — Unixタイムスタンプ、ISO 8601、RFC 2822、人間可読日付をタイムゾーン対応で変換。 59) 差分ツール [無料] — 2つのテキストブロックを行単位で比較、追加、削除、編集を色分け表示。 60) コントラスト チェッカー (WCAG) [無料] — テキストとUIのWCAGコントラスト比をAA/AAA合否判定。ライブプレビュー。 61) CSV ↔ JSON [無料] — CSVとJSONを双方向変換。ヘッダー自動検出、カスタム区切り対応。 62) XMLフォーマッター [無料] — XMLを整形、最小化、検証。SOAP、RSS、サイトマップ。 63) SQLフォーマッター [無料] — SQLクエリ（common database dialects）を整形・インデント。 64) フォーム入力 [有料] — リアルなテストデータでフォーム自動入力 — 名前、メール、電話、住所、テスト用クレジットカード、Lorem Ipsum。 ═══ 🚀 無料 と 有料 ═══ ✅ 永久無料 — 43の必須ツール（カラーピッカー、スクリーンショット、JSONフォーマッター、SEOインスペクター、クッキーエディター、ページ定規、PDF変換など）。 ⭐ 有料 — 21の高度なツールをアンロック（Tailwindヘルパー、レスポンシブ ビューア、ネットワーク モニター、ヒートマップ シミュレーター、フォーム入力など）。 ═══ 🔒 プライバシー第一 ═══ DevSuite ProはChromeブラウザ内で安全に動作。テレメトリ、アナリティクス、サードパーティトラッキングSDK一切なし。ローカルコード、スクリーンショット、JSONファイル、APIトークン、クッキーはマシン外に出ません。 🚀 Web開発ワークフローを強化！DevSuite Proをインストール — 必要なデベロッパーツールキットはこれだけ。時間を節約できたら5つ星レビューでサポートを。