JavaScript のデバッグ ツールとは何ですか?

デバッグ ツールには次のものが含まれます: 1. Web ブラウザ開発者ツール (コンソール ステートメント "console.log()" の使用、またはデバッガ ステートメントを使用してコードの実行を一時停止するなど)、2. Postman (デバッグ インターフェイス ツール)リクエストを調整し、レスポンスを分析し、問題をデバッグできる 3. エラーを監視し、適切なアクション後のアクションを実行するために必要なすべての情報を抽出するために使用できる Sentry 4. JS コード分析および検出ツール JSHint 5. Firebugこれは、開発者がコードで間違ったエラーを見つけて解決することを発見するのに役立ちます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

アプリケーションの脆弱性は、フロントエンド デバッガーにとっては問題の原因です。フロントエンドに取り組んでいる人なら、アプリケーションの脆弱性を修正することがいかに難しいかをご存知でしょう。

特に JavaScript を使用する場合、小さなエラーのデバッグに数時間かかることがあります。ただし、脆弱性はブラウザ、オペレーティング システム、デバイスにわたって避けられません。

バグに対応するツールは数多くありますが、そのすべてが「バグの悪夢」と言えるわけではありません。一部のツールは他のツールよりも優れたパフォーマンスを発揮します。この記事では、脆弱性の発見、診断、修復のための小さなヘルパーを紹介します。

Web ブラウザ開発者ツール

最新の Web ブラウザには、アプリケーションのデバッグに役立つ強力なツールが付属しています。これは、console.log() を使用したコンソール ステートメント、alert() を使用したポップアップ ウィンドウ、またはコードの実行を一時停止するデバッガー ステートメントのような単純なものにすることができます。これらのツールは、タスク、特にデバッガー ステートメントのデバッグに非常に役立ちます。

ネットワーク インスペクターまたは CSS スタイル インスペクターを使用して、デバッグを簡単かつスムーズにすることもできます。 Google で検索するだけで、ブラウザの開発者ツールについて詳しく知ることができます。

Postman

ほぼすべてのフロントエンド アプリケーションは、JSON 応答とリクエストを送受信します。アプリは API に接続し、認証、ユーザー データ転送、さらには現在地の現在の天気情報の取得などの単純な処理を行うことができます。

Postman は、リクエストとレスポンスのデバッグに最適な JS ツールの 1 つです。 macOS システム、Windows システム、Linux システム用のソフトウェアも提供します。これにより、REST、SOAP、GraphQL リクエストを直接送信することが高速かつ簡単になります。

Postman を使用すると、リクエストを調整し、レスポンスを分析し、脆弱性の問題を修正できます。これは、問題がフロントエンドにあるのかバックエンドにあるのかわからない場合に役立ちます。

sentry

アプリがリリースされると、実行されているさまざまなデバイスで利用できるようになります。どのソフトウェア開発ライフサイクルでも、テストフェーズは標準プロセスとして実装されます。このフェーズには、単体テスト、システム テスト、統合テストなどが含まれます。

ただし、脆弱性を見落として運用環境でそのままにしてしまう可能性は常にあります。リリース後も、誰からも通知されなければ、残っている脆弱性に気づくことはありません。エンド ユーザーが提供された電子メールを通じて脆弱性を報告することはほとんどありません。ここでセントリーが活躍します。

Sentry のようなクラウドベースのエラー ログ システムは、リリース後でもエラー インスタンスをログに記録するのに役立ちます。 Sentry は、利用可能なほとんどのフレームワークをカバーする包括的なソリューションを提供します。

Sentry に適用できる言語とフレームワーク

BrowserStack

BrowserStack は役に立ちますシミュレート ユーザーがエラーに遭遇した正確なコンテキスト。デバイス、オペレーティング システム、ブラウザの強力な組み合わせは絶対に必要です。 Sentry などのエラー ログ ツールを使用すると、これを最大限に活用できます。

エラーをログに記録すると、環境を参照して BrowserStack で再作成することで、正確なシナリオを再現できます。

フリーランサーには低価格を提供し、オープンソース プロジェクトには無料のライセンスを提供します。

JSHint

これは、JS コード ツールのエラーと潜在的な問題を検出する静的コード分析です。これは、開発者が見つけにくい問題を見つけるのに役立ちます。

JSHint は、JavaScript で書かれたプログラムをスキャンし、一般的なエラーと潜在的な脆弱性を報告します。これには、構文エラー、暗黙的な型変換によって引き起こされる脆弱性、変数のリーク、またはその他の問題が含まれる可能性があります。

これは、JSHint の実行を観察するために使用する関数の例です:

Firebug

Firebug は、コード内のエラーを見つけて解決するのに役立つ非常に強力なツールです。

ここでは、Firebug を使用して JavaScript コードを処理します。

まず、ページをロードして Firebug を開く必要があります。

ページのリロードが必要になる場合があります。

#ステータス バーのエラー数

##現在のページにエラーを表示

#エラーの詳細を表示

##コードをステップごとにデバッグします

コードをステップバイステップで実行できます。これはコードのデバッグに非常に役立ちます。

ブレークポイント デバッグを使用する

ブレークポイント デバッグでは、コードの実行を終了できます。コード範囲を指定してエラーを確認できます。 . 指定されたコード範囲内にありません。これはエラーのデバッグに役立ちます。

[ステップ オーバー] ボタンをクリックすると、右側のウィンドウでブレークポイントの実行が終了するまで、Firebug はすべての変数を更新します。

式を使用してブレークポイントを機能させる

条件が true のときにブレークポイントが停止するように式を作成できます。コードの実行。

Fiddler

Fiddler はローカル プロキシ サーバーであり、ブラウザはローカル プロキシ サーバーとして設定する必要があります。プロキシ サーバー インターネットをサーフィンするときにのみ使用できます。Fiddler はすべてのブラウザ要求を監視し、ブラウザ要求にデータを挿入する機能を備えています。 Web フロントエンド開発のプロセスでは、fiddler が最も一般的に使用されるデバッグ ツールです。ほとんどの場合、フィドラーのデフォルト メニューの機能は基本的に開発者のデバッグ ニーズを満たすことができますが、より複雑なデバッグ シナリオを満たす必要がある場合、フィドラー メニューだけでは開発者のデバッグ要件を満たすことができなくなります。

ユーザーが http リクエストのヘッダーまたは http リクエストの応答ヘッダーを変更する必要がある場合、ブレークポイントを設定することしかできません。ブレークポイントを設定するには 2 つの方法があります:

最初の方法 : Fiddler を開き、[ルール] -> [自動ブレークポイント] -> [リクエスト前] をクリックします (この方法ではすべてのセッションが中断されます)。ブレークポイントを削除するには、[ルール] -> [自動ブレークポイント] -> [無効] をクリックします。

2 番目: コマンド ラインにコマンドを入力します: bpu http://www.qq.com。このメソッドは http://www.qq.com のみを中断します。ブレークポイントを削除する方法は Enter です。コマンドラインのコマンド bpu。

しかし、これら 2 つのメソッドはプログラムがブレークポイントに達すると停止するため、再起動するには「完了まで実行」をクリックする必要があり、非常に不便です。さらに、http リクエストの URI は、フィドラーのメニュー機能を使用して変更することはできません。このとき、Fiddler Script の利点が反映されます。Fiddler Script の本質は、実際には JScript.NET 言語で書かれたスクリプト ファイル CustomRules.js です。構文は C# に似ています。CustomRules.js を変更することで、 http リクエストとレスポンスは、プログラムを中断することなく、異なる URI に対する特別な処理を実行することもでき、また、開発者のニーズに応じてメニューをカスタマイズすることもできます。

HttpWatch

HttpWatch は商用ソフトウェアであり、プラグインの形式でブラウザに組み込まれています。ウェブスニファー。 【関連する推奨事項: JavaScript ビデオ チュートリアル

、

基本プログラミング ビデオ

]

以上がJavaScript のデバッグ ツールとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。