Chrome Firefox にはデバッグ ツールが付属しています (詳細なチュートリアル)

この記事では主に、Chrome と Firefox の組み込み Web デバッグ ツールを使用して JavaScript をデバッグするための 9 つのテクニックを紹介します

通常、JavaScript をデバッグするには Chrome または Firefox に付属のデバッグ ツールを使用します。これらをマスターすることで、エラーやバグの解決に費やす時間が短縮され、開発効率が向上します。

1. デバッガー

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. 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;);

この操作により、次の結果が生成されます:

5. JavaScript をデバッグする前にコードをフォーマットします

場合によっては、実稼働環境でコードに問題が発生することがありますが、ソース マップはデプロイされません。本番環境。恐れることはありません。 Chrome では JavaScript ファイルをフォーマットできます。フォーマットされたコードは実際のコードほど役に立ちませんが、少なくとも何が起こっているかを確認することはできます。 Chrome コンソールのソース コード ビューアで {} ボタンをクリックするだけです。

6. 特定の関数の呼び出しとパラメーターを観察します
Chrome コンソールで、特定の関数を観察できます。この関数が呼び出されるたびに、渡されたパラメータが出力されます。

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

出力:

これは、関数に渡されたパラメーターを確認する優れた方法です。ただし、コンソールで仮パラメータの数を入力するよう求められた方がよいでしょう。上記の例では、func1 は 3 つのパラメーターを予期しますが、渡されるパラメーターは 2 つだけです。このパラメーターがコード内で処理されない場合、エラーが発生する可能性があります。

7. コンソールで要素に素早くアクセスする

コンソールで querySelector よりも速い方法は、ドル記号を使用することです。$('css-selector') は、CSS セレクターの最初の一致を返します。 $$('css-selector') は一致するものをすべて返します。要素を複数回使用する場合は、変数として保存できます。

8. Postman は優れています (ただし、Firefox の方が高速です)

多くの開発者は、Ajax リクエストを表示するために Postman を使用しています。ポストマンって本当にすごいですね。しかし、新しいウィンドウを開いてリクエスト オブジェクトを作成し、それを再度テストするのは面倒に思えます。

ブラウザを使用する方が簡単な場合もあります。

ブラウザで閲覧する場合、パスワード認証ページをリクエストすれば、認証Cookieを気にする必要はありません。 Firefox でリクエストを編集して再送信する方法は以下を参照してください。

コンソールを開き、ネットワークタブに切り替えます。目的のリクエストを右クリックし、「編集して再送信」を選択します。これで、必要に応じて変更できます。タイトルを変更し、パラメータを編集して、「再送信」をクリックします。

異なる属性で開始した次の 2 つのリクエスト:

9. ノード変更の中断

DOM は興味深いものです。時々状況が変わってしまうのですが、その理由がわかりません。 ただし、JavaScript をデバッグする場合、DOM 要素が変更されると Chrome が一時停止することがあります。そのプロパティを監視することもできます。 Chrome コンソールで要素を右クリックし、[設定のブレークイン] を選択します:

上記は私がまとめたテキストです。皆様のお役に立てれば幸いです

関連記事:

Vue.jsで折りたたみ可能なツリーメニューを実装する方法

zTreeツリーメニューの使用方法

vue + elementでテーブルページングを実装する方法

以上がChrome Firefox にはデバッグ ツールが付属しています (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。