MacでChrome DevToolsを拡大表示するためのショートカット

こんにちは。
この度、「ツキアカリ」に加入することになりました、Webプログラマーのたなともです。
どうぞよろしくお願いいたします。

普段はプログラミングのお仕事がメインですが、講師として、JavaScriptやPHPのセミナーや授業を行ったりもしています。

Chrome DevTools(デベロッパーツール)を拡大表示する方法

JavaScriptについての授業を行うとき、いつも困っていたことがありました。
それは「Macで、Chrome DevTools(デベロッパーツール)を拡大表示する方法が見つからない」という問題です。

developers.google.comでは、ズームインのためのショートカットが紹介されているのですが、日本語キーボードだからなのか、うまく動作しないようです。

developers.google.comで紹介されているキーボードリファレンス

キーボードリファレンスの通り操作しても、動作しません。

今回は、これを解決する方法を2つ見つけましたので、紹介したいと思います。

ショートカットキー「Command + ^」

最初の方法は、Stack Overflow の下記の回答で紹介されていた方法です(本当にありがたい!)

https://stackoverflow.com/a/17160119

ついでに、拡大だけでなく、縮小やリセットもまとめて紹介しておきますね。

拡大

(Chrome デベロッパーツールにフォーカスが当たっている状態で)
Command + ^

「^」は、ひらがな「ほ」キーの右隣ですね。

縮小

(Chrome デベロッパーツールにフォーカスが当たっている状態で)
ショートカットキー「Command +

「-」はマイナス記号で、ひらがな「ほ」キーです。

元のサイズにもどす

(Chrome デベロッパーツールにフォーカスが当たっている状態で)
ショートカットキー「Command + 0
0は、オーではなく、数字のゼロです。

しつこく「Chrome デベロッパーツールにフォーカスが当たっている状態で」を連呼しているのは、うっかり忘れてしまうためです(汗)

フォーカスが当たっている状態を作るには、DevToolsのパネル内のどこかを、一回クリックして、DevToolsがキーボードの操作対象となるようにします。

マニュアル通りに操作すると、どうなるのか

冒頭でもお伝えした通り、developers.google.comではズームインするための方法が紹介されています。

(Chrome デベロッパーツールにフォーカスが当たっている状態で)
Command+Shift++

最後にプラス記号が二つ連続してるのが混乱しそうですが、「Command」 と 「Shift」を同時に押しながら 「プラス記号(ひらがな「れ」のキー)」を押すということです。

さて、これを実際に試してみると、どうにも、うまくいかないのではないでしょうか?

Chrome DevTools(デベロッパーツール)が拡大されずに、普通のブラウザウィンドウ(Webコンテンツが表示されている場所)の方が拡大されませんか?

しかし、一方で、Chrome DevTools(デベロッパーツール)が拡大されたという方もいらっしゃるかと思います。

うまく動作した方は、Chrome DevTools (デベロッパーツール)ウィンドウを、切り離して使っていませんか?

DevToolsを別ウィンドウで表示する

そうなんです、実はこれが、もう一つの方法なのです。

DevToolsを別ウィンドウとして切り離して使っているときには、ショートカットキー「Command+Shift++」は、マニュアルの通り、DevToolsに対して拡大操作を行ってくれます。

一方、通常のブラウザウィンドウとドッキングしているときには、このショートカットキーは、Chrome DevTools(デベロッパーツール)ではなく、Webコンテンツ側の拡大縮小に使われてしまいます。

まとめ

今回紹介した方法を使うと、以下の画像のようにコンソールの文字サイズなどDevToolsをズームイン表示できます。

(ブログのタイトルと同じくらい大きなコンソールのフォントサイズにご注目ください。)

プログラミング作業を行っているときには、DevToolsの通常の小さな文字サイズは、一度にたくさんの情報を見れて作業効率がよいです。

しかし、講座を行うときには、この文字サイズだと受講者の方にとっては見えづらく、 ご不便をおかけしてしまいます。

今までOSのズームイン機能を使っていたのですが、みょんみょん拡大したり縮小したりするのは、やっぱりちょっと酔うというか、あまり受講生の皆様にとっては良い体験にはなりませんでした。

今後も色々と工夫しながら、より良い講座ができる方法を探していきます。

ではでは、たなともでございました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする