Extjs-debugging-code

提供:Dev Guides
移動先:案内検索

Ext.js-Ext JSコードのデバッグ

JavaScriptコードは、* alert()ボックスまたは console.log()*を使用して、またはデバッガーのデバッグポインターを使用してデバッグできます。

アラートボックス

フローまたは変数値を確認するコードにアラートボックスを配置します。 たとえば、alert( 'show message to show' + variable);

開発/デバッグツール

デバッガは、開発者が開発中にコードの問題とエラーをチェックするための最も重要なツールです。

Ext JSはJavaScriptフレームワークであるため、さまざまなブラウザーによって提供される、またはさまざまなブラウザーに固有の開発者ツールを使用して簡単にデバッグできます。 すべての主要なブラウザには、JavaScriptコードをテストおよびデバッグするための開発者ツールが用意されています。

人気のあるデバッガーは、IE用のIE開発ツール、firefox用のfirebug、およびChromeブラウザー用のchrome開発ツールです。

ChromeデバッガーにはChromeブラウザーが付属していますが、firebugにはパッケージとして付属していないため、firebugを特にインストールする必要があります。

以下は、Firefoxブラウザ用のfirebugをインストールするためのリンクです。http://getfirebug.com

Windows OSで開発ツールを開くショートカットは、F12キーボードキーです。

デバッガーでのJSコードのデバッグ

JavaScriptコードをデバッグするには2つの方法があります。

  • 最初の方法は、コードに* console.log()*を配置し、ログの値を確認することです。これは、開発ツールのコンソールに出力されます。
  • 2番目の方法は、開発ツールでブレークポイントを使用することです。 プロセスは次のとおりです。
  • scriptタグの下にある利用可能なすべてのスクリプトでファイルを開きます。
  • 次に、デバッグする行にブレークポイントを配置します。
  • ブラウザでアプリケーションを実行します。
  • ここで、コードフローがこの行に到達するたびに、ユーザーがキーF6(コードの次の行に移動)、F7(関数内に移動)、またはF8(移動)デバッグするフローに基づいて、次のブレークポイントに進むか、ブレークポイントがもうない場合はコードを実行します)。
  • 値を表示する変数または関数を選択できます。
  • コンソールを使用して、値を確認したり、ブラウザ自体の一部の変更を確認したりできます。