9Chrome と Firefox が標準で提供するデバッグツールを使用した JavaScript デバッグのヒント

私たちは一般的にChromeやFirefoxのデフォルトのデバッグツールを使用してJavaScriptをデバッグします。この記事では、JavaScriptのデバッグに役立ついくつかの技術を紹介しています。これらをマスターすることで、エラーとバグの解決に時間をかけずに、開発効率を向上させることができます。

1debuggerを使用します。

console.logに加えて、debuggerは私たちが最も好きで、速くて簡単なデバッグツールです。コードを実行すると、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は必要なすべてを提供しています。コンソールに移動し、「デバイスモード切替」ボタンをクリックして、ウィンドウの変更を観察してください！

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

特定のコードの実行時間を知ることは、特に遅いループをデバッグする際に非常に役立ちます。さらに、メソッドに異なるパラメータを渡すことで、複数のタイマーを設定することもできます。どう動作するかを見てみましょう：

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

以下のような結果が生成されました：

5コードをフォーマットしてからJavaScriptをデバッグします。

時にはコードがプロダクション環境で問題を起こすことがありますが、あなたのsource mapsはプロダクション環境にデプロイされていません。心配しないでください。ChromeはあなたのJavaScriptファイルをフォーマットすることができます。フォーマットされたコードは実際のコードほど役立ちませんが、少なくとも何が起こっているかを見ることができます。Chromeのコンソールのソースコードビューアの{}ボタンをクリックして確認してください。

6特定の関数の呼び出しとパラメータを観察します。
Chrome コントロールパネルで、特定の関数を観察できます。関数が呼び出されたときには、その引数が印刷されます。

var func1 = function(x, y, z) { 
//.... 
}

出力：

これは、関数に渡される引数を確認する良い方法ですが、コントロールパネルが引数の数を表示する方が良いでしょう。上記の例では、func1が期待されます3のパラメータがありますが、実際には2のパラメータ。このパラメータがコードで処理されていない場合、エラーが発生する可能性があります。

7を快速にアクセスする方法

querySelector より速い方法として、ドル記号を使用して控制台で操作します。$('css-selector')は、CSS 选择子の最初の一致するアイテムを返します。$$('css-selector')は、すべての一致するアイテムを返します。ある要素を何度も使用する場合は、それを変数として保存できます。

8Postman は素晴らしい（しかし Firefox が速い）

多くの開発者が Postman を使用して AJAX リクエストを確認しています。Postman は非常に優れていますが、新しいウィンドウを開き、リクエストオブジェクトを入力してテストするのは面倒です。

時にはブラウザを使用する方が簡単です。

ブラウザを使用して確認する場合、パスワード認証ページをリクエストすると、認証のクッキーを心配しないでください。以下では、Firefoxでリクエストの編集と再送信の方法を見てみましょう。

コンソールを開き、ネットワークタブに切り替えます。必要なリクエストを右クリックして、編集して再送信を選択します。今や、変更したい何でも変更できます。タイトルを変更し、パラメータを編集して、再送信をクリックします。

以下は、異なる属性で2回のリクエストを送信した例です：

9中断ノード更新

DOM は面白いものです。時には変わることもありますが、なぜ変わったのかはわかりません。しかし、JavaScript をデバッグする際には、Chrome が DOM 要素が変更されたときに停止することができます。さらに、その属性を監視することもできます。Chrome コントロールパネルで、その要素を右クリックして、設定から停止を選択します：

Chrome と Firefox が標準で提供するウェブデバッグツールは非常に強力で、多くの非常に実用的な小機能があります。それらを発見するために、皆さんに挑戦します。

基本教程