更新日
#18 デベロッパーツールを使ってエラーを素早く解決できるようになろう
web兄さん
デベロッパーツールとは？
デベロッパーツール（またの名を開発者ツール）はGoogleChromeなどのブラウザに標準でついている、コードを書く人のための検証ツールです。
これからポートフォリオサイトの作成課題に取り組むにあたって、今まで以上にコード書いていきます。その中でうまくいかない原因をいち早く見つけるためにも「デベロッパーツール」の基本操作は必須です！
デベロッパーツールの起動方法
こちらの動画で基本を解説しています。
windowsでの起動方法
以下のキーボードを同時に入力することで起動します。
Ctrl+Shift+i
macでの起動方法
以下のキーボードを同時に入力することで起動します。
command+option+i
必須の基本操作4つを覚えよう
デベロッパーツールは“見る”ことのできるデータが非常に多いですが、できることが多い分、かえって複雑でもあります。
そのため、今回はWEB制作者として覚えるべき4つの操作方法について解説をしていきます。
- 画像ファイルの読み込み/CSSファイルの読み込みのエラーの確認方法
- CSSの文法エラーの確認方法
- 一時的なソースの変更
- レスポンシブデザインの確認
01｜画像ファイルの読み込み/CSSファイルの読み込みのエラーの確認方法
そもそも画像ファイルが読み込めていなかったり、CSSファイルが読み込めていない関係で表示がうまくいかない時があります。そんな時にデベロッパーツールを使えると便利です。
02｜CSSの文法エラーの確認方法
スペルミスや、記号の書き間違いなど、CSSの文法に間違いがあった場合の確認方法です。狙い通りCSSが適用されているかを確認することができます。
「うまくいかない」時は必ずここを確認しましょう
チャットにて「うまくいきません」という方の多くがデベロッパーツールで正しくCSSが適用されているかを確認していません。逆に“伸びる生徒さん”は自分でエラーを解決する能力に長けています。
うまくいかないときは必ずCSSが正しく狙った要素に効いているのかをチェックしましょう👍
03｜一時的にHTMLやCSSを変更する
実際のファイルに影響を与えず、ブラウザ上で一時的にHTMLやCSSを変更して見た目の変更の確認を行うことができます。
04｜タブレットやスマホでの見た目を確認する
パソコンでの見た目以外にも、タブレットやスマホでの表示状態も確認する必要があります。
実際の開発では、表示を確認→CSSの調整を繰り返し行っていくのでこちらも必須スキルです。