如何調試離子WebApp？

Question

我想在WebStorm中調試我的離子應用程序。 我可以在瀏覽器中運行應用程序。但我該如何調試？

我試過了：ionic serve --debug這似乎沒有觸發任何調試？

如何在瀏覽器中運行時調試應用程序？

Answer 1

有了Chrome，你可以鍵入鉻：//檢查在地址欄中 只要您運行的Android應用，您可以檢查，當你與「離子運行的Android」或「離子仿真機器人」命令

的Android版本，但是，萬畝運行它的應用程序st高於4.3我認爲...

Answer 2

根據documentation有幾種不同的方式來做到這一點。因爲您已經嘗試過ionic serve，您還可以嘗試下列其中一種嗎？

ionic run 
ionic emulate 

run或emulate命令會將應用程序部署到指定的平臺設備/仿真器。您還可以通過添加--livereload選項在指定的平臺設備上運行實時重新加載。實時重新加載功能與離子服務功能類似，但不是使用標準瀏覽器開發和調試應用程序，編譯後的混合應用程序本身正在監視其文件的任何更改，並在需要時重新加載應用程序。這減少了不斷重建應用程序以進行小改動的要求。

希望這得到你去！讓我知道它是如何工作的。

Answer 3

瀏覽器是我做大部分離子調試的地方。你用什麼瀏覽器來進行調試？我使用Chrome並打開DevTools。有一個源選項卡，您可以在其中瀏覽您的應用程序代碼以找到斷點的位置。例如，您可以在單擊事件中的控制器的代碼中設置斷點並逐步執行代碼。然後，您可以使用控制檯執行命令來測試值並檢查對象等。您是否無法完成此項工作？或者，DevTools不熟悉？如果不熟悉，則有可用的資源here。如果不工作，斷點是否沒有被擊中？

Answer 4

我發現this tool非常有用，您可以附上您的設備，並獲得您的Cordova應用程序（適用於iOS和Android平臺）的實時檢查員。

Answer 5

有幾種方法來調試你的離子應用程序。

• 在瀏覽器中，您可以捕獲控制檯中的錯誤。
• 如果您在模擬器或移動設備上模擬您的應用程序，則可以安裝在xcode控制檯中顯示js錯誤的cardova插件。所以你可以模擬你的設備並在xcode上捕獲錯誤。

這裏是你如何添加插件： 科爾多瓦插件添加https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Answer 6

另一種方法是使用ionicLab。它適用於我執行以下步驟：安裝program並在測試之前準備所有項目依賴項。然後，點擊Testing的Serve選項，該選項位於Platform菜單下。項目執行完畢後，點擊預覽欄的箭頭圖標。

結果，離子將拋出一個Chrome的窗口，加載的項目，所以，因爲它是常用的，你可以使用開發者工具。您應該觀看您在項目中使用的JavaScript文件，以便您可以對其進行調試。