ワンコンテンツ

web制作とかiPhoneのこととか書いていきます

Mac Web/Design/Creative

GoogleChromeデベロッパーツールをファンクションキーで開く設定:Mac

投稿日:

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

サイトの制作や修整の際にいまやデベロッパーツールを使わない人はもういないと思います。サイトのチェックだけでなく、レスポンシブチェック、サイトのデータサイズチェック、JSの動作チェック、オーバーライド機能など多数の機能が含まれています。

ただなぜかMacの場合にはキーボードショートから起動方法が初期設定になっていて、起動する手間が多いのです。

WindowsならF12キーで起動するのですが、Macはなぜかコマンド+Shift+I(アイ)

問題なのは、Macではキーを3つ押さなければいけないことと、片手では押せない配置なので、起動させるたびにマウスから手を離さなければいけないという無駄な動きが起きてきます。

これが少しづつですがストレスに感じてきたので、Windowsのようにシステム環境設定を使ってファンクションキーで起動できるよう設定してみました。

スポンサーリンク

広告

システム環境設定から変更する

Chrome側では設定変更の箇所が見つからなかったので、システム環境設定のショートカットに設定を追加します。

環境設定変更を開いてキーボードを選ぶ

GoogleChrome側で設定変更できるかと思ったのですが、特に設定項目が見当たらなかったのでMacのシステム環境設定からGoogleChromeのショートカット設定を変更してみたいと思います。

まずはシステム環境設定を起動してキーボードのアイコンをクリックします。

スクリーンショット システム環境設定

ショートカットを選ぶ

システム環境設定のショートカットはMacのショートカットを設定変更するきのうがありますが、アプリケーションごとにショートカットを割り当てることもできます。

ショートカットを選びます。

スクリーンショット キーボード

左メニューのアプリケーションを選択してプラスボタンをクリック。

スクリーンショット ショートカット2

メニューが表示されるので「アプリケーション」のプルダウンから「GoogleChrome」を選択。

スクリーンショット ショートカット3

スポンサーリンク

広告

文字列の入力の注意事項

メニュータイトルの部分が少しわかりにくいので補足します。メニュータイトルの部分にはアプリケーションのメニュー項目で表示されている上書きしたい機能の表示文字列と同じものを入力します。、1文字でも異なると反応しないので、スペースなどの空白にも注意が必要です。

今回はデベロッパーツールを新しいショートカットで上書きしたいのでGoogleChromeのメニュー項目から文字列を確認。

メニューをよく見るとデベロッパーとツールの間にわずかに隙間が存在することがわかります。半角スペースが入っていました。

なので「メニュータイトル」欄には「デベロッパー ツール」と入力します。

キーボードショートカットの欄を選択した状態で新しく設定したいキーを押します。ファンクションキーだけでもOKですし、複数キー同時押しのショートカットも設定できます

今回は「F12」キーにしてみましたので、キーボードの「F12」キーを押しました。

「追加」を押すと完了します。

以上で設定の変更は完了となりますので、実際起動するかキーボードを押してみてください。

今回はF12で起動・非表示を制御できましたので成功です。

設定完了するとメニューも表示が変わります。

システム環境設定でショートカットー上書きするとアプリケーションのメニュー側も設定された新しいショートカットが表示されます。

スクリーンショット googleshrome設定画面2

フォントの大きさと位置が変なのは謎ですが。。。。

スポンサーリンク

広告

管理人のボヤキ

同じ理由で「ソースを表示」もファンクションキーに設定しました。これでもっと効率的にサイトの表示チェックができるようになりました。

ほかのアプリケーションやメニュー項目のキーボードショートカットを設定してみましょう。

created by Rinker
Apple(アップル)
¥15,246 (2019/04/22 16:03:33時点 Amazon調べ-詳細)

広告

広告

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

-Mac, Web/Design/Creative
-, , , ,

執筆者:

関連記事

オーバーライド機能を使ってCSSを調整しながら即保存する方法:GoogleChrome

ChromeのOverride(オーバーライド)機能を使い、サイトのCSSを調整する上で便利な使い方を紹介します。この方法を使えば、今までDeveloperToolを使って仮想的に調整していたCSSををもっと便利に編集・更新できる様になりました。

知っておくと3倍作業が早くなるエクセルHTMLコーディング術

  エクセルでHTMLコーディングって聞いて、普通はありえない組み合わせだと思ったでしょ? HTMLコーディングをする際にテキストエディタやDreamweaverなどのオーサリングツールを使 …

Macで役立つコピペの技

ページ内容の目次1 切り取り貼り付け2 複数ファイルのファイル名貼り付け3 番外編 Clipy クリップボード拡張アプリ4 まとめ 切り取り貼り付け ⌘+alt+V(ブイ) Windowsなら、コント …

2018

2018年で最もアクセスされた記事まとめ

2018年も繰り返すところあと数日になりました。 今年の個人的な思い出としては第二種電気工事士の資格に挑戦して9月に無事取得できたことは大きな出来事だったと思います。おかげで受験勉強の期間中はブログの …

command + Q message

Chromeで「終了するには⌘Qキーを押します」と表示された時の対応方法:Mac

GoogleChrome v70にアップデートした頃からだと思うが、ショートカットキーで終了しようとしたら終了せず、「終了するにはCommand+Qを押します。」とメッセージが出るようになった。 Go …

検索

サイドAD02

AD