こんな悩みに答えます。
Googleデベロッパーツールは、ソースコードや各デバイスでの表示画面をブラウザ上で確認することができ、Web開発者やWeb担当者にとっても重宝するツールです。
そこで、本記事では、Googleデベロッパーツールの概要や役立つ機能について紹介していきます。
ブログ運営をしている方にもデベロッパーツールは役に立ちますので、是非参考にしてみてください。
それでは、早速始めていきます。
目次
Googleデベロッパーツールとは？
Googleデベロッパーツールとは？
Googleデベロッパーツールは、Google Chromeに標準で搭載されているデバッグツールです。
HTML,CSSの構成やページの速度計測などを確認することができるので、ブログ運営をしていると大変役立つツールです！
Googleデベロッパーツールの起動方法
Googleデベロッパーツールの起動方法はショートカットキーを使って簡単に表示させることができます。
- Windowsユーザー：Ctrl+Shift+I
- Macユーザー：Command + Option + I
すると、以下キャプチャのように、ページ右側にソースコードなどが書かれた画面が表示されます。
これで、デベロッパーツールの起動は完了です！
次からデベロッパーツールでよく使う機能について具体的に紹介していきますね。
Googleデベロッパーツールの基本的な使い方
Googleデベロッパーツールの基本的な使い方
それでは、Googleデベロッパーツールで使える機能について詳しく紹介します。
今回は以下について図解で紹介します。
- その①：ソースコードの確認
- その②：ページの表示速度の確認
- その③：スマートフォンやタブレットデバイスでの検証
その①：ソースコードの確認
要素を選択することができ、右側の画面からソースコードを書き換えることができます。
まずは、以下赤ワクで囲った①番目をクリックし、次に２番目のElementsを選択します。
クリックできましたら、左側の画面で変えたい要素にカーソルを当てクリックするとソースコードが確認できます。
上記の感じです。
クリックした要素には、右側のソースコードの背景が薄い青色になっているはずです。
後は、修正したいソースコードの上でダブルクリックしてテキストを入力して編集します。
右側のソースコードのテキストを変えると、左側の画面のテキストも変わります。
まずは、先程と同様に要素の上でクリックします。
以下の通りStyleになっていることを確認できましたら、赤ワクがCSSになるので、その中の見出し色[color:;]のプロパティを変更します。
※あくまでも擬似的な変更なので、実際には変更はされません
[color:;]横にある◾️箇所をクリックすると、以下のようにカラーピッカーが表示されます。
後は、好きな色を指定してあげることで色の変更ができます。
また、「margin、border、padding」の値を変えることもできますので、左側の画面を見ながら調整してみるといいですよ！
その②：ページの表示速度の確認
ページの表示速度を分析するにもデベロッパーツールでできます。
以下の「Network」をクリックします。
画面が切り替わるので、以下の画面で更新ボタン（ショートカットキー：F5）をクリックします。
すると、Finishに数字が表示されますので、計測時間を確認することができます。
ただ、個人的に分かりづらく正確性も分からないので、PageSpeed Insightsで確認してみるのがオススメです。
その③：スマートフォンやタブレットデバイスでの検証
『PCだけではなく、スマホでもどんな感じで表示されているのか確認したい...』と思った時も、デベロッパーツールで確認できちゃいます。
以下の赤ワクで囲ったボタンをクリックして、切り替えアイコンが水色に反転されているか確認します。
次に、「Responsive」のプルダウンをクリックして、表示させたいデバイス画面を選択します。
表示させたいデバイス画面を選択後に、下記のようにデバイスでの表示の見え方になるはずです。
また、表示させたいデバイスをクリックして画面が切り替わらない場合は、リロードをクリックして試してみてください。
ショートカットキーでのリロードは以下です。
- Windows OS： ［Ctrl］＋［R］キーまたは［F5］キー
- macOS： ［command］＋［R］キー
Googleデベロッパーツールの使い方：まとめ
Googleデベロッパーツールの使い方：まとめ
今回は、デベロッパーツールでよく使う機能と使い方について紹介しました。
元のファイルを編集することなく、テキストや要素の色を変えたりすることができるので、ブログ運営をしていると本当に便利ですね！
なお、デベロッパーツールを使っていても、ソースコードが分からないと苦戦すると思います。
手元に書籍を置いときながら、デベロッパーツールを使うと編集がよりスムーズになりますよ！
今回は以上です。
ここまで読んでいただき、ありがとうございました。