プログラミング

【あなたは正しく使えてる?】検証ツールの正しい使い方【コーディングで必須】

こんにちは、現在フリーランスのエンジニアとして5年ほど活動しているしょーごと申します。

みなさん「検証ツール」または「Chromeデベロッパーツール」という言葉を聞いたことがあるでしょうか?

検証ツールを知らずにコーディングを行うことは不可能ですし、正しく使えていない人が多いので、今回の記事を通して正しく使っていただければと思います。

しょーご
しょーご
既に使っている人も、検証ツールには多くのまだ見ぬ便利機能が詰まっているので、この機会に是非!

この記事で学べること

検証ツールを使用して正確なコーディングを行えるようになる

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

検証ツールとは?

検証ツール Web制作 コーディング 使い方

検証ツールで今回紹介する機能・できることは以下のとおりです。

検証ツールの機能
  1. コードチェック、デバッグ
  2. レスポンシブ確認
  3. エラーチェック(今回の重要ポイント!
  4. SEOチェック
  5. フォント確認

実際にやってみたほうが早いので、今検証ツールを起動してみましょう!

検証ツールはChromeブラウザで使用することができます。

検証ツールの起動方法
  1. 右クリック→検証
  2. Ctrl+Shift+I(MacではCommand + Option + I)
検証ツール Web制作 コーディング 使い方
右クリックの場合は「検証」を選択

検証ツール① コードチェック、デバッグ

まずはコードのチェックやデバッグ方法を学んでいきましょう。

検証ツールの左上のアイコンをクリックします。

検証ツール Web制作 コーディング 使い方

すると、ホームページ上の各要素を選択することができます。

検証ツール Web制作 コーディング 使い方


カーソルを合わさった箇所は色が変わり、一つ一つの要素がどのようソースーコードで構成されているのかが分かります。

ユースケース① CSSで色を変えてみる

例えばこのボタン

検証ツール Web制作 コーディング 使い方

なんとなく「青色」にしたらどうなるだろうと変えてみるとします。

まずはボタンにフォーカスを当ててソースコードを確認します。

検証ツール Web制作 コーディング 使い方

すると、ボタンの色は.top-image-btn-color aというところにあたっているようです。

なので、ここを変えてあげればいいです。

検証ツール Web制作 コーディング 使い方
検証ツール Web制作 コーディング 使い方

検証ツールでカラーコードをblueにした結果、ボタンを青色にすることができました。

ユースケース② HTMLの変更

例えばボタンのテキストを「コーディング教材ページへ」に変えたいとします。

まさひろくん
まさひろくん
テキスト変えてみたらどうなるかな〜

という場合にソースコードをいちいち触って確認するのは億劫そうです。

その場合も変更したい部分をダブルクリックすれば変更可能になります。

検証ツール Web制作 コーディング 使い方
テキストを書き換えてEnterすると
検証ツール Web制作 コーディング 使い方

こちらの方がしっくりきそうであれば、ソースコードも変更すればいいと思います。

検証ツールでの変更は反映されない

疑問として

まさひろくん
まさひろくん
検証ツールで行った変更ってコードに反映されるのでしょうか?

という疑問があるかと思いますが、ブラウザのHTML,CSSをいじっているに過ぎないので、本番公開されているサイトを検証ツールでいじっても基本的には問題ありません。

なので、

  • ソースコードを確認するほどじゃないけど、色とか余白を変えて表示確認してみたい
  • サイトの気になる部分を検証で覗いてどういうコードになってるか確認する
  • 自分の書いたCSSがちゃんとあたっているか確認する
  • おしゃれなサイトのコードやライブラリを覗いて参考にする

みたいなときによく使います。

検証ツール② レスポンシブ確認

検証ツールではレスポンシブ表示の確認をすることができます。

ここのアイコンをクリックすると、

これはiPhone6,7,8
様々なデバイスを選択可能
これはタブレット表示

このようにレスポンシブやデバイス幅を確認することができます。

特にタブレット周りは崩れがちなので、要注意です!

Responsiveで大画面でも確認する

検証ツール レスポンシブ

縮尺を変えれば、2000px近くのサイズも検証することができます。

同時にブラウザ幅をかえて連続的な表示の確認もしましょう。

世の中には様々なブラウザ幅やデバイスで使っている人がいるので、変な表示になっている部分は極力なくしたほうがいいです。

クライアントさん

なんかここバグってるみたいです!

と結構指摘されることになります笑

しょーご
しょーご
ちなみに残念ながら、この「検証ツールのiPhone,iPad」「実際のiPhone,iPad」では表示が違う場合のほうがはるかに多いです。なので実機で確認するかエミュレーターが必要になったりします、難しいですね。

検証ツール③ エラーチェック

恐らく日頃検証ツールを使っている人でも知らない方がいるかもしれません。

検証>Consoleの部分です。ここにエラーが出ていないか確認します

確認する際はブラウザのシークレットウィンドウで開きましょう。ブラウザの拡張機能がエラー吐いたりして邪魔なためです。

いくつかエラーが出ていますね。

(index):920 Uncaught ReferenceError: _ is not defined
    at (index):920

ここに Webサイトで起こっているエラーがまとめて表示されているので、エラー文を一つ一つ呼んで問題を解消していく作業が必要になります。

しょーご
しょーご
ちょっとこのサイト問題がありますね…

このコンソールエラーは見る人が見たらかなり分かりやすいので、納品や他人への表示チェック依頼の前に潰しておくことが最低限のマナーになります!

余談ですが、ここではJavaScriptを実行することができるので、console.logの結果を見たりできます。変数の中身を見るときとか便利ですね。

例えば以下のコードをconsoleに入れると、横スクロールの場所を特定できたりします。

var w = document.documentElement.clientWidth
$("*").forEach(v => {
v.style.outline = '1px solid red'
  if (w < v.clientWidth) {
    console.log(v)
  }
})

検証ツール④ SEOチェック(Lighthouse)

これは上級者向けです。サイトの改善などをする人向けです。

Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラクティス」、「SEO」点でチェックしてくれるツールで、サイトの分析に使えます。

Generate Reportをクリックする

このようにレポートが作成されます。

これはあんまりよくないスコアですね…

ちなみにちゃんとしたサイトだと、ちゃんとした数値が出てきます。

敬愛するICS MEDIAさんです

ふつくしぃ…

サイトの改善施策出し

具体的なユースケースとしては、

  1. パフォーマンス
  2. PWA
  3. アクセシビリティ
  4. ベストプラクティス
  5. SEO

各項目ごとの点数を上げていくことで、サイト改善の指標に用いることができます。

検証ツール⑤フォント確認

CSSで指定したつもりでも、違うフォントがあたっていることがままあります。

其の場合、実際にどんなフォントが使われているかを「Computed(計算済み)」から確認することができます。

一番下にレンダリングフォントが表示されます。

フォント確認方法

フォントの詳しい確認方法を以下にまとめています。

検証ツール⑥ネットワーク

ネットワークを見ることで、どの部分がボトルネックになってページ読み込みに時間がかかっているのか、一目瞭然になります。

例えば以下なら、明らかに1.0MB以上あるpng画像の部分で読み込みに時間がかかっているのが分かるかと思います。

https://www.pref.yamagata.jp/

こういった部分を見つけて、軽量化して上げるといいです。読み込みの遅いものは、ポートフォリオでも低評価です。

検証ツールをコーディングで使い倒そう

ここまで検証ツールの使い方を説明してきました。

最近仕事柄初学者の方のコーディンチェックをすることが多いですが、特に

  1. レスポンシブチェック、タブレットなどが甘め
  2. Consoleにエラーが出まくり

の方が目立つので、今回の記事を読まれた方は是非、検証ツール使いこなしていただいてエラーのないサイトを組み上げてほしいなと思います。

お疲れさまでした!

おすすめの拡張機能も入れておきましょう!

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!