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

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

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

 

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

 

 

目次

• Firefoxとは
• Firefoxの特徴
• デバッグとは
• FirefoxでJavaScriptのデバッグを行う方法
• 実際にデバッグしてみよう
• まとめ

 

Firefoxとは

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

[PR] フロントエンドで副業する学習方法を動画で公開中

デバッグとは

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

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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