Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@mtanabe

【Chrome Developer Tools】実例で学ぶconsoleタブで出来ること~JavaScriptエラー確認編

JavaScriptを書いて、ブラウザで動かしてみて・・・。
あれ?動かない??:scream: エラー出てるのかな?

・・・エラーの中身がわからない orz

そんな時は、ChromeのDeveloper Toolsを起動してみてください:smiley:

この記事で学ぶこと

  • JavaScriptで発生したのエラー・警告の確認方法
  • エラー・警告が起きているJavaScriptの特定方法

1.JavaScriptのエラー・警告の有無を確認する

まずはF12キーを押下して、ChromeのDeveloper Toolsを起動しましょう。
サンプルページとして、Qiitaのユーザー一覧ページ(未ログイン状態)を使いました。
この画像の中で、赤い矢印の先にあるアイコンを確認してください。
001_065.png
※プライバシー保護(?)のために、アイコンやユーザーIDは隠してあります。

拡大するとこんな :arrow_down:感じ。
002_100.png
赤い方がエラーで、黄色い方が警告です。
それぞれ右隣の数字が、エラー・警告の数を表しています。
ここに何も表示されていなければ、エラーも警告もありません。

2.どこでエラー・警告が起きているのか特定する

2つの方法で、確認することが出来ます。
どちらも全く同じ内容ですが、ページの見え方が違います。

2-1.consoleタブを開く

先日紹介した【Chrome Developer Tools】実例で学ぶconsoleタブで出来ること~JavaScriptデバッグ編
にあるとおりです。
consoleタブには、console.logの出力結果だけではなく、JavaScriptのエラーや警告も表示されるんです :star2:
エラーの出力状況のサンプルはこちら :arrow_down:
003_080.png

ちょっと見づらいですが、url_nameという変数がnullなので読み取れないと言ってますね・・・。

2-2.エラーや警告のアイコンをクリックする

先ほど確認したこの:arrow_down:アイコン。
002_100.png
ここにマウスカーソルを当てると、クリックできます。
クリックしてみた結果がこちら :arrow_down:
004_a_085.png

先ほどと見え方が変わってます。
consoleタブだけ独立して、もう1つ表示されました!
ただ、これ、 警告のマーク:warning:をクリックしても、警告には飛びません。
consoleの最終行が表示されるようになっています。
個人的には、小さくて見づらいので、2-1の方法を取ることが多いです。

どんなときに使えばいいのか

JavaScriptが思うように動かないときに、エラー・警告のマークを探してみてください。
JavaScriptはコンパイル言語ではないので、事前に文法ミスなどが見つけにくいです。
なので、とりあえずF12を押してエラー・警告のマークがあるかどうかを見るだけで、ぐっと解決に近づきます。

まとめ

JavaScriptが思ったように動いてないときはF12を押してエラー・警告アイコンの有無を確認する。

では、よいJavaScriptライフを:hand_splayed:

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?