I am new to ionic so I’m trying to evaluate the overall workflow to see if this is a good fit for our new project. I really like what I see overall but have one issue when debugging.
I created a simple template app using: ionic start myApp tabs --type react
I then tried debugging small changes when running the Android and Web targets. I simply make a small change to the text. The hot reload works well for both targets but I have a question regarding the source code within the debugger. The source code displayed is the compiled/expanded version of the React code and is a mess to debug. Is it possible to only debug from the original source code (i.e. pre-compiled)? When debugging with React Native the file looks just like the original file from my editor–hot reloading RN is less consistent.
I do realize that ionic keeps the original file (e.g. Tab1.tsx) in the file listing within the Chrome debugger. However, this file does not get updated with the change(s). Instead, a new file with a timestamp is created with my latest code; however, this is the compiled code as well. I also notice the devtools (non-web target) does show the original file with a “? [sm]” appended to the file name. However, this file is not updated with every change as well.
My overall question is this, can I debug the latest changes to my source and see them in the debugger as they appear in the editor (i.e. not compiled)? Any help or suggestions would be appreciated. Thanks.
Below is an example of the debugger source code (above) and the editor source code (below).
Below is an example of the DevTools file naming.
For comparison the below image is React code within the React Native debugger session.
