Google Chromeの検証機能

Google Chromeのデベロッパーツールは、ウェブ開発者がウェブページやアプリケーションを開発、修正、更新を行う事ができる、多くの機能を持ったツールセット（拡張機能）です。

ここでは検証機能についてです。

Contents

検証機能

サイト上で右クリックし、「検証」をクリックします。

ショートカットキー

Windows：F12キー
Mac：Command＋Option＋Iキー

デベロッパーツールを表示する場所は、下記画像、右上の赤枠をクリックする事で任意で変更可能です。

「Dock side」で左側から順に「別ウィンドウで表示」「左側に表示」「下に表示」「右側に表示」が選択できます。

PC画面上でスマホやタブレット表示を再現するには下記画像の赤枠の「Dimensions Responsive」をクリックします。

開いたプルダウンメニューから任意のデバイスを選択します。

上の中心にある赤枠内の左側にあるアイコンをクリックします。

※下記に編集を加えても実際のページに適用される訳ではありません。擬似的に変更を反映しているだけです。なので、表示が崩れたりしても何の問題ありません。ブラウザの更新ボタンを押せば元に戻ります。

CSSの編集したい箇所をWebページ上で選択します。ツール上部に選択した要素のHTMLがマークされ、下部には適用されているCSSが表示されます。

編集したCSSは、リアルタイムで反映されるので簡単にチェック可能です。

現在、WordPressのpage builderを使えば、ほぼ思い通りに編集はできるので、下記の用途、検証目的での利用を勧めます。