Java >> Java チュートリアル >  >> Java

簡単なヒント:Chrome 開発ツールを使用して GWT アプリケーションをデバッグする

デバッグは、ソフトウェア開発の重要な側面です。適切なツールを使用すると、多くの時間と頭痛の種を節約できます。 GWT Super Dev モードの前は、クラシック Dev モードで JVM デバッグを使用できました。開発者は、IDE 内にブレーク ポイントを設定し、デバッグ モードを使用してバグやエラーを追跡できます。スーパー開発モードでは、状況が異なります。アプリケーション全体がブラウザ内でコンパイルおよび実行されるため、JVM デバッグを使用することはできなくなりました。頭に浮かぶ質問は、ブラウザで Java をデバッグすることは可能かということです。幸いなことに、答えはイエスです。
原則として、ブラウザは JavaScript の実行とデバッグのみを行うことができます。この欠点を克服するために、ソース マップが導入されました。ソース マップは、ソース言語からターゲット言語へのマッピングの青写真として機能します。ソース マップはさまざまな言語に使用でき、縮小された JavaScript と縮小されていない JavaScript の間のマッピングにも使用できます。この投稿では、ソース マップと Chrome 開発ツールを使用してアプリケーション エラーをデバッグします。例として、実行時エラーが発生する Polymer-starter-kit を使用します。エラーは次のとおりです

このエラーによってアプリが壊れることはありませんが、原因を知ることが重要です。

ソース マップなし:

ソース マップを有効にせずにソースにアクセスしようとすると、ソース コードでエラーが発生している場所を特定できません。

ソース マップの有効化:

これを克服するには、ソース マップを有効にする必要があります。 Chrome でソース マップを有効にするには、[設定] -> [ソース] -> [JavaScript ソース マップを有効にする] に移動します。通常、ソース マップは GWT コンパイラによってデフォルトで生成されます。そうでない場合は、.gwt.xml で次のプロパティを設定すると、それらをアクティブにすることができます:

 

ブレークポイントを有効にすると、エラーが .js ファイルではなく .java ファイルを指していることがわかります。

ブレークポイントの設定:

エラーが発生した場所がわかったので、ブレークポイントを設定してアプリケーションの状態を調べることができます。ブレークポイントは、エディターで行番号をクリックするだけで簡単に設定できます。

エラーの追跡:

最後に、アプリケーションを更新できます。アプリケーションは、ブレークポイントに到達すると停止します。次に、コール スタックと変数の値を調べます。

これで、エラーがコードで正確に発生したことがわかりました。ステートメントを誤用したかどうかを確認できます。この場合、役に立たないこの行を削除するだけで十分でした。

Chrome ワークスペースの使用 (オプション)

Chrome ワークスペースを使用すると、ブラウザによって読み込まれたファイルをディスク上のファイルにマッピングし、Chrome からファイルを直接変更できます。これは、IDE の支援が必要なく、ブラウザと IDE を行き来したくない場合に便利です。 Chrome ワークスペースを利用するには、左側の [ソース] タブのスポットを右クリックして空白にし、[フォルダーをワークスペースに追加] をクリックします。次に、開いたファイルを右クリックして、「ファイルシステムリソースにマップ」をクリックします。詳細については、https://developers.google.com/web/tools/setup/setup-workflow をご覧ください。

まとめ:

ソース マップを使用してブラウザーで GWT アプリをデバッグすると、多くの時間を節約でき、エラーを適切に追跡するのに役立ちます。 Chrome Dev ツールは、生産性の向上とバグの迅速な解決に役立つ強力なデバッグ ツールを提供します。 HTTP リクエストや DOM の変更のデバッグなど、より高度なデバッグ機能が Chrome Dev ツールによって提供されます。それらを調べたい場合は、Google のユーザー ガイドにアクセスしてください:https://developers.google.com/web/tools/ chrome-devtools/javascript/ブレークポイント

注目: DevTools:State of the Union 2017 (Google I/O '17)

Java タグ