角2の誤差と型文字 - どのようにデバッグするのですか？

Question

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

Angular2を使用しているコードをデバッグするために私が取ることができる方法はありますか？具体的には、 HTML/TSのどの部分が問題を引き起こしているのか、どのように確認できますか？私はAngular2を壊してしまったことがわかるコンソールを確認しましたが、それよりはるかに有益なようには思えません。

私はこの特定のインスタンスのための助けを望んでいません。私は自分自身でこれらの問題を診断+修正する方法を学びたいと思います。

Answer 1

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" 
} 

具体的な角度2に、あなたは自分のライブラリーに「スローE」の行にブレークポイントを追加したい場合があります、あなたがより多くを得るでしょう詳細なスタックトレース。スタックトレース内の "..."をクリックすると、エラーの原因となったファイルにアクセスできます。

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

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

iframeをデバッグする必要がある場合は、コンソールに「トップフレーム」と表示されているiframeに設定できる選択ボックスがあります。

私が何か重要なことを忘れてしまったら、ただ質問してください:)。

Answer 2

これはAngular2のためのものではないと思いますが、あなたがJavaのバックグラウンドから来ているとすれば、これは一般的に「どのようにJavaScript Webアプリケーションを正常にデバッグするか」のように思えます。

これに関連して、Chrome Devtools pageをご覧になることを強くお勧めします（非常にきちんとしたdevtoolsビルドインを備えたChromeを使用する場合）。
このページには多くの便利なチュートリアルがあります。具体的にあなたのケースDOMの変更に壊し、条件付きデバッグのようないくつかのクールなティップスを持ってDebugging JavaScriptにおそらく記事、でも上破るキャッチ/キャッチされない例外など

に私はまた、多くの場合のようにいいです無料Code School course on Discover Devtoolsを行うために人々を提案しますよく

TypeScriptの場合は、がソースマップを有効にしていることも確認してください。おそらくあなたが知っているように、TypeScriptはブラウザによって直接実行されるのではなく、むしろJavaScriptに "コンパイルされている"（または "transpiled"と呼ばれる）ようになっています。つまり、翻訳されたJSをデバッグするのではなく、あなたが書いたTypeScriptコードをデバッグしたいと思うでしょう。sourcemapsを有効にするには、あなたのtsconfig.jsonに適切なフラグを設定：あなたはJavaの世界から来ている場合は

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

Answer 3

、すでにジェットブレーンズからのIntelliJ IDEAを使用している可能性が高いと言えます。その場合は、Javaアプリケーションで使用するのと同じインターフェイスを使用して、IDEで直接JavaScript（およびTypeScript）アプリケーションをデバッグすることができます。

JetBrainsは、参考になると思われる件に関してsome documentationです。

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

ワークフローの流れの例を探している場合は、Github project that shows the use of Webpack with Angular2をご覧ください。

Answer 4

ウェブデベロッパーコンソールを開いて、[ソース]セクションに移動します。 「cntrl + p」を押します。検索ボックスが開き、 ".ts"と入力してファイルを検索するか、 "myfile.ts"のようなファイルを直接検索します。それを開き、ブレークポイントをコードに直接入れることができます。私たちがjsファイルとVoilaにブレークポイントを置くのと同じ方法で、Typescriptをデバッグすることができます。