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

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

CSS Inspector は、マウスを合わせるだけで任意の要素の完全な CSS…

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

Animation Inspector は、あらゆる Web ページで動作している CSS animation と transition を完全にコントロールできるツールです。すべての animation…

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

Copy as Tailwind はビジュアルデザインと Tailwind CSS コードの橋渡しをします。Web ページ上の任意の要素をクリックするだけで、計算済みの CSS スタイルから生成された同等の Tailwind…

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

Outline Only モードは、ウェブページ上のすべての HTML 要素にカラーコードの border outline を追加し、ページのレイアウト構造を瞬時に透視できるようにします。すべての…

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

Tailwind Helper は、ウェブページ上の任意の要素を検査し、対応する Tailwind CSS…

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

ページアウトライナーは、あらゆるウェブページの完全な DOM 構造をビジュアルツリーとしてページ上にオーバーレイ表示します。すべての HTML…

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

コンポーネントディテクターは、ウェブサイトが使用しているフロントエンドフレームワークを自動的に識別し、完全なコンポーネントツリーを表示します。React、Vue、Angular、Svelte のコンポーネント名、props/state…

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

「要素を移動」を使えば、Webページ上の任意の要素をクリックして物理的に新しい位置へ drag…

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

「要素の削除/非表示」を使えば、Webページ上の任意の要素をワンクリックで削除したり一時的に非表示にしたりできます。スクリーンショット用にページをクリーンアップしたり、邪魔な広告やクッキーバナーを削除したり、特定のセクションがない場合のレイ…

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

要素エクスポートは、ウェブページ上の任意の要素をクリックして、3つの形式で完全な構造をエクスポートできます。すべての子要素と属性を含む生の HTML マークアップ、クリーンなスタイルシートとして computed CSS…

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

コンポーネントコードのコピーは、ウェブページ上の任意の要素を、選択したフレームワーク用のクリーンなプロダクション対応コンポーネントファイルに変換します。要素をクリックするだけで、HTML…

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

スクリーンショットツールは、2 つのモードで任意のウェブページを高品質な画像として保存します。表示エリアモード（ブラウザウィンドウに表示されている内容をそのまま）と、フルページモード（折り返し以下のコンテンツを含む、ページ全体を上から下まで…

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

画像の抽出は任意のウェブページをスキャンし、すべての画像をブラウズ可能なギャラリーとして表示します。すべての画像のサムネイル、元のサイズ、ファイルサイズ、ソース URL…

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

SVG グラバーは、ウェブページ上のすべての SVG を検出します — インライン SVG 要素、外部 .svg ファイル参照、SVG スプライト（use/symbol パターン）、SVG data URI。各 SVG…

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

画像置換を使うと、ウェブページ上の任意の画像をクリックして自分の画像に置き換えられます — ローカルファイルのアップロードまたは画像 URL…

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

QR Code ジェネレーターは、現在のページの URL から自動的にスキャン可能な QR Code を生成します。任意のカスタム URL やテキストを入力することも可能です。出力サイズを選択してリアルタイムでプレビューし、高解像度の…

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

Page Ruler は Photoshop スタイルのルーラーとドラッグ可能な guide lines を任意のウェブページに追加します。ピクセル精度のルーラーが viewport の上端と左端に沿って表示され、guide lines…

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

Responsive Viewer は現在のウェブページを複数のデバイス viewport サイズで並べて表示します — すべて1画面に。iPhone、iPad、Android…

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

Measure Distance を使うと、ウェブページ上の任意の2つの要素をクリックするだけで、水平（X）、垂直（Y）、対角線方向の正確な pixel…

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

Z-Index インスペクターは、ウェブページ上のすべての要素の完全な重なり順を明らかにします。z-index 値を持つすべての要素はページ上で直接ハイライト表示・ラベル付けされ、ソートされたレイヤーマップパネルがすべての z-index…

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

Grid/Flex ビジュアライザーはウェブページ上のすべての CSS Grid および Flexbox コンテナを検出し、そのレイアウト構造をカラフルなオーバーレイとしてページ上に直接レンダリングします。DevTools…

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

Heatmap シミュレーターは、確立された UX リサーチのパターン（F-pattern の読み取り行動、視覚的階層の原則、インタラクティブ要素の重み付け）に基づいて、任意のウェブページの予測注目 heatmap…

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

閲覧データの消去は、ブラウザ設定を開くことなく、現在のサイトのキャッシュ・Cookie・localStorage・sessionStorage…

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

サイトスタックはウェブサイトをスキャンし、使用している技術スタックを丸ごと特定します。フロントエンドフレームワーク（React、Vue、Angular、Svelte）、メタフレームワーク（Next.js、Nuxt、SvelteKit）、CM…

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

SEO Inspectorは任意のウェブページに対して即座かつ包括的な SEO 監査を実施します。meta タグ（title、description、robots、canonical…

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

アクセシビリティインスペクターは、任意のWebページに対してWCAG 2.1 Level AAの自動チェックを実行し、アクセシビリティの問題を分類したレポートを生成します。不十分なcolor contrast…

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

ライブテキストエディターは、Webページ上のすべてのテキスト要素をワンクリックで編集可能にします。見出し、段落、ボタンラベル、ナビゲーション項目、またはその他のテキストコンテンツをライブページ上で直接変更できます。編集されたテキストはリアル…

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

フォント変更ツールを使うと、ウェブページ上の任意のフォントを Google Fonts…

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

全フォント一覧は任意のウェブページをスキャンし、使用されているすべてのフォントファミリーの完全なインベントリを表示します。CDN…

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

カラーピッカーは、Webページ上のあらゆる要素（テキスト、背景、画像、gradientなど、あらゆる表示pixelを含む）から色を取得できるpixel精度のeyedropperツールです。HEX・RGB・HSLの3形式でカラー値を同時に取得…

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

カラーパレットはWebページのすべての要素をスキャンし、テキストや背景からボーダー、シャドウ、アクセントカラーまで、使用されているすべての色を抽出します。色は使用頻度（最多使用順）でソートされたビジュアルswatchとして表示され、それぞれ…

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

Force Dark Mode は、dark mode を提供していないウェブサイトに dark color scheme…

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

Toggle JavaScript は、現在のブラウザタブの JavaScript 実行をワンクリックで無効化または再有効化します。結果を確認するためにページが自動的にリロードされます。JavaScript なしでのページの動作を確認…

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

Cookie Editorは、現在のドメインのすべてのcookieを、整理されたソート可能なテーブルに表示します。cookie名・値・有効期限・パス・セキュリティフラグ（HttpOnly、Secure、SameSite）を確認できます。値を…

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

Console Loggerはすべてのコンソール出力（console.log、console.warn、console.error、console.info）をキャプチャし、ページ上のフローティングパネルに直接表示します。ブラウザのDevT…

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

ネットワークモニターは、現在のページが行うすべてのネットワークリクエストをキャプチャして表示します。XHR/Fetch API…

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

ローカルストレージエディターは、現在のサイトの localStorage と sessionStorage…

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

壊れたリンクチェッカーは、現在のページ上のすべてのリンク（アンカーの…

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

ページパフォーマンスは、任意のウェブページのパフォーマンス概要を即時に提供します。ロードタイミング指標（FCP、DOMContentLoaded、完全ロード、TTI）、DOM…

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

JSONフォーマッターは、ブラウザ上で直接JSONを整形、圧縮、バリデーションします。任意のJSON文字列を貼り付けるだけで、構文ハイライト付きの読みやすいインデント出力が得られるほか、1行のコンパクトな文字列に圧縮することも可能です。リア…

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

Base64エンコーダー/デコーダーは、ブラウザ上でテキストをBase64に、あるいはBase64をテキストに直接変換します。Unicodeセーフなエンコーディングにより、絵文字や非ラテン文字、特殊文字も正しく処理されます。ワンクリックコ�…

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

URLエンコーダー/デコーダーは、URL文字列をパーセントエンコーディング形式と相互変換します。クエリパラメータのデバッグ、安全なURLの構築、エンコードされたリンクの検査など、用途に合わせて「encodeURIComponent」（厳格）…

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

HTMLエンティティエンコーダーは、特殊文字（< > & " '）を対応するHTMLエンティティ（&lt; &gt; &amp; &quot…

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

バックスラッシュエスケープ/アンエスケープは、文字列をエスケープ形式（\n \t \r \" \' \\…

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

画像 ↔ Base64変換ツールは、画像ファイル（PNG、JPG、SVG、WebP、GIF）をBase64エンコードされたデータURIに、またその逆に変換します。画像をドラッグ、貼り付け、またはクリックして読み込み、フルデータURI（dat…

JSON Web Tokenを瞬時にデコード

JWTデバッガーは、JSON Web Token（JWT）をデコードして検査します。ヘッダー、ペイロード、署名をパースし、クレームの表示や有効期限のチェックが可能です。認証トラブルのデバッグ、OAuth/OIDCトークンの検査、外部ツールを…

UUID v4識別子を一括生成

UUIDジェネレーターは、ブラウザのCrypto APIを使用して、暗号学的に強力なUUID…

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

ハッシュジェネレーターは、任意のテキスト入力から暗号学的ハッシュ（MD5, SHA-1, SHA-256, SHA-384…

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

パスワードジェネレーターは、ブラウザの暗号学的乱数APIを使用して、強力でランダムなパスワードを生成します。長さ（8〜128文字）の設定、大文字・小文字・数字・記号の有無、見間違いやすい文字の除外などをカスタマイズできます。エントロピーがリ…

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

正規表現テスターは、テストテキストに対して正規表現をリアルタイムで評価します。マッチした箇所は交互に色分けしてハイライトされ、キャプチャグループや名前付きグループもマッチごとに詳細表示されます。すべての標準フラグ（g、i、m、s、u、y）を…

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

タイムスタンプコンバーターは、Unix タイムスタンプ（秒、ミリ秒、マイクロ秒、ナノ秒）、ISO 8601、RFC…

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

Diff ツールは、2つのテキストブロックを比較し、追加、削除、変更のない行を色分けしてハイライト表示します。統合（Git…

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

コントラストチェッカーは、2つの色間の WCAG 2.1 コントラスト比を計算し、通常テキストと大きなテキストの両方について AA/AAA…

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

カラー形式コンバーターは、HEX、RGB、HSL、HSV、OKLCH の各形式間で色を変換します。ピッカーでの選択、HEX 値の入力、CSS カラー文字列の貼り付け、または RGB…

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

画像カラー抽出は、あらゆる画像ファイル（ドロップ、貼り付け、またはクリックで読み込み）を分析し、最大16色の主要な色をその割合と共に返します。ブラウザ内でのピクセルサンプリングとバケット量子化を使用しており、アップロードやサーバーとの通信は…

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

DOM パスファインダーを使えば、ページ上の任意の要素にカーソルを合わせるだけで、一意な CSS セレクター、短いセレクター、XPath、およびそのまま貼り付け可能な querySelector…

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

CORS チェッカーは、自身のサイトからのオリジン間要求（クロスオリジン要求）がターゲットサーバーによって許可されるかどうかをテストします。プリフライト (OPTIONS) 要求と実際の要求を実行し、許可 (ALLOWED)…

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

WebSocket インスペクターは、ページ上のすべての接続において、送受信されるあらゆる WebSocket…

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

リンク切れ画像ファインダーは、ページ上のすべての `<img>` と CSS の `background-image` をスキャンし、読み込みエラー（404、CORS…

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

フォームフィラーは、ページ上のすべての表示されているフォームフィールドに、名前、メールアドレス、電話番号、住所、パスワードなどの現実的なテストデータを入力します。フィールドのタイプ、名前、ID、自動補完（autocomplete）、プレース…

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

CSV ↔ JSON コンバーターは、表形式データの代表的な2つの形式間で完全な相互変換を可能にします。スマートな CSV…

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

XML フォーマッターは、ブラウザ内で XML の整形（プリティプリント）、縮小化（ミニファイ）、および検証を行います。インデント幅の設定、空タグの自己終了フォームへの変換、コメント保持の切り替え、構文ハイライト表示などの機能を備えています…

SQL クエリを綺麗に整形

SQL フォーマッターは、1 行にまとめられたり乱雑になったりした SQL を、読みやすくインデントされたクエリに変換します。SELECT, FROM, WHERE, JOIN, ON, AND, OR…

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

PDF に変換機能は、ブラウザの印刷ダイアログを介して現在のウェブページを PDF…