在Visual Studio代碼中調試Ionic 2 - 如何在源文件中命中斷點？

Question

問題：斷點僅在連接的構建文件www \\ build \\ js \\ app.bundle.js中被命中

復制

1. 我啟動模擬器，在模擬器上運行應用程序（這非常有效）

2. 在app文件夾文件中設置一些斷點，例如app/pages/list/list.js

3. 在VS Code> Debug Pane中，我選擇Attach to running Android on Emulator 。 調試器運行並連接。

實際結果

3. 原始源文件中未觸發斷點。 如果我在build js文件www\\build\\js\\app.bundle.js設置它們，它們才會被擊中

關於Sourcemaps的注意事項

在MyIonic2Project\\.vscode\\launch.json ，“附加到模擬器上運行”配置的設置為：

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

---

我的設置

這是一個Ionic 2項目，使用以下方式創建：

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

這與cli命令完美配合：在使用ionic serve發送的Chrome上，使用ionic emulate android模擬器，以及在設備上（HTC One M8），所以這一切都很好:-)

我安裝了最新的Visual Studio Code ，並包含了Cordova工具： ext install cordova-tools

Answer 1

我有額外的信息，但是太長時間無法發表評論，所以作為答案。 如果需要更新，請提供反饋

在Ionic 2論壇中，以下是直接在VSCode TypeScript文件中調試教程的鏈接。

為簡潔起見，使用Ionic CLI擴展。 對於VSCode，還需要Debugger for Chrome擴展。

從Visual Studio代碼調試Chrome中的Ionic 2應用程序 http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

更新 ：請參閱@Kinorsi評論，了解有關使其適用於移動設備的詳細信息

GitHub上有一個相關的問題 - 已Closed ，這可能值得注意。 分辨率是Ionic 2 RC構建系統不再使用gulp。 還有一個關於使用內"ionic_source_map_type": "#inline-source-map" ionic_source_map_type "ionic_source_map_type": "#inline-source-map" ： 無法在Android＃22中的真實移動設備上調試TypeScript源文件

Answer 2

好吧，這個問題有點舊，所以VSCode從此改變了很多。 它現在幾乎就在盒子里，而源圖也可以工作。 用Ionic3測試。

1 - 為Visual Studio Code 安裝Cordova Tools擴展 。

2 - 通過在“調試面板”中選擇“Cordova”環境來生成launch.json文件。

之后，如果您運行“服務器到瀏覽器（離子服務）”，Chrome上的調試就會起作用。

3 - 如果要使其與iOS模擬器或設備一起使用，則需要安裝iOS Webkit調試代理 。

我努力工作這么長時間，我在博客上做了一整篇文章，讓其他人更簡單： https ： //geeklearning.io/live-debug-your-cordova-ionic-application-with-visual-studio -碼/

有了這個，您可以使用Ionic livereload在chrome，模擬器和真實設備上進行調試！ 我有時會遇到一些問題，但我希望這會有所幫助。