目次
「検証ツールの文字、なんか小さくない…？」
Chromeの検証ツール（DevTools）を開いたら、パネル内の文字がやたら小さい。あるいは逆に巨大になっている。Elements、Console、Networkタブの中身が読みづらくて作業にならない。こんな経験、ありませんか？
原因はシンプルで、検証ツール内のズームレベルがずれているだけです。DevToolsにフォーカスした状態でCmd+やCmd-を押してしまうと、検証ツール自体のズームが変わります。トラックパッドのピンチ操作で意図せず変わることもあります。
解決方法は1秒で終わります。
Cmd+0（Ctrl+0）で一発リセット
検証ツールにフォーカスした状態で、以下のショートカットを押すだけです。
| OS | ショートカット |
|---|---|
| Mac | Cmd + 0 |
| Windows / Linux | Ctrl + 0 |
これで検証ツールのズームが100%（デフォルト）にリセットされます。
検証ツールのズーム操作まとめ
リセットだけでなく、意図的にズームを変えたい場面もあります。高解像度モニターで文字を大きくしたい時などに便利です。
| 操作 | Mac | Windows / Linux |
|---|---|---|
| 拡大 | Cmd + + |
Ctrl + + |
| 縮小 | Cmd + - |
Ctrl + - |
| リセット（100%に戻す） | Cmd + 0 |
Ctrl + 0 |
いずれも検証ツールのパネル内にフォーカスがある状態で押す必要があります。ページ本体にフォーカスがあると、ページ側のズームが変わってしまうので注意。
ページのズームと検証ツールのズームは別物
ここで意外と混乱するのが、ページ本体のズームと検証ツールのズームは独立して管理されているという点です。
- ページ本体のズーム：ページにフォーカスした状態で
Cmd+/Cmd-/Cmd+0。CSSのpx値やレスポンシブ表示に影響する - 検証ツールのズーム：DevToolsパネルにフォーカスした状態で
Cmd+/Cmd-/Cmd+0。パネル内のUIだけが変わり、ページには影響しない
「レスポンシブの確認をしてたらpxがずれる」という場合は、ページ側のズームが100%でないケースが多いです。アドレスバーに虫眼鏡アイコンが出ていたら、ページ側のズームが変わっています。同じくCmd+0でリセットできます。
Chrome DevToolsをもっと使いこなす関連記事
- コマンドラインの基本と活用方法【初心者エンジニア向け】 – DevToolsのConsoleタブでのコマンド操作にも通じるCLIの基本
- Claude Codeとは？AI搭載のコーディングアシスタントを徹底解説 – DevToolsで見つけたバグの原因特定をAIに相談する活用法
まとめ
- 検証ツールの文字サイズがおかしいのはズームレベルのずれが原因
Cmd+0（Ctrl+0）でDevToolsのズームを100%にリセットできる- 拡大は
Cmd++、縮小はCmd+- - ページのズームとDevToolsのズームは別。フォーカス位置で操作対象が変わる
知っていれば1秒で解決するのに、知らないと「設定どこだっけ…」と数分迷う。ショートカット系のTipsは、一度覚えてしまえば二度と困りません。Cmd+0、今日から使ってください。
