HTMLのデバッグは怖くない!初心者でもわかるデベロッパーツールの使い方を紹介

2022.09.17
htmlのデバッグは怖くない

Web制作会社やクライアントから「HTMLのデバッグをお願いします」と言われた時、

「え?デバッグってなに?どうやってやるの??」と思ったことはありませんか?

そこで今回は、初心者でもわかるHTMLのデバッグについて解説します。

この記事でわかる内容は以下の通りです。

  • デバッグとは何か?用語の理解
  • HTML・CSSのデバッグで必須の機能について
  • デバッグの方法

デバッグとは何かという基礎だけでなく、デバッグの具体的な方法も解説しますので、ぜひ最後まで見てくださいね。

そもそもデバッグとはなにか?

最初に、デバッグとはどう意味なのか用語の確認をしておきましょう。

デバッグとは、プログラム内のバグを見つけて改修する作業のことで、「デバッグ作業」と呼ばれることもあります。

デバッグの由来は、英語で「bug(虫)」を意味する「バグ」からきていきます。

「バグ」とは、プログラムの処理を邪魔する「虫」が入り込んだことが由来と言われていて、この「虫(bug)」を取り除く(de)作業を「デバッグ(debug)」と呼んでいるのです。

「デバッグ」と似ている言葉で「デバック」がありますが、間違いなので使用しないようにしましょう。

【ブラウザ】HTMLのデバッグに必要なデベロッパーツールを理解しよう!

デバッグを行うためには、まずバグを見つけなければなりません。

どこにバグがあるのか、どのような問題を引き起こしているのか把握するためには、必ず「デベロッパーツール」を使用します。

デバッグを行う上で、必須のツールなので、ここで基礎や使用方法などについてしっかり理解しておきましょう。

デベロッパーツールとは

デベロッパーツールとは、開いているHTMLページのソースコードを表示できる機能のことで、ブラウザによっては「開発者ツール」とも呼ばれています。

基本的に、ブラウザ右上部にあるメニューバーから「デベロッパーツール(開発者ツール)」を選択するだけで、ツールを起動することができます。

各ブラウザごとの使用方法は、以下の記事が参考になります。

【初心者向け】HTMLソースコードをブラウザ上で表示する方法|各ブラウザごとに解説

デベロッパーツールには、様々な機能が備わっています。

ここからは、デベロッパーツールの便利な機能を解説していきます。

HTMLだけでなく、CSSのデバッグにも便利な機能も解説するので、デバッグ初心者の方必見です。

まずは、各機能の名前と主な役割をおさえておきましょう。

ブラウザ画面

①マウスで直接Webぺージの要素を選択できるアイコン ②スマートフォンでの表示画面など、レスポンシブ対応を確認できるウィンドウの切り替え機能 ③機能を切り替えることができるタブ。「パネル」とも呼ばれています ④各タブを表示したり、隠したりするアイコン ⑤デベロッパーツールの詳細を設定できる設定アイコン ⑥デベロッパーツールの表示場所を変更できるアイコン。右側、下部、別ウィンドウで開くのいずれかを選択できます

Elements(エレメント)

ブラウザ画面

Elementsタブは、HTMLソースコードを確認できる機能で、Web開発者が最も多く使う機能でもあります。

上から順番に要素を確認していくことも可能ですが、ボリュームが多いページの場合、一つ一つ確認していくのは大変なので、①の機能で直接Webページ内の要素を指定するのが効率的です。

要素の確認と同時に、②のパネルでスタイルシートを確認することも可能です。

CSSのタブについては、後程解説します。

Console(コンソール)

ブラウザ画面

Consoleタブは、主にJavaScriptのエラー表示や、テストを行うことができる機能です。

全てのタブからのアクセスができるため、Elementsタブで要素を操作したり、SourcesタブでJavaScriptのオブジェクトを操作するなどの作業が可能です。

JavaScriptの動作確認をしたい中級者や上級者によく利用されています。

Sources(ソース)

ブラウザ画面

Sourcesタブは、Webサイトで使用されているファイルの確認や、CSSやJavaScriptのコードをデバッグできる機能です。

プログラミング学習で、Webサイトを模写する際、画像を保存する時などにも利用することができます。

CSSのデバッグに必要な機能

CSSのデバッグは、HTMLのデバッグと平行して行うことが可能です。

ブラウザ画面

上記は、 Elementsタブを開いている時の画面です。

デベロッパーツール下部にある赤枠で囲った部分がCSSのデバッグに必要なタブになります。

CSSのデバッグに利用できるタブの中で、主に利用されている2つを解説します。

Styles

ブラウザ画面

Stylesタブは、CSSのスタイルを確認・記述できる機能です。

表示されているHTML要素のスタイルを確認できるだけでなく、デベロッパーツールに直接書き込んでテストできるのもポイント。

自身のテキストエディタで修正して反映されているか確認して…

という作業が減るので、効率的にスタイルを修正・追加することができます。

Computed

ブラウザ画面

Computedタブは、要素のサイズやマージン、パディングを確認することができる機能です。

Computedタブ内のボックスをクリックすることで、そのまま編集することも可能です。

余白を調整したい時に便利な機能です。

実際にHTMLのデバッグをしてみよう!

では、実際にHTMLのデバッグをしてみましょう!

デバッグの手順は以下のように行います。

STEP1
STEP1
準備したHTMLコードにエラーを発生させる
HTMLがブラウザ上に正しく表示されないように、わざとコードミスを記述します。
STEP2
STEP2
エラー内容の確認
デベロッパーツールを起動し、エラーの内容を確認します。
STEP3
STEP3
デベロッパーツールでコードを修正
デベロッパーツールのElementsタブを使用して、直接コードを修正します。
STEP4
STEP4
テキストエディタでコードを修正
デベロッパーツールに直接修正したコードをテキストエディタに書き写します。
STEP5
STEP5
再度エラーが発生していないか確認
ブラウザをリロードし、HTMLにエラーがないか確認します。

では、それぞれの手順について詳しく見ていきましょう。

1.エラーを発生させる

テキストエディタにHTMLコードを記述します。

<!-- HTMLコード -->
<div class="container">
  <h1>HTMLデバッグのテストを行います</h1>
  <p>テキストにエラーを表示させます</p>
</div>

▼ブラウザ表示▼

エラーを表示させる前の画像

上記のコードがエラー表示されるように、以下のように変更します。

<!-- HTMLコード -->

<div class="container">
  <h1>HTMLデバッグのテストを行います</h1> 
  <p>テキストにエラーを表示させます</p>>>>
</div>

▼ブラウザ表示▼

2.どういうエラーが発生しているのか確認する

HTMLページをブラウザで表示し、デベロッパーツールを起動します。(今回はGoogle Chromeを使用)

エラーが発生している箇所を選択し、Elementsタブでどの部分が原因か特定します。

エラー表示させた画像

3.デベロッパーツールでコードを修正

原因と思われるコードを、デベロッパーツールのElementsタブで修正します。

修正する画像
修正した画像

Enterを押して、どのように表示されるか確認してみましょう。

エラー修正の確認

4.テキストエディタでコードを修正

STEP3で問題がないようであれば、同様のコードをテキストエディタに書き写します。

<!-- HTMLコード -->
<div class="container">
  <h1>HTMLデバッグのテストを行います</h1>
  <p>テキストにエラーを表示させます</p>
</div>

5.再度エラーが発生していないか確認

ブラウザ上で再度リロードし、エラーが解決しているか確認します。

エラー解消の確認

問題なく表示されていれば、HTMLのデバッグは完了です!

Web制作においてデバッグは必須!デベロッパーツールを使いこなしてHTMLのデバッグをしよう!

今回は、HTMLのデバッグに必須のデベロッパーツールやデバッグの方法について解説しました。

以下は、この記事のまとめです。

  • デバッグとは、プログラム内のバグを改修する作業のこと
  • デバッグでデベロッパーツールは必須
  • HTML・CSSにおいてもデバッグは必須の作業

「HTMLやCSSにはデバッグは関係ない」と思っていて方も多いでしょう。

しかし、Web開発においてデバッグは必ず必要な作業です。

この機会にデベロッパーツールの基礎をマスターして、HTMLやCSSをデバッグできるようになりましょう!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5