こんにちは、エンジニアの市村です。

Webエンジニアで、Chromeの開発者ツールのChrome DevToolsにお世話になったことのない人はいないと思います。

ただ、要素を調査したり、当たっているCSSを確認したり程度の利用している人も多いのではないでしょうか？
私もそのうちの１人なのですが、調べてみると以外と色々なことができるなと思ったので、備忘録的も兼ねて皆さんにご紹介したいと思います。

【注意】Chromeバージョンによっては機能が異なる場合があります。あらかじめご了承ください。

Chrome DevToolsは、Chromeブラウザ上で右クリックで「検証」を選択すると
されます。WinではF12またはCtl+Shift+Cでも表示できます。

「Doc Side」という項目で、表示位置を変えることができます。
ショートカットは、「Ctrl+Shift+D」です。

多くの機能があるChrome DevToolsから利用したいものをUI操作のみで見つけ出すのは難しかったりします。その時はコマンドメニューを利用することで、使いたい機能を見つけ出すことができます。

×ボタン横にある縦に●が三つのアイコンをクリックすると表示されるメニューのRun commandを選択するとコマンドメニューが表示されます。ショートカットはCtl+Shift+Pです。

資料を作成したりするときに、このサイトを丸々スクリーンショット取りたいなという場面はあるかと思います。拡張機能をわざわざ入れてスクショを取っている方もいるかと思いますが、実はコマンドメニューを利用することでページ全体のキャプチャをできちゃいます。

コマンドメニューで「capture」と入力すると、候補が出てくるので「Capture full size screenshot」を選択するとページ全体をスクリーンショットを取ることができます。

また、ページ全体のスクショ以外にも、要素のみ撮影する「Capture node screenshot」や画面の表示箇所のみ撮影する「Capture screenshot」、指定した範囲のみ撮影する「Capture area screenshot」があります。

Webサイトで何か動作を確認したい時に、この動作はフロントエンドとバックエンドどっちが動いているのかがわからないみたいな時があるかと思います。
そうした時に、コマンドメニューの「Disable JavaScript」を利用するとJSを無効化することができます。

ブラウザの設定からでも無効化は出来ますが、動作をみたりしたときに一時的に無効化した場合などはコマンドメニューの方が利用やすいのではないかと思います。

いかがだったでしょうか。今回はChrome DevToolsのコマンドメニューについて紹介させていただきました。他にもChrome DevToolsの機能を紹介していますので、よろしくお願いします。