Home > Editor

ベクトルドロー・レベルゼロ

Firefoxデバッガの概要

新規作成日 2018-06-25
最終更新日

Firefox Developer Editionには、JavaScriptコードをデバッグするためのFirefoxデバッガが標準装備されています。紹介ドキュメントを日本語訳してみました。

原文:Introduction to Firefox Debugger

あなたは、JavaScriptコードをデバッグするために、console.logだけを使用していますか?認めても大丈夫です。console.logを使用することは簡単で、便利ですが、それには、限界があります。それらは、発生したものを捕える、あるいは、それが、壊れている場所を確認するために、コードに深く飛び込むことには、適していません。それを行うには、あなたは、完全な機能のデバッガを必要とします。Firefoxデバッガは、壊れたコードを評価して、修復するための総合的なツールを持っています。一旦、あなたが基本を学ぶと、デバッガを使用することは、迅速かつ簡単ですが、何時間もの欲求不満、そして、潜在的な「ヘッド・オン・デマンド・デスク」セッションから、あなたを救うことができます。

単純なToDoアプリケーションをデバッグすることによって、私たちは、Firefoxデバッガの基本を学びます。あなたは、一緒について行くために、Firefoxを必要とします。Firefoxを持っていませんか?Firefox Developer Editionを確認して下さい。

飛び込む前に、Debuggerインターフェイスを見てみましょう。Debuggerを開くために、Macでは、option + command + S、あるいは、Windowsでは、shift + ctrl + Sを押します。

Debuggerは、3つの枠に分割されています。:

Firefox Debugger Panelの概要

Firefox Debugger Panelの概要

ソース・リスト枠には、現在のページ、あるいは、プロジェクトと関連する、すべてのJavaScriptファイルが表示されます。

  • ソース枠は、それらのファイルの内容を表示します。
  • ツール枠は、情報とツールが含まれています。
  • ツール枠は、情報とツールが含まれています。

ツール枠は、5つのセクションに分解することができます。:

ツール枠で利用可能な全てのツール

  • ツール・バーは、スクリプトを通して、デバッガの動作を制御するボタンを持っています。
  • 式の監視セクションは、私たちが、実行を一時停止して、式を監視できます。
  • ブレークポイント・セクションは、設定されているブレークポイントのすべてを表示します。各々のブレークポイントの隣に、そのブレークポイントの有効、あるいは、無効チェックボックスがあります。
  • 呼出しスタック・セクションは、関数名、ファイル名と行番号と同様に、呼出しスタックの各々のレベルを表示します。
  • スコープ・セクションは、スコープにある、すべてのオブジェクトを表示します。

あなたが、これらの用語や記号の全ての意味を理解していない場合、心配しないでください。私たちは、次のセクションで、それらを取り扱います。あなたが、一緒に追従することができるように、物事がどこにあるのかを覚えておいてください。

今、私たちは、Debuggeインターフェイスを見直しました。壊れたTo-doアプリを修正するために、それを使用しましょう。

Firefox開発者ツール:刺激的なヒント

Firefox DevTools: Hot Tip

ときどき、JavaScriptコードは、"軽量化"されています。そのため、ファイルサイズが、小さくなり、読み込みが高速になります。これは、あなたのユーザーにとって、素晴らしいことですが、それは、Debuggerで、コードを読み取ることができなくなる可能性があります。ありがたいことに、Firefoxには、軽量化されたコードを表示するための素晴らしいオプションがあります。あなたが、ソース枠で、軽量化されたファイルを表示するとき、アイコンは、一番下に表示されます。このアイコンをクリックした後に、Debuggerは、コードを、人間が読み取れる何かにフォーマットします。そして、ソース枠で、新しいファイルとして、それを表示します。

それを試して見て下さい!

以下のリンクは、あなたが、軽量化されたJavaScriptファイルを使用している、ToDoアプリケーションを簡単に導入します。:

  • このリンクを訪ねる。
  • デバッガを開く(Macでは、option + command + S 、あるいは、Windowsでは、shift + control + S)
  • ソース・リスト枠で、app.jsを探してクリックしてください。
  • フォーマット・アイコンを見つけてクリックします。

変数の値を見つける

原文:Find the Value of a Variable

console.logから抜け出すための最初のステップは、最初の使用例の1つに取り組むことです。: 変数の値を見つける。

単純なToDoアプリケーションを見てみましょう。:

新しいタブで、ToDoアプリケーションを開きます。

このアプリケーションは、入力フォームの値を取得し、オブジェクトを作成し、そして、その次に、そのオブジェクトをタスクの配列にプッシュする、addTodoと呼ばれる関数を持っています。新しいタスクを追加して、テストしましょう。あなたは、この新しいタスクをリストに追加することを期待すると思いますが、その代わりに、"[object HTMLInputElement]"を参照します。

何かが、壊れています。そして、私たちは、コードをデバッグする必要があります。誘惑は、問題がどこにあるか特定するために、関数を通してconsole.logを追加し始めることです。このアプローチは、次のようになります。:

const addTodo = e => {
  e.preventDefault();
  const title = document.querySelector(".todo__input");
  console.log('title is: ', title);
  const todo = { title };
  console.log('todo is: ', todo');
  
  items.push(todo);
  saveList();
  console.log(‘The updated to-do list is: ‘, items);
  document.querySelector(".todo__add").reset();
};

これは、動作しますが、厄介で扱いにくいです。また、私たちは、コードを修正した後で、これらの行を削除することも忘れてはいけません。ブレークポイントと呼ばれるものを使用して、Debuggerを使用する、さらに良い方法があります。

ブレークポイントは、私たちが、コードの特定の場所で、実行を一時停止することを望む、Debuggerに信号を送るものです。一時停止されている間、私たちは、コード内のその特定の位置で、変数の値を見ることができます。上でリンクされた例を使用して、13行にブレークポイントを追加しましょう。 私たちは、コードの左側にある数字13をクリックすることによって、これを行なうことができます。 正しく実行された場合、少し青いフラグが、表示されます。

ブレークポイントを追加する

ブレークポイントを追加する

次に、タスクを追加してみましょう。ブレークポイントのため、コードの実行は、addTodo関数内で、13行目が実行される直前、一時停止します。私たちは、入力フォームの値が使用されていない理由を確認するために、タイトルとtodo変数の値を追跡することを望みます。チェックリストをレンダリングするとき、私たちが、変数の値を確認できる、いくつかの方法があります。

方法1:コンソールを使用します。

私たちが、ブレークポイントに達し、実行を一時停止するとき、私たちは、コードが、一時停止されたところで、コンソールを使用することができます。私たちが、コンソールに、タイトルを入力できることを示しています。Enterを押します。そして、その変数の値を表示します。

方法2:ホバー

また、私たちは、ソース枠の変数にカーソルを合わせると、その変数の値が表示されます。他の項目に、カーソルを上に重ねてみてください。オブジェクトや関数のような、ホバリングは、私たちが、デバッグに役立つ可能性がある、あらゆる種類の情報にすばやくアクセスできます。

情報のホバリング

情報のホバリング

方法3:スコープ・セクション

Firefox Debuggerの右下に、すべてのオブジェクトを表示する、セクションがあります。これは、プログラムのこの時点で範囲内にあります。最初のブロックは、現在ブロック/関数とそれらの値で変数を一覧にします。

Firefoxデバッガのスコープ・セクション

Firefoxデバッガのスコープ・セクション

13行目で、一時停止中に、これらのメソッドを試した場合、あなたは、少し問題に、気がついたかもしれません。:titleとtodo変数は未定義です。これは、13行目の直前で、実行が一時停止しているためです。そして、これらの変数に値を割り当てる行は、まだ実行されていません。私たちは、それらの変数が値を割り当てられるまで、スクリプトを移動し続ける必要があります。これは、ツール・バーが入るところです。

Firefox Debuggerツール・バー

Firefox Debuggerツール・バー

ツールバー・ボタンは、以下のことを行います。:

再生/一時停止

私たちが、デバッグしているスクリプトの実行を一時停止、あるいは、再開します。それが、「再生」アイコンを表示するとき、私たちが、このボタンで一時停止したか、または、ブレークポイントに達したため、スクリプトが、一時停止していることを示しています。

ステップ・オーバー

JavaScriptコードの現在の行全体をステップ実行します。

ステップ・イン

現在のJavaScriptコード行の関数呼び出しを開始します。

ステップ・アウト

現在の関数が終了するまで、スクリプトを実行します。

今、私たちは、'Step Over'ボタンに焦点を当てていきます。これは、コードを1行ずつステップ実行します。それが、関数に到達した場合、全体の関数を実行します。これは、実行する代わりに、その関数に入る、'Step In' ボタンとは異なります。まだ、違いを理解できないことを心配しないでください。私たちは、次のセクションで、より多くの 'Step In' を取り扱います。

'Step Over' ボタンを1回押します。コードは、まだ、一時停止されていますが、14行目は、現在、強調されています。つまり、13行目が実行されたことを示しています。変数は、まだ、定義されていませんが、それは、私たちが、14行目の直前で、一時停止したためです。もう一度、'Step Over'を押し、そして、現在、私たちは、どこかに行っています!私たちは、現在、タイトルを上書きして値を取得できるようになりました。また、私たちは、スコープ・セクションを確認することができます。

その値を見るために、カーソルを'title'の上に重ねます。

その値を見るために、カーソルを'title'の上に重ねます。

私たちが、タイトルの値を見るために、3つの方法の1つを使用する場合、私たちは、問題を見つけることができます。値は、私たちが期待するような文字列ではありません。しかし、むしろ、それは、全体のオブジェクトです!タイトルに、カーソルを重ね、そして、他のプロパティをスクロールし、私たちは、全体のオブジェクトそのものの代わりに、オブジェクトの'value'プロパティを参照する必要があることを見つけるでしょう。14行目を修正すると、アプリケーションは、正常に動作します。

私たちが、コードのステップ実行を完了すると、私たちは、スクリプト(が、他のブレークポイントを達成するまで)の実行を再開する'Play/Pause' ボタンを押すことができます。

ふう。それは、多くの情報でした。アプリケーションで、いくつかの他のブレークポイントを追加してみて下さい。そして、ツールバーを使用して、コードをステップ実行します。あなたが、ブレークポイントの基本とコードをステップ実行するのに慣れてくると、あなたは、Debuggerが、どれぐらい、強力であるかを理解し始めます。

あなたの準備ができたら、チュートリアルの次のセクションに進んで、Firefox Debuggerを使ってコードを、どのようにデバッグするかを学んでください。

Firefox開発者ツール:刺激的なヒント

Firefox DevTools: Hot Tip

変数(あるいは、式)の値を監視するもう1つの便利な方法は、サイド・バーのWatch Expressionセクションを使用することです。あなたは、"Add Watch Expression"をクリックして、そして、あなたが、監視したいと思う式(この場合は変数)を入力すると、ウオッチ式を設定することができます。 上記の例を使用して、'title'の式と 'todo'の式を追加してみてください。13行目にブレークポイントを設定します。ブレークポイントを起動するために、新しいToDo項目を追加します。そして、関数のステップ実行を開始します。変数に値が代入されると、値は、 'Watch Expressions'セクションに表示されます。

ウオッチ式を使用する

ウオッチ式を使用する

コールスタック

原文:The Call Stack

次に、私たちのtodoアプリケーションに、いくつかの機能を追加しましょう。この例では、私たちは、タスクを削除するための機能を追加しました。次の新しいタブで、アプリケーションを開きます。:

新しいタブで、ToDoアプリケーションを開きます。

いくつかのタスクを追加してみて下さい。次に、最初のタスクを削除してみてください。それは、動作していると思われます。次に、最後のタスクを削除してみて下さい。ええとああ。何か、正しくありません。一番上のタスクは、私たちが、どのタスクを削除しようとするかに関係なく、毎回、アプリケーションから削除されます。

コードが、どこに行くか確認するために、Debuggerに、飛び込みましょう。app.jsの39行目に、removeSinglefunctionを配置します。これは、タスクの削除を処理する関数です。項目が、削除された直後にトリガーされる、40行目にブレークポイントを挿入します。このブレークポイントを起動するために、私たちのto-doリストで、最後の項目を削除して下さい。次に、私たちは、問題の根源を見つけるために、コードをステップ実行することができます。

先の項目で、私たちは、JavaScriptコードの行をステップ実行するためにどのように、'Step Over'ボタンを使うを学びました。私たちは、ここで、'Step Over'ボタンを使用することができますが、私たちが、spliceItem関数に到達すると、それは、関数を実行するでしょう。そして、その次に、次の行に移動します。これは素晴らしいですが、spliceItem関数の内部に問題がある場合はどうなるでしょう?これは、私たちが、'Step In' ボタンを使う場所です。

ツール・バーの'step in' ボタン

'Step In' ボタンは、'Step Over' ボタンによく似ています。しかし、それは、それを実行して、移動する代わりに、デバッギングのために、関数内で、ステップ実行できるでしょう。私たちが、createList関数を24行目で見つけるまで、'Step In' ボタンを使いましょう。あなたが、何が発生しているか少し混乱していても、気にしないでください。感覚を掴むことです。

createList関数は、リストと呼ばれるオブジェクトを受け取ります。そして、更新されたto-doリストを作成するために、そのオブジェクトを使用します。リスト・オブジェクトに、カーソルを重ねる場合、私たちは、この関数に提供された、ToDo項目のリストを見ることができます。また、まだ、そこに、私たちが、削除する予定の項目を見ることができます。それは、この関数が、間違った情報を提供したを示しています。バグは、この関数ではなく、この関数が呼び出される前のコードのどこかあります。

Firefox Debuggerの右側に、Call Stackと呼ばれるセクションがあります。このセクションは、私たちに、私たちがステップ実行した関数について、関数が、どの行にあるか、そして、私たちが、呼び出したスタックの深さの情報を提供します。あなたが、準拠している場合、あなたは、コール・スタックに、4つの項目が表示されるのを見るでしょう。私たちは、createList関数を呼び出したsaveList関数を呼び出したspliceItem関数で開始しました。

呼出しスタック

呼出しスタック

Call Stackセクションは、私たちが、呼出しスタックを通して戻すことができます。そのため、私たちは、この問題がどこから始まったのかを理解することができます。私たちが、呼出しスタック・セクションで、saveListをクリックする場合、私たちは、それが単純な(そしておそらく不要な)グローバルな項目オブジェクトを取得する、そして、createList関数に、それを渡す関数であることが理解できます。バグは、ここには、ありまません。それで、呼出しスタックで、spliceItem関数をクリックしましょう。あなたは、ここで、問題を見つけますか?インデックス引数が、未定義です!現在、私たちは、どこかで取得しています。

呼出しスタックの中を移動して、バグを見つける

コールスタックから、removeSingle関数に進みましょう。以下を見てください::

const index = el.dataset.number;

インデックス(または数値)に、カーソルを重ねる場合、私たちは、それが、未定義であることがわかります。私たちは、私たちが見たいデータセットに、カーソルを重ねると、numberプロパティが、ありません。インデックスだけがあります。誤植!行は、以下のように伝える必要があります。:

const index = el.dataset.index;

一旦、これが修正されると、すべてが、動作し始めます。

Firefox開発者ツール:刺激的なヒント

Firefox DevTools: Hot Tip

この例では、関数を見つけるのは簡単でしたが、複数のファイルに、50の機能があったらどうでしょうか?ありがたいことに、あなたは、ソース枠で関数を検索することができます。Macでは、shift + command + O、Windowsでは、shift + control + Oを押すだけで、ソース枠に検索フィールドが表示されます。あなたは、提供されたリストから、関数や矢印を検索することができます。

関数の探索

関数の探索

条件付きブレークポイント

原文:Conditional Breakpoints

ブレークポイントは、JavaScriptコードをデバッグするための強力なツールですが、私たちが、ループの中にブレークポイント、あるいは、常に呼び出されている関数を持っている場合、どうなるのでしょうか?私たちのコードの実行を、常に再開する必要があるのは、面倒です。私たちが、ブレークポイントを、いつ起動するかを制御できる場合、遥かに優れています。私たちに、幸運です。Firefox開発者ツールは、条件付きブレークポイントと呼ばれる役に立つ機能を持っています。

条件付きブレークポイントは、私たちが、ブレークポイントで条件を関連付けることができます。プログラムが、条件付きブレークポイントに到達するとき、デバッガは、提供される条件が、trueに評価される場合だけ、一時停止します。

これを理解する最も良い方法は、例です。下のTo-Doアプリを新しいタブで開き、それに沿って続けてください。

新しいタブで、ToDoアプリケーションを開きます。

最初のチュートリアルでは、私たちは、addTodo関数の中に、ブレークポイントを追加しました。このブレークポイントは、役に立つ場合がありますが、私たちが、ToDo項目を追加するたびに、トリガするでしょう。

私たちは、ToDo項目に、"turtle"という単語が含まれているとき、このブレークポイントを起動したいだけです。私たちは、ブレークポイントを追加したい行番号(この場合、24行目)を右クリックことによって、これを行います。そして、メニューから、"Add Conditional Breakpoint"を選択します。

条件付きブレークポイントの作成

私たちは、ここに式を入力できます。以下を試してください:

title.indexOf("turtle") != -1;

指定された値(この場合、"turtle")が見つからない場合、indexOf()メソッドは-1を返すでしょう。これは、文字列に、単語"turtle"が含まれる場合、私たちの条件付きブレークポイントに提供した式が、trueと評価される場合だけを示しています。

私たちは、条件付きブレークポイントに、どんな形式の式でも使用できます。私たちは、さらに、console.logを使うことができます。console.log式は、未定義を返します。それで、それは、実行を一時停止しませんが、まだ、コンソールに出力します。それを試用しましょう。

私たちが、インデックス変数を定義した直後の68行目に、条件付きブレークポイントを追加します。 条件として次のように入力します。:

console.log(items[index].title);

次に、アイテムを削除するたびに、その項目の名前が、コンソールに出力されます。私たちは、console.logを使用する利点の全てを取得します。しかし、私たちは、最終的に削除する必要があるコードを行に散らかすことを気にする必要はありません。

Firefox開発者ツール:刺激的なヒント

Firefox DevTools: Hot Tip

ときどき、デバッガ内よりはむしろ、コード内に、ブレークポイントを定義したいと思う場合があるかもしれません。私たちが、コードからデバッガを呼び出すと、続いて、Firefoxデバッガは、その行で実行を一時停止します。ここに例があります。

const addTodo = (e) => {
  debugger;
  e.preventDefault();
  const title = document.querySelector('.todo__input').value;
  const todoForm = document.querySelector('.todo__add');
  const todo = {
    title,
    done: false,
  };

  items.push(todo);
  saveList();
  todoForm.reset();
}

次のような行が、追加されていることに注目してください。:デバッガ。これは、私たちが、FirefoxのDevToolsからブレークポイントを追加する必要がないことを示しています。

試してみてください。このリンクを開き、Firefox Debuggerを起動します。そして、タスクを追加します。私たちが、コードで、そのブレークポイントを定義したため、実行は、その行で一時停止されます。

詳細

原文:Learn More

上手くいけば、これらのチュートリアルとサンプルを通して、あなたは、Firefoxデバッガが、JavaScriptコードをデバッグするために、どのぐらい強力なものであるかを発見しました。console.logを使用することは、何も問題はありませんが、それは、あなたのツールベルト内の多くのツールの1つでなければなりません。

あなたが、Firefoxデバッガの詳細を学びたい場合、MDNのFirefoxデバッガのドキュメントを確認して下さい。

Mozillaは、最近のReactとReduxを使って、Firefox Debuggerを一から再構築しました。この新しいデバッガは、親しみやすいように設計されていますが、強力です。そして、最も良いところは?、完全にハックできることです。これは、Firefox Quantumで今すぐ利用できます。GitHubのリポジトリーを確認して下さい。

おしまいです!あなたが、まだ行っていない場合、Firefox開発者版を確認して下さい。それは、最新の機能を備え、驚くほど速く、開いているWeb用に構築するために必要なすべての開発ツールが満載されています。

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」