東京都府中市、九段下のWEB制作会社Maromaroのブログです

2021.04.26

oyuco

Google Chrome デベロッパーツールで納品前のエラーチェック!

Google Chrome デベロッパーツールで納品前のエラーチェック!

こんにちは!Maromaroのディレクターoyucoです。

日に日に陽ざし強くなり新緑がまぶしいなぁ、夏がそこまでやってきています。
今は春の土用、季節と運気が変わる準備期間だそうです。

さて、この土用期間は月末月初にあたり連休前でもあるので、ホームページの更新業務が集中します。
複数の案件が走りてんやわんや、なかなか気が落ち着きません。
忙しするぎと凡ミスあったりするので、納品前の検証、クォリティチェックをしっかりおこなっていかないと。

 納品前のチェックとは?

テスト確認や納品前のチェックでは、HTMLやCSSのバリデート、デザイン面では表示崩れや画像リンク切れ、余白や文字サイズ、行間やWebフォントを使用していればちゃんとあたっているかということもあれば、SEO対策面ではタイトルやディスクリプション(概要)、キーワードに画像の代替テキスト(alt属性)の設定に、FacebookやTwitterなどのSNSでシェアされやすくするOGP設定や、最近の案件ではよりツイートで目に留まるようTwitterカードの設定なども。また、スライドやプルダウンメニュー、遅延表示などの動きや検索機能があればその動作や機能検証も行います。もちろん目視での誤字脱字やリンク確認、MacやWindowsの各ブラウザにスマホやタブレットでの実機チェックなどなど、制作するコンテンツにもよりますが様々なチェック項目があげられ、デザイナーやコーダー目線でのチェックを行います。

特に納品前のチェックで、ミスに気づかず納品してしまうとお客様よりご指摘いただくことになってしまったり、公開後に「あっ!」となり大慌てで更新対応を行うことになるので重要な工程です。

案件によってはしっかり検証シートで問題か所をつぶしていくものもありますが、既存ページ更新や1ページもののランディングページなどではチェックシートなしでの確認となり、日ごろからチェックシートを作っておけばいいのですが・・(反省)。

このように、人によるチェックだけでは問題か所を見逃すこともあるので、納品前に必ず行うことがあります。

ブラウザのデベロッパーツール活用

ブラウザのデベロッパーツール(開発者ツール)を使ってページ内のエラーチェックをしています。
・Google Chrome:デベロッパーツール
・Firefox、Microsoft Edge、Internet Explorer:開発者ツール

各ブラウザのデベロッパーツールは下記で簡単に利用することができます。
・Windows:F12キー(Mac:Command+Option+Iキー)

このデベロッパーツール、機能が豊富で今回は深堀しませんが、ブラウザで表示しているページのHTMLやCSSがちゃちゃっと編集できるので、テキストを差し替えたり、文字色や文字サイズ変更などのちょっとした調整であれば、制作担当に依頼する際に、こんな感じにしてほしいと編集した画面キャプチャをとって修正依頼にも活用しています。

 エラーチェックしてみた、方法はこちら

Google Chromeで確認することが多いので、今回はWindowsのGoogle Chromeのデベロッパーツールを使ってエラーチェックを行います。

① エラーチェックするページでF12キーを押してデベロッパーツールが開いたら、ツールバーの「Network」をクリックします。
② 「Disable cache」にチェックを入れてキャッシュを無効化してページをリロードすると、ページに画像やCSSなどが読み込まれてHTTPステータスコードが表示されます。
③ 一覧に「404」エラーがないかを確認します。
▼HTTPステータスコード
「200」OK:正常に読み込み完了です!
「404」アクセスできない:URLやパスミスなどで表示されない

デベロッパーツール「Network」でHTTPステータス確認

404エラーなく正常に表示されてるね

 

このページ「404」エラーがない(正常です!)ので、画像リンク切れ状態でデベロッパーツールを確認してみます。

デベロッパーツールの「Elements」をクリックして、表示中の画像ファイル名をテキトーに変更して画像リンク切れ(画像が表示されてない)状態にしました。「Network」に「404」が表示され、右側に赤い×アイコンのエラーアイコンが表示されました。

デベロッパーツール「Elements」でファイル名変更

変更したらエラーアイコンが表示されたよ

 

デベロッパーツール「Network」でエラーチェック

404エラーがあるね

 

「Console」か右側のエラーアイコンをクリックで、どこでエラーが起きているか確認することができます。
このように「404」エラーがある場合は、該当か所を修正します。

デベロッパーツール「Console」でエラーチェック

404エラーがあるね

まとめ

納品前のチェックが重要!
デベロッパーツールのエラーチェックで、納品前の凡ミスをつぶしましょう、というお話でした。

「Console」でのエラーチェックは今回のような画像リンク切れ「404」エラーの発見もできますが、主にページの動きや機能上で動作がおかしい場合のJavaScript不具合確認に活用しています。

エラーの種類について詳しくは、「エラーコードについて調べてみた(HTTPステータスコード)」に掲載されています。

また、SEO・SNS対策の確認で使えるツールもご紹介しましょう。
タイトル、ディスクリプション、OGタグ等を確認するChrome拡張機能「TDK」

この「TDK」を使って自社サイトのSEO・SNS対策を確認してみます。
あれれ?OGP設定してないのかー。

現在、自社ホームページのリニューアルプロジェクトが進行中、ご期待くださいませ。

さて、まもなくゴールデンウイーク。いつもならハイキングや農ボラ(農家さんのお手伝い)にでかけるところ。
そんな気にもなれず県をまたぐ移動の自粛、ですね。
連休中は天気よければ、毛布やダウンでも洗おうかな。

以上、Maromaroのoyucoでした。