JavaScript のデバッグ方法とテクニックの簡単な分析_JavaScript テクニック

JavaScript は JS と略され、Web ページのフロントエンド開発言語であり、ブラウザ上で直接実行されます。私が最初に学習し始めたときは理解できなかったので、開発またはデバッグするたびに理解できませんでした。実際、JS はサーバー上ではなくブラウザ上で実行されるため、Web 開発ソフトウェアでデバッグする必要はありません。ブラウザで直接

ブラウザ開発者ツール

私の個人的なお気に入りは Chrome デベロッパー ツールです。 Safari と Firefox は Chrome の高い基準を満たすことはできませんが、徐々に改善されています。 Firefox では、Firebug と Firefox 開発者ツールを一緒に使用できます。 Firefox チームが組み込みの開発者ツールの改善に優れ続ければ、Firebug はいつか時代遅れになるかもしれません。

個人的な好みはさておき、ターゲット ブラウザで任意のコードを実験およびデバッグできる必要があります。ターゲット ブラウザには、有名な IE8 が含まれている場合と含まれていない場合があります。

選択した開発者ツールについてよく理解してください。 IDE (統合開発環境) またはサードパーティ ソフトウェアから追加のデバッグ サポートを受けることもできます。

さまざまなデバッグ ツールにおいて、デバッグの基本的な知識は同じです。実際、私は 90 年代に Borland の C 開発環境からデバッグの基礎を学びました。ブレークポイントと条件 ブレークポイントとモニタリングは、最新バージョンの Chrome デベロッパー ツールとまったく同じです。 2000 年頃、私は Java で最初の例外をキャッチしました。スタック トレースの概念は依然として適用されており、JavaScript の用語ではスタック トレースをエラーと呼んでいますが、スタック トレースの検査はこれまでと同様に役に立ちます。

いくつかの知識ポイントはフロントエンド開発に固有です。例:

DOM 検査
DOM ブレークポイント
デバッグイベント
メモリリーク分析
ブレークポイント

デバッガ ステートメントを使用して、ソース コードにブレークポイントを追加します。デバッガ ステートメントに到達すると、実行は中断されます。現在のスコープのコンテキストが、すべてのローカル変数およびグローバル変数とともにコンソールに表示されます。マウス カーソルを変数の上に移動すると、その値が表示されます。

コード内に条件付きブレークポイントを作成することもできます:

JavaScript

if (condition) {
  debugger;
}

必要に応じて、開発者ツールにブレークポイントや条件付きブレークポイントを挿入することもできます。 Chrome 開発者ツールで、[ソース] ビューの行番号をクリックしてブレークポイントを追加します。ブレークポイントを右クリックして [ブレークポイントの編集] を選択すると、ブレークポイント条件を追加することもできます。

ノード変更のブレークポイント

タスクがガベージ コードをデバッグすることである場合、次の疑問が生じるかもしれません。実行中に DOM ノードが変更されるのはなぜですか。 Chrome 開発者ツールは、要素ツリー内のノードの変更を検出するために使用できる便利なブレークポイントを提供します。

Elements ビューで、要素を右クリックし、右クリック メニューから [Break on...] を選択します。

DOM ブレークポイントのタイプには次のものがあります:

選択したノードのサブツリー内のノードが変更されます。
選択したノードのプロパティが変更されます。
ノードが削除されます。

参照型のログを避ける

オブジェクトまたは配列を記録する場合、参照オブジェクト レコード内のプリミティブ型の値が変更される場合があります。参照型を表示するときは、記録および表示中のコードの実行が観察された結果に影響を与える可能性があることに留意することが重要です。

たとえば、Chrome デベロッパー ツールで次のコードを実行します。

JavaScript

var wallets = [{ amount: 0 }];
setInterval( function() {
  console.log( wallets, wallets[0], wallets[0].amount );
  wallets[0].amount += 100;
}, 1000 );

2 番目と 3 番目の属性の記録された値は正しいですが、最初の属性のオブジェクト参照の値は信頼できません。金額フィールドの値は、開発者ツールでこのプロパティを最初に表示したときにすでに決定されています。同じ参照を何度閉じて再度開いても、この値は変わりません。

レコード参照タイプ

何を録音しているかを常に覚えておいてください。プリミティブ型をログに記録する場合は、ブレークポイントを含むウォッチ式を使用します。非同期コードの場合は、参照型の文書化を避けてください。

テーブルレコード

一部の開発者ツールでは、console.table を使用してコンソール内のオブジェクトの配列を記録できます。

Chrome デベロッパー ツールで次のコードを実行してみてください:

JavaScript

console.table(
  [
    { 
      id: 1, 
      name: 'John', 
      address: 'Bay street 1'
    }, 
    {
      id: 2, 
      name: 'Jack', 
      address: 'Valley road 2.'
    }, 
    {
      id: 3, 
      name: 'Jim', 
      address: 'Hill street 3.' 
    }
  ] );

输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此， console.table 只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击 + 图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。

事件监听器断点

Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。

异常时暂停

Chrome开发者工具可以在抛出异常时暂停 执行 JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。

 

异常时暂停

Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。

如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试 技巧教给你 的同事。

Paul Irish发布过一些基本的 调试代码片段 ，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是 很有价值的 。

在函数执行前插入断点

如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试 f 函数，用 debug(f) 语句可以增加这种断点。

Unminify最小化代码

（ 译者注：unminify 解压缩并进行反混淆 ）

尽可能使用 source map。有时生产代码 不能使用 source map，但不管怎样，你都  不应该直接对生产代码进行调试 。

（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）

如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮 {} 位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。

格式化按钮只有在不得已时才会使用。从某种意义上来说， 丑代码就是难看，因为代码中的命名没有明确的语义 。

DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了 A 元素、 B 元素和 C 元素，

$0   表示 C 元素
$1 表示 B 元素
$2 表示 A 元素

如果你又选择了元素 D ，那么 $0 、 $1 、 $2 和 $3 分别代表 D 、 C 、 B 和 A 。

访问调用栈

JavaScript

var f = function() { g(); } 
var g = function() { h(); }
var h = function() { console.trace('trace in h'); }
f();

Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

性能审查

性能 审查 工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显著优化。

审查工具举例：

Chrome开发者工具的Audit标签页
YSlow

熟能生巧

你可能熟悉某些调试技巧，其他 技巧 也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。