Chrome / Brave デベロッパーツールの文字サイズ変更：拡大・縮小・リセット方法

概要

ChromeやBraveのデベロッパーツールを使っていて、「文字が小さすぎて見えない！」あるいは「意図せず表示が崩れてしまった！」と困った経験はありませんか？

これは、Webページの表示画面とデベロッパーツールで、文字サイズを変更するショートカットキーが少し違うために起こる現象です。両ブラウザで共通の仕組みとショートカットキーを覚えて、快適に開発を進めましょう！

ショートカットキー一覧 (Chrome/Brave共通)

ショートカットキーはChromeとBraveで共通です。Webページの表示画面とデベロッパーツールでは、拡大のキーだけが異なります。

注目すべきは、デベロッパーツールの拡大です。+（プラス）ではなく、キーボード右上にある ^（キャレット）や ~（チルダ）が刻印されたキーを使います。また、shiftキーは不要です。これが混乱しやすい一番のポイントです。

重要な基本ルール：操作対象は最後に触ったエリア

最も大切な共通ルールを理解しましょう。ChromeやBraveの画面は大きく分けて「① Webページ表示エリア」と「② デベロッパーツールエリア」の2つがあります。

文字サイズ変更のショートカットは、最後にクリックしてアクティブにした方のエリアに適用されます。

graph TD;
    A[ショートカットキー入力] --> B{"最後にクリックしたのは？"};
    B --> C["① Webページ表示エリア"];
    B --> D["② デベロッパーツールエリア"];
    C --> E[Webページの文字サイズが変わる];
    D --> F[デベロッパーツールの文字サイズが変わる];

よくあるトラブルと解決策

「Webページを小さくしようとしたら、デベロッパーツールの方だけがどんどん小さくなってUIが崩れてしまった…」というのは、非常によくあるトラブルです。

これは、デベロッパーツール側がアクティブになっていることに気づかず、縮小コマンド（command + -）を連打してしまった場合に起こります。

でも、ご安心ください。ブラウザを再インストールする必要はありません。こんな時こそリセットのショートカットが役立ちます。

graph TD;
    subgraph "トラブル発生"
        A[デベロッパーツールのUIが崩れた！😱] --> B["原因: デベロッパーツールが<br>アクティブなまま縮小操作をした"];
    end

    subgraph "解決フロー"
        B --> C["<b>解決策: command + 0 を押す</b>"];
        C --> D[表示サイズが元通りにリセットされる✨];
    end

表示が崩れて焦ってしまったら、まずは落ち着いて command + 0 を押してみてください。一瞬で最初の見やすい状態に戻ります。