GoogleChromは、Googleが提供するブラウザなので、WindowsともMacOSとも高い互換性があることで知られています。
WEB開発時において「Google先生」と呼ばれるほどに検索エンジンGoogleが主流として使われており、「ブラウザもGoogleのものを・・・」とGoogleChromで開発しているクリエイターの方も多いです。
GoogleChromには、標準で「ディベロッパーツール」と呼ばれる開発補助ツールが付属しています。
ディベロッパーツールを使うことで、リアルタイムでのサイト動作確認やデザインの変更を行ったり、レスポンシブ表示時のサイトデザインの確認を行うことができます。
ディベロッパーツールの表示方法
GoogleChromでディベロッパーツールを表示するには、メニューバーの「表示」→「開発/管理」→「ディベロッパーツール」をクリックします。
ディベロッパーツールでできること
ソースコードの確認
ディベロッパーツールの「Element」タブでは、ページのソースコードが表示されています。
ソースコードを確認する方法はもう一つあって、
メニューバーの「表示」→「開発/管理」→「ソースを表示」からでもソースコードが表示できます。
こちらの表示の場合、ソースコードは編集不可のテキスト一覧で表示されるので、開発時には不向きですが、ちょっとページの中から文字列を探したい場合（例：「mystyle.css」というファイルが読み込まれているかどうかの確認をしたい時など）には便利です。
リアルタイムでのプログラム変更とページへの即時反映
ディベロッパーツールの「Element」タブでは、ページのソースコードをリアルタイムで編集することができます。
編集したい箇所をダブルクリックすると、内容を書き換えることができるようになります。
ただし、本番環境のサイトプログラムが書き換わるのではなく、あくまで現在表示されているページのみにテスト反映されるだけなので、ディベロッパーツール上でデザイン等を検討し、決定した変更は各自サーバー上の修正ファイルに記述し直す必要があります。
デザインを検討する際の例を見ていきましょう。
最初は以下のようなデザインが適用されたブロックがあったとします。
これのテキストカラーを茶色に変更してみましょう。
ディベロッパーツールのスタイル設定を変更することで、リアルタイムでどのような表示になるのかを確認することができます。そのデザインが気に入ったら、本番環境のスタイルにも内容を反映させましょう。
レスポンシブモードでの表示確認
ディバロッパーツールには、あらゆるブラウザサイズでの表示を確認できる機能が付与されています。
ディベロッパーツール左上のアイコンをクリックすることで、レスポンシブモードでの表示確認を行うことができます。
もう一度アイコンをクリックすると、レスポンシブモードでの表示が終了します。
うまく通常表示とレスポンシブモードでの表示を切り分けることで、出戻りの少ない効率の良いWEB制作を行うことができます。
