Windowsを使っている人も、Macintoshを使っている人も。パソコンを使うときも、タブレットを使うときも、スマホを使うときも。
アカウントを同期してくれるから、とっても便利！そんな理由からGoogle Chromeを使っている人、けっこう多いんじゃないですか？
でも、パソコンでChromeを使っている時に、マウスの右クリックで出てくる「検証」モード。
この使い方って、意外と知らない方、多くないですか？そんなあなたに朗報です！
今回は知って得するGoogle Chromeの検証(Developer Tools)について少しだけ解説して行きます。
そもそも「Google Chrome」ってなぁに？
世界ブラウザシェアランキング1位！多くのユーザー数を獲得しているWebブラウザGoogle Chrome
世界中の方々に支持される大きな理由は、読み込みが速い！同期が便利！開発者向けの機能が多い！など。
弊社のwelukaでも強く推奨しているブラウザです。
Chromeの『検証』を使いたい３つの理由
デザインの変更テスト！
自分のウェブサイトやブログのHTMLとCSSコードを実験的に書き換えるだけで、実際にどう表示されるかテスト確認することができます。
気になるサイトのコードを覗き見！
気になるサイトのコードが、一体どのように書かれているのか？検証を使えば誰でも簡単にチェックすることができますので、サイト制作の上達にも役立ちます。
その他、表示速度のチューニングや、JavaScriptのデバッグ。表示崩れを特定するとき等に役立ちます。
レスポンシブの確認！
気になるサイトがスマホやタブレットで、どう見えているのか？他のデバイスを使わず、パソコン操作だけでチェックできるので手間が省けます。
ちなみにこの機能、ただのレスポンシブではなく、エミュレーターとして機能しますので役立ちます！
準備
気になるサイトで右クリック！
今回は見本としてGoogleのTOPサイトを検証してみます。
もちろん、このまま使っていただいても構いませんが、少し見づらいと思いますので
検証サイトと検証画面を、それぞれ切り離して見ましょう。
閲覧ページと検証画面を分離！
検証したいサイトと、検証する画面とを切り離すには
検証画面右上にある設定画面を開きDock sideのundock into separate windowを選択して分割します。
パソコン画面の環境や好みに応じて、検証画面を分離したり、右や左へも移動させることができます。
次はsettingを使って検証画面を暗くして使ってみましょう。
検証画面を見やすく変更！
SettingのPreferenceの中にあるThemeを変更します。
初期設定ではLightが設定されていますがDarkに変更します。
好みや環境によって、自分にあった設定を追加してみてくださいね！
便利な１１パネル
検証画面が開くと表示される１１パネルの基本機能を順に見ていきます。
Select an element in the page to inspect it
Select an element in the page to inspect it（要素調査モード）をオン(ランプ点灯)にすると
マウスでクリックしたHTML要素を［Elements］パネルに表示して、スタイルなどの情報を見たり編集したりできます。
Toggle device toolbar
Toggle device toolbar(デバイスモード)をオンにすると
Chrome上でモバイル端末のエミュレートを行い、モバイル端末での表示を確認できます。
Elements
Webページを構築しているさまざまな情報を確認する機能を提供しています。もっと具体的に言えば、DOM（Document Object Model）ツリー、CSSのスタイル、DOMノード、親子に割り当てられたJavaScriptのイベントリスナなどを調査、変更することができます。
Console
DevToolsが提供する対話型のJavaScript実行環境。
JavaScriptの実行で発生したエラーや、console関数によって出力されるログ、ページの読み込みで発生したネットワークエラーなどが表示されます。
Source
表示しているWebページで読み込んでいるファイルを確認できるようになっています。
Network
表示しているWebページから発行されるHTTPリクエストの種類や、レスポンスの確認に用いられます。
Performance
レンダリングのパフォーマンス測定に利用されます。ページを表示する際、ブラウザエンジンがどのような処理を行っていて、どれくらいの時間がかかっているのかを詳しく調査できます。
Memory
表示しているWebページで使用されているメモリの量を調べることができます。
Application
ページが提供しているService Workerやデータストレージなどを管理できます。
Security
ページから発行される接続リクエストが安全である（セキュア）かどうかを判断して、診断結果を表示してくれます。
Audits
ブラウザから見たNetwork Utilization（ネットワークの利用）とWeb Page Performance（主にCSSの利用に関するパフォーマンス）という2つの項目を検査してくれる機能があります。
まとめ
いかがだったでしょうか？Google Chromの『検証』の使い方は。
Webデザイナーや開発者の中では常識とされている機能も、使い方次第では初心者にとって、非常に便利な機能として使えることもあります（Instagramの裏ワザ参照）
みなさんもぜひ、いろいろ触ってみて、面白い使い方を発見してみてくださいね！