The Ultimate Ionic Debugging Guide (Browser & Native Apps)

Being able to debug your Ionic application correctly can save hours of your development time. I will show you everything you need to fix your bugs more quickly on any given platform using Capacitor!

#############################

👨‍💻Want to read instead of watch?

🤷‍♂️Want more Ionic tutorials?

⚡️Take my 7 Day Ionic Crash Course

#############################

❤️You can also find me...

#############################

[JerrySCFuels]

Very helpful video! I've also watched your other tutorial videos on Capacitor Google Maps Plugin with Ionic. Now the Debugger for Chrome is deprecated in Visual Studio Code. What tools would you suggest to use to debug? Thank you!

[cspanda]

Please let us know about how to debug the code if we have build using cordova

[Meliovation]

Thanks so much for the helpful and easy to follow introduction on all the many options. Since debugging Ionic apps is such a critical and unique topic, I hope that you create more detailed videos - for Android and iOS.
The workflow from VSCode to Android Studio to Virtual Device to Physical Device (plus Chrome debugging) offers so many options to debug code before deployment. There is so much to learn best practices including debugging app databases plus API calls on a real or virtual device. Cheers!

[peterchapman]

Thanks again Simon! As you asked, I now always use Vscode for debugging, as (for me) it is good to debug the in the same view I may then edit. Using Cordova tools (still using Cordova as I also need Windows support), I also debug in Vscode to debug in the device if I ever need to (though have never found out how to do this on Windows). I had never though how to debug the plugins though, so this thankyou for showing that!

[TpMobileMarine]

Hey Simon, a workaround for the crashing Safari Web Inspector should be to use the Safari Technology Preview which has a higher limit for JS code.
And many thanks for all your valuable videos! :)

[Technbuzz]

I tried using the chrome debugger tool, it works well but sometime it becomes too much. The editor becomes slow, kinda comes in a way. Eventually I turned to chrome browser for it's debugging.
Similarly the vscode terminal works best but again Linux philosophy (each software = one well job) applies here, Use separate terminal like the new Windows Terminal works well in conjuction and VSCode fells much lighter.

[dominicbachmann]

Thats exaclty what i was i need for at the moment😄 Great video, thank you!

[sebastian-kzfv]

Hi, I’m new on using mac and learning how to develop android and ios with ionic.
I recently purchased a macbook pro with m1 chip, for enabling usb debugging I need to connect my mobile devices into the mac. however, I don’t have the cable yet that connect from lightning type to type c (iphone) and type C to type C (android). That’s why I need an adapter that could connect those 2 devices into this mac and could run debugging mode simultaneously. could you please help me provide a link of adapter product that works on mac m1 and could do usb debugging?
thanks a lot !
Sorry for my bad english.

[dercilioafontes]

Hi Simon,

What is the name of the tool you suggest at 12m:55s for having a network URL? Engine Rock? I could not find something with that name.

[Devil-lygi]

I'm able to build apk file but my app is not working. InAppBrowser is not working in android Can you please help me to resolve it ?

[ElteHupkes]

Does anybody know what VSCode color theme that is? Looks pleasant.

[azarudeen]

Hi Simon,
My application working fine in web browser, After build APK and run in mobile showing blank page or error like this after select googleID

Kindly help me.

[dannyshf]

thanks for the tutorial. I hv come across cases where bugs are not appearing on the browsers but on mobile, how should I debug those bugs?

[baskaranchellapandi]

While running in my native android device, i am getting local connection refused. Do you know how to fix this ?

[lavishly]

Is there a way to get the https logs (tls, handshake, proxies etc) from native without using debugger or studio? Does WebView pass network logs to native to dispatch? Chrome netlogs not working in app. Thanks love vids!

[emmanuelokpukpan]

really really great post..thanks simon

[ilclaudio]

Hi Simon, it seems that Debugger for Chrome is deprecated.

[nobodyeverybody]

don't eat your words man, you are not talking in German )) that's English and talk clearly, stop when necessarily and pay attention to pronunciations and stresses, )