web-dev-qa-db-ja.com

Visual StudioCodeでのデバッグIonic 2-ソースファイルでブレークポイントをヒットする方法は？

問題：ブレークポイントは、連結されたビルドファイルwww\build\js\app.bundle.jsでのみヒットしています

再現

  1. エミュレーターを起動し、エミュレーターでアプリを実行します（これは完全に機能します）

  2. アプリフォルダファイルにいくつかのブレークポイントを設定します。 app/pages/list/list.js

  3. VS Code> Debug Paneで、Attach to running Android on Emulatorを選択します。デバッガーが実行され、接続されます。

実際の結果

  1. 元のソースファイルでは、ブレークポイントはヒットしません。ビルドjsファイルに設定した場合にのみヒットしますwww\build\js\app.bundle.js

ソースマップに関する注記

MyIonic2Project\.vscode\launch.jsonでは、「エミュレーターで実行中のアタッチ」構成の設定は次のとおりです。

"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false

私の設定

これはIonic 2プロジェクトであり、以下を使用して作成されています。

ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial

これはcliコマンドで完全に機能します：on Chrome with ionic serve、エミュレーターはionic emulate Androidを使用し、デバイスでも（HTC One M8）なので、すべて問題ありませんここまで ：-）

最新のVisual Studio Codeをインストールし、Cordovaツールを含めました：ext install cordova-tools

ionic-frameworkvisual-studio-codeionic2
6
Drenai

追加情報がありますが、コメントを入れるには長すぎるので、答えとして入れてください。更新が必要な場合はフィードバックを提供してください。

Ionic 2フォーラムから、VSCodeTypeScriptファイルで直接デバッグするためのチュートリアルへのリンクを以下に示します。

簡潔にするためにIonic CLI拡張機能を使用します。VSCodeのChrome拡張機能にもデバッガーが必要です。

デバッグIonic 2 Apps in Chrome from Visual Studio Codehttp://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

更新：これをモバイルで機能させる方法の詳細については、@ Kinorsiのコメントを参照してください

GitHubに関連する問題があります-これはClosedであり、注目に値するかもしれません。解決策はIonic 2RCビルドシステムはgulpを使用しなくなりました。インラインソースマップの使用に関するコメントもあります"ionic_source_map_type": "#inline-source-map"： TypeScriptソースファイルは、Android＃22 の実際のモバイルデバイスではデバッグできません

7
Drenai

さて、この質問は少し古いので、VSCodeはそれ以来大きく変化しました。今では箱から出してすぐに機能し、ソースマップも機能します。 Ionic3でテスト済み。

1-Visual StudioCode用のCordovaTools拡張機能をインストールします。

2-デバッグパネルで「Cordova」環境を選択して、launch.jsonファイルを生成します。 enter image description here

その後、「ブラウザへのサーブ（イオンサーブ）」を実行すると、Chromeでのデバッグが機能します。

3-iOSシミュレーターまたはデバイスで動作させる場合は、 iOS Webkit Debug Proxy をインストールする必要があります。

私はこの作業を行うのに長い間苦労したので、他の人が簡単にできるようにブログの記事全体を作成しました： https://geeklearning.io/live-debug-your-cordova-ionic-application-with -visual-studio-code /

これにより、Ionic livereload！を使用して、Chrome、シミュレーター、および実際のデバイスでデバッグできます。まだ問題が発生することがありますが、これがお役に立てば幸いです。

6
Mitch