デベロッパーツールの概要
デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。
特別なツールやプログラムを使わずブラウザのみで手軽に利用できます。
なお、Google Chromeに限らず、FirefoxやMicrosoft Edge、Safariなどのモダンブラウザであれば似たような機能をもったツールが搭載されています。
デベロッパーツールを起動する
Mac:の場合
Google Chromeのメニューから「表示」->「開発/管理」->「デベロッパーツール」を選択して起動します。
また、ショートカットキーも用意されています。
Mac: Cmd+Opt+I
Windows: Ctrl+Shift+I
Windowsの場合
Google Chromeの右上のメニューから「Google Chromeの設定」->「その他のツール」->「デベロッパーツール」を選択して起動します。
素早くチェック
ページ上の任意の場所で「右クリック」->「検証」を選択すると、右クリックした際にマウスカーソルがあった箇所のHTMLタグにフォーカスした状態で起動します。
確認したいHTMLタグを素早くチェックできて便利です
スマホモードで見てみる
昨今のスマホの台頭により、Webサイトの表示をスマホ用に最適化することはほぼ必須となっています。
PCでは正常に表示されていても、スマホでページを見ると一部のデザインが崩れるといったケースは多々あります。
このような場合、いちいちスマホの実機を使ってチェックするのは面倒ですが、デベロッパーツールのスマホモードを使えば、手軽にチェックできます。
やり方は非常に簡単で、デベロッパーツールのElementsタブの左側のアイコンをクリックするだけです。これでスマホで見たときのページビューに切り替わります。
もう一度アイコンをクリックすると元に戻ります。
コメントを残す