コーディングメソドロジー

第28回 コーディングバグの見つけかた

Web制作をしていく上で、正しくコーディングをしているつもりでも、表示が崩れてしまうことがあります。そんな時、ソースをただ単純に目視チェックしていくだけでは、なかなかバグを見つけることができません。特にブラウザバグの場合は、ソース自体が間違っていなくても表示が崩れることがあるため、エラーの場所を特定するのがとても困難なことがあります。
表示が崩れたときに、ソースコードのどこが原因かが分かるだけでも、対処の方法にめどがつくことがあります。今回は、コーディング中にバグが発生してしまった場合の見つけ方をご紹介したいと思います。

文法チェックを使用する

文法チェック

<div>タグや<p>タグなどはページ内でも使用する回数が非常に多いため、そもそも文法的に正しく入れ子構造になっているか、開始タグと閉じタグが対応しているかを、まずはチェックすることが基本になります。
他の箇所を変更している際に閉じタグが消えてしまうなど、ケアレスミスがレイアウトの崩れの原因になってしまっていることがあります。このような場合、基本に立ち戻ってlintなどの文法チェックを行って、マークアップ自体に文法的な問題がないかどうかを確認することで、崩れの原因となっているミスを発見できることがあります。

Firebugを使用する

Firebug

FirefoxアドオンのFirebugは非常に優秀なツールです。
Firebugがインストールされている状態でF12を押すと、Firebugが起動します。
この状態で左から2番目の青いアイコン(①)を選択し、要素の上にカーソルを持っていくことで、現在開いているページのHTMLやCSSの状態を調査することができます。
調査したい要素の上でクリックした後に、画面の右にあるタブ(②)から「累積」を選択することで、選択した要素に結果的に適用されているCSSを確認でき、それによってCSSが正しく読まれているかどうかを確認できます。
また「レイアウト」タブを選択すると、選択した要素のボックスモデル(margin、border、padding、width、height)を確認することができます。

背景色を付ける

背景色を付ける

レイアウトの崩れなどが起こっている場所やその周辺に、目立つように原色系の背景色をいったん付けることで、現在の要素が視覚化されて分かり易くなります。

例:<div style="background:#f00;">~</div>

この状態で各ブラウザで確認することにより、崩れている要素やその崩れかたが視覚的に分かるため、対処がしやすくなります。これは非常にシンプルでありながら、多くの場合に最も効果的なデバッグ方法として活用できます。

更に増えるブラウザへの対応

最近はiPhoneやGALAXY SなどのスマートフォンやiPadなどの製品も増え、それに伴ってブラウザのバリエーションも非常に増えてきました。さらに、同じブラウザでも表示が同じとは限らず、iPhoneやiPadのSafariとMac OSに積まれているSafariでは若干挙動が違います。
今後HTMLを表示させるブラウザや媒体が増えることで、今まで以上にバグ対応が難しくなることも予想されるので、ブラウザによる表示崩れを確実に発見し、迅速に対応できる方法・フローを確立しておくことが、コーディングをする上での重要なポイントの1つになると考えられます。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム