Unfortunately, source maps for (Angular-based) Ionic applications don't work, so you're stuck with transpiled and bundled JavaScript code which makes the debugging experience much worse. On the Sources tab, you can navigate the sources and set breakpoints to break the application execution. Wait for device discovery to complete and click on the inspect link under the entry corresponding to the device and the application you want to debug. Navigate to chrome://inspect in Chrome (or edge://inspect in Edge) To attach the debugger to a running application, follow these steps:
Since they are both based on Chromium, they offer a very similar experience and the choice is a matter of personal preference. Which leaves Chrome and Edge DevTools as the only available options for debugging. Unfortunately, there's currently no Visual Studio Code extension with such functionality for Capacitor.
From here on, you can set breakpoints, inspect variables, and do everything else that the Visual Studio Code debugger supports.Īs expected, these configurations don't work with Capacitor applications. When the application is running, select Attach to running android on device or Attach to running android on emulator to attach the debugger to it. This will add a long list of launch configurations for Cordova apps. In the Run pane click on the create a launch.json file link and select Cordova from the list of choices. While the different approach to handling native source code in Capacitor has its advantages, the debugging experience for the TypeScript part of the applications leaves a lot to be desired.įor Cordova apps, Visual Studio Code users can install the Cordova Tools Extension and debug the Ionic application running on an Android device directly inside the text editor with minimum configuration effort:
Ionic documentation is increasingly recommending Capacitor over Cordova as the native runtime environment for running the applications on mobile devices.
0 kommentar(er)
