作って学べる
プログラミング講座
アプリを作りながら学習
自分のペースですぐに始められる
困ったら何回でも質問可能
Webブラウザ

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

Sara

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

HTML や JavaScript を書いていると

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

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

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

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

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

準備

簡単なコードを実行してみましょう。

index.html など好きな名前でファイルを作成して、コードをそのまま貼り付けてください。

<!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>

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

Chrome → Firefox の順番で紹介しているので、お使いのブラウザに合わせてお読みください。

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>
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
>> お問い合わせはこちら
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました