web-dev-qa-db-ja.com

Angular 2エラーとTypeScript-デバッグ方法？

Angular2とTypeScript + Javascriptを学習するプロジェクトを開始しました。私はJavaバックグラウンドから来ています。プロジェクトをデバッグする私のアプローチは、通常、スタックトレース、コンパイルエラー、および大規模プロジェクトでは多くのテストケースの組み合わせです。 tはweb-devの世界に直接変換されるようです;特にAngular2のライブラリと相互作用するコードをデバッグします。

誰かがAngular2で動作するコードをデバッグするために取ることができるアプローチを提案できますか？具体的には; HTML/TSのどの部分が問題を引き起こしているのかをどのように確認できますか？コンソールを確認したところ、Angular2が壊れていることがわかりますが、それ以上の情報は得られないようです。

明確にするためだけに。この特定のインスタンスのヘルプは必要ありません。これらの問題を自分で診断+修正する方法を学びたいです。

debuggingwebtypescriptangular
40
Micheal Hill

Chromeを使用している場合、コンソールの「ソース」タブにブレークポイントを配置できます。これらのブレークポイントは、tsファイルに設定できます。 jsファイルからの情報が必要な場合は、コンソール設定でJavaScriptソースマップのチェックを外すことができます。これにより、jsファイルにブレークポイントを設定できます。

ブレークポイントでは、通常の操作（ウォッチ、スパイ、スタックトレースなど）を実行できます。たとえば、ローカル変数に直接アクセスするコンソールでjsを書くこともできます。

function b(){
    var c = 1;
    // if you put a breakpoint here and type c in the console, it will write "1"
}

特にangular 2では、ライブラリ内の「スローe」行にブレークポイントを追加することができます。より詳細なスタックトレースを取得できます。「...」をクリックすると、スタックトレースでは、エラーの原因となったファイルにアクセスできます。

これは実際のバグです。パフォーマンスのために、「タイムライン」タブで、左上の「記録」ボタンをクリックできます。記録が完了したら（「終了」をクリック）、CPU使用率が表示されます。タイムラインのイベントをズームして、コードのどの部分がリソースを使い果たしているかを確認できます。

「メモリ」チェックボックスをオンにして、メモリを追跡することもできます。

Iframeをデバッグする必要がある場合は、コンソールに「トップフレーム」と言う選択ボックスがあり、これを任意のiframeに設定できます。

重要なことを忘れてしまった場合は、:)に聞いてください。

27
Camille Wintz

Web開発者コンソールを開き、「ソース」セクションに移動します。 「cntrl + p」を押します。検索ボックスが開き、「。ts」と入力してファイルを見つけるか、「myfile.ts」のようにファイルを直接検索します。それを開いて、コードにブレークポイントを直接配置できます。ブレークポイントをjsファイルとVoilaに配置するのと同じように、TypeScriptをデバッグできます。

24
Manohar Prasad

これはAngular2だけに当てはまるとは思いませんが、あなたがJavaのバックグラウンドから来ているのであれば、これは一般的に「JavaScript Webアプリを正常にデバッグする方法」に似ていると思います。

これに関連して、 Chrome Devtoolsページ （Chromeこれには非常にきちんとしたdevtoolsビルドインがあります）を参照することを強くお勧めします。
そのページには、便利なチュートリアルがたくさんあります。具体的には、おそらく Debugging JavaScript に関する記事にあります。条件付きデバッグ、DOM変更のブレーク、キャッチ/キャッチされていない例外のブレークなど、いくつかのクールなヒントがあります。

また、無料で Discover Devtoolsのコードスクールコース を実行するように人々に勧めることもよくあります。

TypeScriptの場合、sourcemapsを有効にすることも確認してください。おそらくご存知のように、TypeScriptはブラウザーによって直接実行されるのではなく、JavaScriptに「コンパイル」（または「トランスコンパイル」と呼ばれる）されています。ただし、トランスコンパイルされたJSをデバッグするのではなく、作成したTypeScriptコードをデバッグする必要があります。ソースマップを有効にするには、tsconfig.json：

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}
7
Juri

Javaの世界から来ている場合、JetBrainsのIntelliJ IDEAを既に使用している可能性があります。その場合、IDEアプリケーションに使用するのと同じインターフェイスを使用して、JavaでJavaScript（およびTypeScript）アプリケーションを直接デバッグできます。

JetBrainsには、役立つ可能性のあるテーマに関する ドキュメント があります。

他の回答で述べたように、Chrome Inspectorのデバッガーも使用できます。個人的には、代わりにIntelliJを使用することをお勧めします。

ワークフローの進め方の例を探している場合は、これをご覧ください Angular2でのWebpackの使用を示すGithubプロジェクト 。

3
Michael Oryl