DevSuite Pro

究極の開発者ツールボックス拡張機能ウェブデザインと開発のための

39+の強力なツールで、ブラウザ内で直接ウェブページの検査、計測、キャプチャ、分析、デザインが可能です。

Chrome に追加 Firefox に追加 Edgeに追加

始め方

数クリックで DevSuite Pro を使い始めましょう

始め方はとても簡単です。拡張機能をインストールし、任意のウェブページを開いて、ポップアップまたはフローティングドックから39+の開発者ツールにアクセスできます。設定は不要です。

Chrome に拡張機能を追加

Chrome ウェブストアを開き、「DevSuite Pro」拡張機能を検索します。
「Chrome に追加」をクリックし、ポップアップウィンドウで「拡張機能を追加」をクリックして確認します。

任意のウェブページを開いてツールを起動

任意のウェブサイトに移動し、ツールバーのDevSuite Pro アイコンをクリックするか、ページ上のフローティングドックを使用します。
グリッドから任意のツールを選択します。CSS Inspector、ルーラー、カラーピッカーなどのツールは、現在のページで即座にアクティブになります。

拡張機能の特徴

DevSuite Pro の主な機能

DevSuite Pro は、ウェブページの検査、計測、デザイン、分析のための39+の開発者ツールを提供します。ブラウザに組み込まれた強力な機能でワークフローを向上させましょう。

CSS Inspector

任意の要素にカーソルを合わせると、その CSS スタイルを即座に表示・編集でき、リアルタイムでデザインのデバッグや調整が簡単に行えます。

詳細はこちら →

エレメントインスペクター

任意の要素をクリックして、そのプロパティ、寸法、余白、フォント、色を検査します。ブラウザのDevToolsを開かずにページ構造を即座に把握できます。

ルーラーとガイド

距離を測定し、整列を確認し、任意のウェブページにピクセル単位で正確なルーラーとガイドを追加して、デザインの完璧な配置を実現します。

カラーピッカー

ページ上の任意の要素から色を取得し、ワンクリックで HEX、RGB、HSL の値をクリップボードにコピーできます。

スクリーンショットキャプチャ

任意のウェブページのフルページまたは表示領域のスクリーンショットをキャプチャして即座にダウンロード。デザインの共有やバグ報告に最適です。

レスポンシブテスター

ブラウザを離れることなく、さまざまな画面サイズやデバイス解像度でウェブページをプレビューし、レスポンシブデザインをテストできます。

その他のツールの詳細を見る：

CSSインスペクター無料

CSS スタイルをリアルタイムで検査・編集

アニメーションインスペクタープロ

CSS animation をリアルタイムでデバッグ・制御する

Tailwindとしてコピープロ

あらゆる要素の CSS を Tailwind utility class に変換する

Outline Only モード無料

あらゆるページの完全なレイアウト構造を可視化する

Tailwindヘルパープロ

任意の要素のカテゴリー別 Tailwind クラスを取得する

ページアウトライナー無料

あらゆるウェブページにビジュアルHTML ツリービューをオーバーレイ表示

コンポーネントディテクタープロ

あらゆるサイトの React、Vue、Angular、Svelte コンポーネントを検出

要素を移動プロ

ページ上の任意の要素を drag & drop で再配置

要素の削除/非表示無料

任意の要素を削除または表示/非表示を切り替え

要素エクスポートプロ

任意の要素を HTML、CSS、JSON でエクスポート

コンポーネントコードのコピープロ

任意の要素から React、Vue、Svelte コンポーネントを生成

スクリーンショット無料

表示エリアまたはページ全体のスクリーンショットをキャプチャ

画像の抽出無料

任意のウェブページからすべての画像を表示・選択・ダウンロード

SVG グラバープロ

あらゆるページのすべての SVG を検索・プレビュー・ダウンロード

画像置換プロ

ページ上の任意の画像を自分の画像と入れ替える

QR Code ジェネレーター無料

任意の URL やテキストの QR Code を瞬時に生成

ページルーラー無料

あらゆるページにピクセル精度のルーラー、guide lines、計測機能を

レスポンシブビューアープロ

複数デバイスの viewport を同時にプレビュー

距離測定無料

任意の2要素間の正確な pixel 距離を計測

Z-Index インスペクタープロ

すべての stacking context と z-index レイヤーを可視化

Grid/Flexビジュアライザープロ

CSS Grid と Flexbox のレイアウトをビジュアルオーバーレイで検査

Heatmap シミュレータープロ

あらゆるページでユーザーの注目スポットをシミュレート

閲覧データの消去無料

キャッシュ・Cookie・localStorage・sessionStorage を選択して消去

サイトスタックプロ

あらゆるウェブサイトの技術スタックを検出

SEOインスペクター無料

包括的な SEO 監査：meta タグ、見出し、OpenGraph など

アクセシビリティインスペクタープロ

WCAG自動監査：コントラスト、alt text、ARIA など

ライブテキストエディター無料

任意のページの任意のテキストをクリックして即座に編集

フォント変更プロ

Google Fonts からページ全体または要素ごとにフォントを切り替え

全フォント一覧無料

あらゆるウェブページで使われているすべてのフォントを発見

カラーピッカー無料

HEX・RGB・HSL カラー値を正確に取得するeyedropperツール

カラーパレット無料

Webページで使われているカラーパレット全体を抽出

ダークモード強制無料

あらゆるウェブサイトに dark mode を瞬時に適用

JavaScript切り替え無料

タブごとに JavaScript を即座に有効・無効化

クッキーエディター無料

任意のドメインのcookieを表示・編集・追加・削除

コンソールロガー無料

DevToolsなしでコンソール出力をフローティングパネルに表示

ネットワークモニタープロ

すべてのネットワークリクエストをリアルタイムで監視

ローカルストレージエディター無料

localStorage と sessionStorage の閲覧・編集・追加・削除

壊れたリンクチェッカープロ

ページ上のすべてのリンクをスキャンして壊れたものを見つける

ページパフォーマンス無料

即時パフォーマンスダッシュボード：ロード時間、DOM 統計、リソース

JSONフォーマッター無料

ワンクリックでJSONの整形・圧縮・バリデーション

Base64エンコード / デコード無料

文字列とBase64を瞬時に相互変換

URLエンコード / デコード無料

ワンクリックでURL文字列をエンコード・デコード

HTMLエンティティエンコーダー無料

HTMLエンティティを瞬時にエンコード・デコード

バックスラッシュエスケープ / アンエスケープ無料

コード用の文字列をエスケープ・アンエスケープ

画像 ↔ Base64変換無料

画像とBase64データURIを相互変換

JWTデバッガー無料

JSON Web Tokenを瞬時にデコード

UUIDジェネレーター無料

UUID v4識別子を一括生成

ハッシュジェネレーター無料

MD5, SHA-1, SHA-256, SHA-384, SHA-512ハッシュを計算

パスワードジェネレーター無料

暗号学的に強力なパスワードを生成

正規表現テスター無料

マッチハイライト機能付きのリアルタイム正規表現テスト

タイムスタンプコンバーター無料

Unix、ISO、および人間が読める形式の変換

Diff ツール無料

2つのテキストブロックを行単位で比較

コントラストチェッカー無料

2つの色の WCAG コントラスト比を確認

カラー形式コンバーター無料

HEX、RGB、HSL、HSV、OKLCH を瞬時に変換

画像カラー抽出無料

あらゆる画像から主要なパレットを抽出

DOM パスファインダープロ

あらゆる要素の CSS セレクターと XPath を取得

CORS チェッカー無料

オリジン間要求のテストと CORS ヘッダーの検査

WebSocket インスペクタープロ

WebSocket フレームをリアルタイムでキャプチャ

リンク切れ画像ファインダー無料

ページ内のリンク切れ画像を瞬時にスキャン

フォームフィラープロ

現実的なテストデータでフォームを自動入力

CSV ↔ JSON コンバーター無料

CSV と JSON を双方向に相互変換

XML フォーマッター無料

構文ハイライト付きで XML を整形・検証・閲覧

SQL フォーマッター無料

SQL クエリを綺麗に整形

PDF に変換無料

ウェブページをクリーンな PDF として保存

料金とプラン

シンプルで透明性の高い料金体系

ワークフローに合ったプランをお選びください。無料で始めて、いつでもアップグレードできます。

基本

DevSuite Pro を試すのに最適です。クレジットカードは不要です。

$0

永久無料

無料で始める

20個の無料開発者ツール
CSS Inspector & カラーピッカー
スクリーンショットキャプチャ
フローティングドックインターフェース
今後のすべての無料アップデート

月額一番人気

39以上のすべてのプロフェッショナルツールへのフルアクセス。月次請求。

$2.99

月額

月額プランを開始

すべての39+開発者ツール
Proツールへのフルアクセス
最大3台のデバイス
優先サポート
いつでもキャンセル可能

買い切りお得なプラン

一度購入して永久に使用できます。定期的な料金なしで39以上のプロツール全てにフルアクセス。

$29.99

一回払い

一度購入して永久に使用

すべての39+開発者ツール
Proツールへのフルアクセス
最大3台のデバイス
優先サポート
定期料金なし

DevSuite Pro FAQ section background

よくある質問

DevSuite Pro ユーザーからのよくある質問

DevSuite Pro 拡張機能の機能と使い方に関するよくある質問です。ご質問がある場合は、以下に回答が見つかるかもしれません。

DevSuite Pro をインストールするにはどうすればよいですか？

Chrome ウェブストアにアクセスし、「DevSuite Pro」を検索して「Chrome に追加」をクリックし、「拡張機能を追加」を選択して確認します。インストールすると、ブラウザのツールバーに拡張機能のアイコンが表示されます。クリックして39+の開発者ツールに即座にアクセスできます。

無料ツールと Pro ツールの違いは何ですか？

無料ツール（20+）はライセンス不要でどなたでもご利用いただけます。Pro ツールはゴールドの PRO バッジが付いており、有効な Pro ライセンスが必要です。ポップアップから、どのツールが無料か Pro かを確認できます。無料ツールには鍵のアイコンがありませんが、Pro ツールはライセンスをアクティゲートするまで少し暗く表示されます。

一部のウェブサイトでツールが動作しないのはなぜですか？

一部のウェブサイトには、ブラウザ拡張機能の特定の操作をブロックする厳格なコンテンツセキュリティポリシー（CSP）があります。これは銀行や政府のサイトで特によく見られます。また、Chrome の内部ページ（chrome://）では拡張機能の実行が許可されていません。

ページへの変更は永続的ですか？

いいえ。要素の移動、ライブテキストエディター、要素の削除/非表示、CSS Inspector などのツールによる変更はすべて一時的です。それらは現在ブラウザで見ているものにのみ影響します。ページをリロードするとすべて元に戻ります。

Pro ライセンスをアクティベートするにはどうすればよいですか？

DevSuite Pro のポップアップを開き、右上隅の設定アイコンをクリックします。ライセンスセクションまでスクロールし、ライセンスキーを貼り付けて「アクティベート」をクリックします。キーが有効な場合、バッジが FREE から PRO に変わり、すべての Pro ツールが即座にアンロックされます。

フローティングドックを移動または非表示にするにはどうすればよいですか？

設定に移動し、別のサイドバー位置（上、下、左、右）を選択することでドックを移動できます。また、設定で「ページにドックを表示」をオフにするか、Ctrl+Shift+X を押してドックを非表示にすることもできます。

DevSuite Pro は閲覧データを収集しますか？

いいえ。DevSuite Pro は閲覧データの収集、追跡、送信を行いません。すべての設定はブラウザ内にローカルに保存されます。唯一の外部リクエストは、ライセンスキーの検証用のみです。

DevSuite Pro は Firefox で使用できますか？

はい！DevSuite Pro は Chrome ウェブストアと Firefox アドオンの両方で利用可能です。Chrome、Edge、Brave などの Chromium ベースのブラウザだけでなく、Firefox でも動作します。