あなたが知らない JavaScript のデバッグのヒント

ある種のコードを使用する場合は、まずツールを理解する必要があります。一度慣れてしまえば、タスクを完了するのに非常に役立ちます。この記事では、あなたが知らない JavaScript のデバッグ スキルについて説明します。JavaScript のデバッグは非常に面倒ですが、コツをマスターすれば、これらのエラー (バグ) をできるだけ短時間で解決できます。意外と知らないJavaScriptのデバッグスキルをマスターしていただければ幸いです。コードを蓄積する旅をさらに一歩進めます。

皆さんが知らないかもしれない 14 の デバッグのヒント をリストしますが、一度知ってしまえば、次回 JavaScript コードをデバッグする必要があるときにすぐに使いたくなるでしょう。

今すぐ始めましょう。

テクニックの多くは他の検査ツールでも使用できますが、そのほとんどは Chrome Inspector と Firefox で使用されます。

1. ‘debugger;’

‘debugger’ は、console.log に次いで私のお気に入りのデバッグ ツールで、シンプルで暴力的です。コードに記述するだけで、Chrome が実行されるとそこで自動的に停止します。必要な場合にのみ実行されるように、条件ステートメントでラップすることもできます。

if (thisThing) {
    debugger;
}

2. オブジェクトをテーブルに出力する

表示する必要のあるオブジェクトが大量にある場合があります。 console.log を使用して各オブジェクトを出力することも、console.table ステートメントを使用してオブジェクトをテーブルに直接出力することもできます。

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];
 
console.table(animals);

出力結果:

3. あらゆるサイズの携帯電話をテーブルに置くのはクールに見えますが、これは非常に非現実的です。インターフェースのサイズを変更するだけではどうでしょうか。Chrome には必要なものがすべて揃っています。 インスペクターに移動し、「デバイスモードの切り替え」ボタンをクリックすると、ウィンドウのサイズを変更できます。

4. DOM 要素を素早く見つける方法

要素パネルで DOM 要素をマークし、コンソールでそれを使用します。 Chrome Inspector の履歴には、最後の 5 つの要素が保存されます。最後にマークされた要素は $0 としてマークされ、最後から 2 番目にマークされた要素は $1 としてマークされます。

要素を「item-4」、「item-3」、「item-2」、「item-1」、「item-0」として順番にマークすると、DOM ノードを取得できますconsole:

5. console.time() と console.timeEnd() を使用してループ時間をテストします

特定のコードの動作を知りたい場合はこのツール実行時間に関して、特に時間のかかるループを特定する場合に非常に役立ちます。タグを介して複数のタイマーを設定することもできます。デモは次のとおりです:

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd(&#39;Timer1&#39;);

実行結果:

6. 関数のスタックトレース情報を取得します

JavaScript フレームワーク大量のコードを迅速に生成します。

イベントを起動するビューが作成され、関数呼び出しがどのように行われたのか疑問に思うことになります。

JavaScript はあまり構造化された言語ではないため、何がいつ起こっているのかを完全に理解することが難しい場合があります。 この時点で、JavaScript をデバッグするのは console.trace (ターミナル内のトレースのみ) の出番です。

ここで、33 行目で funcZ 関数を呼び出している car インスタンスの完全なスタック トレース情報を確認したいとします。

var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
var car; 
var func1 = function() {
func2();
} 
var func2 = function() {
func4();
}
var func3 = function() {
} 
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
 this.funcZ = function() {
console.trace(‘trace car’)
}
} 
func1();

33 行目は次のように出力します。

你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。

尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。

7. 格式化代码使调试 JavaScript 变得容易

有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。

8. 快速找到调试函数

来看看怎么在函数中设置断点。

通常情况下有两种方法：

1. 在查看器中找到某行代码并在此添加断点
2. 在脚本中添加 debugger

这两种方法都必须在文件中找到需要调试的那一行。

使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。

这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。

var func1 = function() {
func2();
};
 
var Car = function() {
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
}
 
var car = new Car();

在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：

9. 屏蔽不相关代码

如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。

10. 在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。

现在，可以自己美化调试信息了。在调试JavaScript时，可以使用CSS并自定义控制台信息：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

输出：

例如：

在console.log()中， 可以用%s设置字符串，%i设置数字，%c设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！

11. 查看具体的函数调用和它的参数

在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。

var func1 = function(x, y, z) {

//....

};

然后输出：

これは、関数に渡されるパラメーターを確認する優れた方法です。しかし、必要なパラメータの数をコンソールが教えてくれればいいのに、と言わざるを得ません。上記の例では、関数 1 は 3 つのパラメーターを予期しますが、渡されるパラメーターは 2 つだけです。コード内で処理しないとバグが発生する可能性があります。

12. コンソール内の要素に素早くアクセスする

コンソールで querySelector を実行する より速い方法は、ドル記号を使用することです。 $(‘css-selector’) は、最初に一致した CSS セレクターを返します。 $$(‘css-selector’) はすべてを返します。要素を複数回使用する場合は、変数として扱う必要があります。

13. Postman は素晴らしいです (ただし Firefox の方が高速です)

多くの開発者は Ajax リクエストを処理するために Postman を使用しています。 Postman は非常に優れていますが、毎回新しいブラウザ ウィンドウを開いて、テストする新しいリクエスト オブジェクトを作成する必要があります。これは実際には少し面倒です。

場合によっては、使用しているブラウザを使用する方が簡単な場合があります。

これにより、パスワードで保護されたページをリクエストしたい場合に、Cookie の検証について心配する必要がなくなります。これは、Firefox でリクエストを編集して再送信する方法です。

プロファイラーを開いてネットワーク ページに移動し、処理するリクエストを右クリックして、[編集して再送信] を選択します。これで、必要に応じて変更できます。ヘッダー情報を変更するかパラメータを編集して、「再送信」をクリックします。

今度は、異なるパラメータを使用して同じリクエストを 2 回送信します。

14. ノード変更の中断

DOM は興味深いものです。時々状況が変わってしまうのですが、その理由がわかりません。ただし、JavaScript をデバッグする必要がある場合、DOM 要素が変更されたときに Chrome が処理を一時停止することがあります。そのプロパティを監視することもできます。 Chrome プロファイラーで要素を右クリックし、[Break on] オプションを選択して使用します

上記は、JS を使用するためのヒントです。共通の研究をしている友人は、一緒にそれについて話し合うことができます。

関連書籍:

JavaScriptとECMAScriptの違い

ドロップダウンメニューのJavaScript実装の例

JavaScript 面接の質問 24 選

以上があなたが知らない JavaScript のデバッグのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。