Hi, iam a little confused what is the proper way to debug ionic application. Are there any special tools, or something like that? Can i somehow use breakpoints and step code, when i run ionic app? So far iam debuging with console.log, but this seems to me ineffective and slow. What are u guys using? Thx for answers
1 Like
Depending on what you are developing on you can use native tools.
For example, I develop on windows. My workflow is something like as follows:
ionic serve
basic changes and inspected with chrome developer tools until I am ready to build natively
boot up android studio
attach android phone
ionic cordova run android
basically builds the package and deploys it to the android phone, which is watchable via logcat in android studio
I believe there is a similar process for Xcode with IOS, but for now you could try just using ionic cordova run ios -lc where -l (L) does livereloads, and c outputs console.log to the terminal window.
ok thx for answer and can i use stepping in android studio too? And are are there any tools in visual code studio? Or in chrome developer tools, so i see errors in ionic code, not in bundled main.js and so on?
To get the Chrome developer tools, when ionic serve is well running you have to make a right click on your Ionic View , then click inspect and you’ll have many usual information accessible by several tabs on the top right panel :
whose console when you can see all the console.log and error message. And whose sources tab to see or interact the css & html.
I’ve recently switched to integrated debugging within vs-code and its cordova plugin. Its cool - it lets you debug within the IDE.
It takes a bit of tweaking to get working but its easy when you set up launch.json properly to create the right profiles. I use it for both debugging on a real device and on simulators.
Obligatory screenshot (tap to see larger version)
can u post or give me link to sem tutorial out this?