フロントエンド開発などでかかせないGoogle Chromeのデベロッパーツールの使い方の基本についてご紹介します。
Webディレクターであるボクがよく使っている機能の中から、企業のWeb担当者が業務に活かせるものを選びました。ぜひ、ご確認ください。
この記事を読むと、以下のようなことがわかります。
- デベロッパーツールの概要と簡単な使い方
- HTMLやCSSを編集してシミュレートする方法
- ページ上のエラーチェックの方法
デベロッパーツールを起動する
Windowsの場合
Google Chromeの右上のメニューから「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択して起動します。
Macの場合
Google Chromeの右上のメニューから「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択して起動します。
ページの任意の場所で「右クリック」→「検証」から開くことができます。
また、ショートカットキーも用意されています。
- Windows:Ctrl + Shift + i
- Mac：Cmd + Opt + i
もしくは、「F12キー」でも開くことができます。
HTMLを編集して、シミュレートする
デベロッパーツールウィンドウに表示されているHTMLやCSSの要素は、ダブルクリックすることで編集（変更・追加）をすることができます。
また、ショートカットのF2キーを使うことで、HTMLの子要素をまとめて編集することができます。
複数箇所をまとめて編集したいときに使うと便利です。
Deleteキーを押すことで、HTMLを削除することも可能です。
余白（marginやpadding）、サイズをを確認する
「Computed」タブを開くと要素自身のサイズや、マージン、パディングを確認をすることができます。編集したいときは、クリックすることで、このまま編集することも可能です。
CSSのStyleを編集する
「Style」タブを開くと、CSSのStyleを編集することができます。
編集したいStyleにカーソルを当てクリックすると、要素を編集することができます。
Styleタブでは、主に以下のようなそうが可能です。
- Styleの絞り込み：FilterにStyle名を入力
- 要素にマウスオーバーを適用：.hoverをクリック
- Classの追加：.clsをクリック
スマホモードを確認する
デベロッパーツールウィンドウから、「Toggle device toolbar」のアイコンをクリックするとiPhoneやAndroidでの表示をPCの画面から確認できます。
Google検索のランキングはモバイル端末（スマホ）対応・非対応により、その順位に影響を及ぼします。
そのため、Webサイトのスマホ対応は必須となっています。
PCサイトでは正常に表示されていても、スマホサイトでは表示が崩れていたり、想定した表示と異なっていることはよくあることです。
スマホの実機で確認する手間を省くためにもデベロッパーツールで手軽にチェックしましょう。
ページのエラーチェック
ページは正常に表示されていても、実はリンク切れやJavascriptなどのプログラムエラーが起きているときがあります。
そうした場合のチェックもデベロッパーツールを使うことで、簡単に行うことができます。
エラーのチェックは、「Console」タブから確認をします。
エラーには、エラー内容とエラー箇所が表示されているので、該当のファイルのエラーを修正し、再度デベロッパーツールを開いてエラーが解消されていることを確認しましょう。
まとめ
Web開発やディレクションなどを行う際にも便利なGoogle Chromeのデベロッパーツールの使い方の基本について解説をしました。
デベロッパーツールを使うことで、編集したHTMLやStyleの確認を手早く行うことができるため開発環境には必須の機能です。
また、ディレクションを行うときにもクライアントの目の前でページの修正や納品前にはエラーのチェックを行うことで、コミュニケーションやトラブルなどにも対応することができます。
それぞれの業務にあった機能をつかって、業務の質を高めていきましょう。
