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：コンソールを使用します。

方法2：ホバー

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

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

原文：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 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開発者ツール：刺激的なヒント

原文：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開発者ツール：刺激的なヒント

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();
}

原文：Learn More

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

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

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

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