web-dev-qa-db-ja.com

Chrome-Angular / TypeScriptのデバッグ-tsファイルに移動する方法

私のangularフロントエンドをデバッグするには、開発ツールをChromeと[ソース]タブで開き、すべてのフォルダーをクリックしてtsファイルに移動し、 tsファイルが見つかったら、ブレークポイントを設定し、アプリケーションの使用に戻ってデバッグを開始します。

これは機能しますが、フォルダをドリルダウンして... tsファイルを探す必要があるのは時間がかかります。プロジェクトが成長するにつれて、さらに時間がかかるようになっています。

また、どのTSファイルがどのページに関連付けられているかを覚えておく必要があります。

ページからtsファイルに直接移動することが可能かどうか誰にもわかりますか？

InspectがHTMLファイルに対して正確に機能する方法で、右クリックしてメニュー項目を選択し、tsファイルに直接移動できるようにしたいと思います。

提案は、プロジェクトが非常に大きいことを考慮する必要があります。いくつかのアドオンを使用しようとしましたが、更新に時間がかかり使用できませんでした。

Tsファイルを見つけてブレークポイントを設定するためにフォルダをドリルダウンすることを避ける方法についてのヒントはありますか？どうすればこれをより速く、効率的な方法で達成できますか？

フェルガル、ありがとう。

angulargoogle-chrometypescriptdebugginggoogle-chrome-extension
15
fergal_dd

手順：

  1. Chromeの開発者ツール（F12）を開きます。
  2. Chrome Dev Toolsで[Ctrl] + [P]を押して、TSファイルを検索して開きます。

また、コードからファイル名をコピーして、検索入力ボックスに貼り付けることもできます。

これが最善のアプローチです。

11
fergal_dd

Angularはwebpackを使用し、すべてのタイプスクリプトファイルがその下にリストされます。ターゲットのTypeScriptファイルを選択するには、Chromeの開発者ツール（F12）。 [ソース]タブに移動し、[webpack：// "->"。 "->" src/app "-> TypeScriptファイル（画像ファイルを参照）を選択します。

次に、tsファイルにデバッグラインマーカーを設定し、通常のJavaスクリプトキーボード（F8、F10、F11など）機能を使用してデバッグします。

enter image description here

25
kumar chandraketu

開発者コンソールを開き、CTRL+Pファイルを見つける

1
Abdus Salam Azad

VSコードでAngularを使用しており、Chromeブラウザでこのステップを実行する場合は、

1）インストール Chromeデバッガー拡張機能

2）インストール後、左ペインにデバッグプラグインアイコンが表示されます。クリックすると、新しいウィンドウが表示されます。

3）次に、「デバッグ」->「構成の追加」を選択します。これにより、事前に値が設定されたLaunch.jsonファイルが作成されます。 URLとポート番号で更新します。

4）コードに戻り、好きなところにブレークポイントを追加します。

5）ターミナルでアプリケーションを起動します（npm start）。左ペインからデバッグプラグインボタンを再度選択します。すべてのブレークポイントがリストされます。

6）[デバッグ]-> [起動Chrome= localhostオプションに対して。これは別のchromeブラウザウィンドウを開き、vscodeでは、Visualに似たデバッグコントロールボタンが表示されます。あるいは、キーボードボタンを使用してコードをデバッグすることもできます。

enter image description here

1
kumar chandraketu