Webブラウザ

【プログラミング初心者の方向け】ウェブブラウザでエラーを確認する方法

 

今回は JavaScript や jQuery を始めたばかりという方に「ウェブブラウザでエラーを確認する方法」を紹介します。
 

HTML や JavaScript を書いていると

  • 画像のパスが間違っている
  • jQuery が読み込めていない
  • JavaScript コードが正しく動いていない

という問題にテキストエディタでは気づけないことがあります。
 

このときに使えるのがウェブブラウザについている「デベロッパーツール・開発ツール」です。

このデベロッパーツール・開発ツールにはたくさんの機能があって、使いこなせるようになるには時間がかかります。

まずは簡単にエラーだけ確認できるようにしておきましょう🙂
 


 

準備

今回は Chrome のデベロッパーツールと Firefox の開発ツールの使い方を紹介します。

簡単な例として、以下のコードを実行してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テスト</title>
</head>
<body>
    <div id="text"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mn.js"></script>
    <script>
        $(function(){
            $('#text').html('<h1>Hello</h1>')
        });
    </script>
</body>
</html>

 

index.html など好きな名前をつけてファイルを作成、コードをそのまま貼り付けてください。
(マウスオーバーすると「Copy」ボタンが表示されます。)
 
 

Google Chrome

HTML ファイルを Chrome で開いて下さい。

ブラウザには何も表示されておらず、エラーメッセージなども表示されていないと思います。


 

それでは、デベロッパーツールを開いてみましょう。

ブラウザの右上にあるメニューボタンを押して「その他のツール → デベロッパーツール」を選択します。

 

画面右側または下に表示される画面が「デベロッパーツール」です。(Console タブが開いていることを確認してください。)

 

デベロッパーツールを表示する位置は、閉じるボタンの隣にあるメニューの「Dock Side」から変更できます。

 

コンソールを見てみると

  • Failed to load resource: the server responded with a status of 404 ()
  • GET https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mn.js net::ERR_ABORTED 404

のようなエラーメッセージが出ていると思います。

少しメッセージは違いますが、どちらも 404(ファイルが見つからない)というエラーです。
 

お気付きかもしれませんが、最初に用意した index.html では jquery.min.js の「i」を消していました。

誤:/jquery/3.4.1/jquery.mn.js
正:/jquery/3.4.1/jquery.min.js

 

これを正しいファイル名に変更して、ブラウザ画面を更新してみてください。

画面に「Hello」という文字が表示され、コンソールに何も表示されていなければ OK です。


 
 

Firefox

HTML ファイルを Chrome で開いて下さい。

ブラウザには何も表示されておらず、エラーメッセージなども表示されていないと思います。

 

それでは、開発ツールを開いてみましょう。

ブラウザの右上にあるメニューボタンを押して「ウェブ開発」を選択します。

 

次に「ウェブコンソール」を選択します。


 

画面右側または下に表示される画面が「開発ツール」です。


 

開発ツールを表示する位置は、閉じるボタンの隣にあるメニューから変更できます。


 

コンソールを見てみると

  • “https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mn.js” からのリソースがブロックされました
  • “https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mn.js” の読み込みに失敗しました

のようなエラーメッセージが出ていると思います。
 

お気付きかもしれませんが、最初に用意した index.html では jquery.min.js の「i」を消していました。

誤:/jquery/3.4.1/jquery.mn.js
正:/jquery/3.4.1/jquery.min.js

 

これを正しいファイル名に変更して、ブラウザ画面を更新してみてください。

画面に「Hello」という文字が表示され、コンソールに何も表示されていなければ OK です。

 
 

まとめ・練習問題

HTML や JavaScript を書いていると、自分でも気がつかないエラーが起きていることがあります。

開発ツールを開いたまま動作確認をしたり、特に問題が起きていないようでも定期的に確認することをお勧めします。

また、今回は簡単な使い方だけ紹介しましたが、開発ツールは ajax や PHP コードのデバッグにも役立ちます。

初めは難しく見えるかもしれませんが、使いながら慣れていくものです。ぜひご自身で色々と試してみてください。
 

練習問題

最後に簡単な練習問題を作成しました。

エラーを2つ隠しているので、コンソールを使って見つけてみてくださいね🙂
 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テスト</title>
</head>
<body>
    <div id="text"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(function(){
        $('#text').htm1('<h1>Hello</h1>');
        var sum = 1 + 2 + 3;
        console.log(su m);
    });
    </script>
</body>
</html>

 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です