FirefoxでJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】

初心者向けにFirefoxでJavaScriptのデバッグを行う方法について現役エンジニアが解説しています。FirefoxとはNetscape Navigatorを前身とするブラウザになります。FirefoxでJavaScriptのデバッグを行う方法には、デベロッパーツールからコンソールのタブで確認する方法があります。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

FirefoxでJavaScriptのデバッグを行う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

FirefoxでJavaScriptのデバッグを行う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Firefoxとは

Firefoxとは世界で最も使われているWebブラウザの1つです。WWW(ワールド・ワイド・ウェブ)黎明期に登場したブラウザの「Netscape Navigator」を前身とする開発者向けのブラウザとして頻繁に多用されていました。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

デバッグとは

プログラムソースコードを試験に通してエラーがあった場合、修正するための工程が「デバッグ」です。

FirefoxでJavaScriptのデバッグを行う方法

開発者向けのツールである「デベロッパーツール」を起動(「要素を調査」の項目をクリック)してから、「コンソール」の項目(タブ)にて検証します。

実際にデバッグしてみよう

以下のサンプルコードを用いて、まずは、確認してみましょう。

文法にエラーがあるJavaScriptのコード

var sample = sample_error_string;

document.write(sample);

 

実行結果

変数名「sample」に対して、「sample_error_string」の文字列もしくは同名の変数を代入すべき箇所が、文法のエラーに判別されています。

文字列を代入する場合は、「’」(シングルクォーテーション)あるいは「”」(ダブルクォーテーション)のどちらかで含める必要があります。または、同名の変数を代入する場合は、代入の処理以前に同名の変数を定義しなければなりません。

文字列を含める場合

var sample = "sample_error_string";

document.write(sample);

 

実行結果

 

変数を代入する場合

var sample_error_string = "sample_string";

var sample = sample_error_string;

document.write(sample);

 

実行結果

 

まとめ

「デバッグ」の工程の作業がなければ、効率が良くなります。普段から一定の時間を設けて確認しましょう。

筆者プロフィール

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。