クロムデバッガでイオンコードをデバッグするのが非常に難しいことがわかりました。 実際にはangle2のプロジェクトだけですが、イオン成分を含んでいます。 chrome devツールを開いて「ファイルに移動」を選択すると、デバッグしたい.tsファイルが見つかりません。 これは私にとっては不思議です。私はangle2プロジェクトを簡単にデバッグすることができます。 ionic3/angular4を使用してモバイルウェブを開発したいと考えています。 ionicもwebpactを使用していますが、もしそうなら、私はsourcemapを有効にしてからchrome dev toolでデバッグするだけでいいと思います。 イオン性の.tsファイルをchromで正常にデバッグしたことがありますか？chrome開発ツールでionic3のtypescriptコードをデバッグする方法
Visual Studioコードを使用している場合は、デバイス上でデバッグできるようにするCordovaツール拡張機能をインストールすることができます。これはVSCode用の非常に強力なツールです。イオン3と角度4のアプリ。
手順は単純です：
は.vscodeディレクトリから既存のlaunch.jsonファイルを削除し、デバッガに移動し、小さな歯車のアイコンをクリックしてください。
デバッガとしてCordovaを選択します。今
拡張子は実際に、私たちは「デバイス上で実行アンドロイド」で最初のものを必要とするあなたのための12件のconfigsを作成します
、これは私がする（Mac OS Xシエラ）何で、どのように応じて、あなたのシステムにどのコンポーネントをインストールしたら、これが変わる可能性があります。私はアンドロイドスタジオを開き、私のアンドロイドテストデバイスに接続されている私のUSBケーブルを接続します。
私のデバイスがAndroidモニターパネルに表示され、Logcatタブで実行されているデバッグプロセスが表示されたら、私はVSCodeウィンドウに切り替えて、ターミナルで発行します：ionic cordova android runを実行してから、電話で。
アプリケーションがデバイスに表示されたら、VSCodeのデバッグボタンをクリックすると、デバッガが接続されます。
ここでデバッガはブレークポイントに当たって、テストデバイス上で実行されているアプリケーションでタイプコピーコードをデバッグする必要があります。
私はあなたにもChromeデベロッパーツールから直接デバッグすることができると思いますが、それはtsconfig.json内のソース・マップ・ファイルの場所に関するいくつかのより多くの追加のオプションを設定する必要があります。むしろvscodeには便利な機能がたくさんあり、無料で、UIからのIonic 3スニペット、オートコンプリート、CLIコマンドの拡張もできます。