サイトの制作や修整の際にいまやデベロッパーツールを使わない人はもういないと思います。サイトのチェックだけでなく、レスポンシブチェック、サイトのデータサイズチェック、JSの動作チェック、オーバーライド機能など多数の機能が含まれています。
ただなぜかMacの場合にはキーボードショートから起動方法が初期設定になっていて、起動する手間が多いのです。
WindowsならF12キーで起動するのですが、Macはなぜかコマンド＋Shift＋I（アイ）。
問題なのは、Macではキーを３つ押さなければいけないことと、片手では押せない配置なので、起動させるたびにマウスから手を離さなければいけないという無駄な動きが起きてきます。
これが少しづつですがストレスに感じてきたので､Windowsのようにシステム環境設定を使ってファンクションキーで起動できるよう設定してみました。
システム環境設定から変更する
Chrome側では設定変更の箇所が見つからなかったので、システム環境設定のショートカットに設定を追加します。
環境設定変更を開いてキーボードを選ぶ
GoogleChrome側で設定変更できるかと思ったのですが、特に設定項目が見当たらなかったのでMacのシステム環境設定からGoogleChromeのショートカット設定を変更してみたいと思います。
まずはシステム環境設定を起動してキーボードのアイコンをクリックします。
ショートカットを選ぶ
システム環境設定のショートカットはMacのショートカットを設定変更するきのうがありますが、アプリケーションごとにショートカットを割り当てることもできます。
ショートカットを選びます。
左メニューのアプリケーションを選択してプラスボタンをクリック。
メニューが表示されるので「アプリケーション」のプルダウンから「GoogleChrome」を選択。
文字列の入力の注意事項
メニュータイトルの部分が少しわかりにくいので補足します。メニュータイトルの部分にはアプリケーションのメニュー項目で表示されている上書きしたい機能の表示文字列と同じものを入力します。、1文字でも異なると反応しないので、スペースなどの空白にも注意が必要です。
今回はデベロッパーツールを新しいショートカットで上書きしたいのでGoogleChromeのメニュー項目から文字列を確認。
メニューをよく見るとデベロッパーとツールの間にわずかに隙間が存在することがわかります。半角スペースが入っていました。
なので「メニュータイトル」欄には「デベロッパー ツール」と入力します。
キーボードショートカットの欄を選択した状態で新しく設定したいキーを押します。ファンクションキーだけでもOKですし、複数キー同時押しのショートカットも設定できます。
今回は「F12」キーにしてみましたので、キーボードの「F12」キーを押しました。
「追加」を押すと完了します。
以上で設定の変更は完了となりますので、実際起動するかキーボードを押してみてください。
今回はF12で起動・非表示を制御できましたので成功です。
設定完了するとメニューも表示が変わります。
システム環境設定でショートカットー上書きするとアプリケーションのメニュー側も設定された新しいショートカットが表示されます。
フォントの大きさと位置が変なのは謎ですが。。。。
管理人のボヤキ
同じ理由で「ソースを表示」もファンクションキーに設定しました。これでもっと効率的にサイトの表示チェックができるようになりました。
ほかのアプリケーションやメニュー項目のキーボードショートカットを設定してみましょう。
コメント