Hello, in this video, we're going to show you how to debug a ionic application for iOS. Problem is ionic uses web technologies, a hybrid application. When you do something like a console dot log, which I've got right here at the startup, one of my controllers in JavaScript, and that doesn't appear in this console I put right here, which is a problem for debugging. So how to get around that the simple solution is to use the web inspector in Safari, because you can actually debug devices and simulators, that's correct, you can debug the simulator as well. That's what we will be debugging, but the process is exactly the same for devices. So there's two things you need to make sure you've done before you can actually start debugging logs, first of all on your simulator or on your iOS device.
Go to Settings. Go to the Scroll all the way down, go to advanced and make sure web inspector is enabled. On simulator, it should be enabled by default on device, it probably won't be, but just make sure that's enabled. Once that is enabled, what you need to do is go to Safari, go to preferences, go to the Advanced tab, make sure show develop menu is in menu bar. So this will appear right here. And once you've done that, you're ready to start debugging.
So I've got this log Hello right here. So what I'm going to do is just run it in my simulator. Lead simulator load my application up. So let's see if loaded. So when I click this load chat button the this little controller function will be triggered. Hence this log will also be triggered.
So if I go to Safari, you go to do Develop, you select your device or your simulator that you want to debug the this iMac is device itself the one I'm actually coding on and creating this video tutorial on forehand iPhone is a iPhone that I've got connected and simulator is what we've got. So if you go into here, index dot HTML for whatever application you're trying to debug. And now you've essentially got the web inspector for your application, so you can mess around with the HTML as you would with any other website. Go to console, click chat, as you can see, it contoured out Hello. One thing to note is you need to make sure you have this web inspector open before the log is triggered. What I mean by that is this for a run this is another thing to note.
If you rerun your application, the actual web inspector will close so you need to read You're opening every single time. But if I click on charts, the log has been triggered. It's actually printing the out in this console, which is really usually doesn't almost ignore it because like I said, he usually doesn't print it out in here. It should only print it out within here. So if for whatever reason it isn't working for you in here, because normally it doesn't for me, this is the method to use days ridiculously weird. You just go to develop simulator index HTML, I think the it has an appeared here.
So local thing, make sure your web inspector is open before you the log is going to trigger. So realistically, you want to open up the web inspector every time you launch the application so you can just debug it. This is really weird why it actually appeared here. Usually, logs don't appear in the console. For Xcode, well, they never have for me which again is ridiculously weird. Unless Now, it is definitely the right log.
I doubt I would have held off for whatever the reason, you know why that has appeared there. Because log said usually for me doesn't appear. But this is this has become a crazy tutorial now simply because I was trying, I was showing you how to get around the problem, we seem to fix itself on my computer. Either way, you now have a solution of how to debug an ionic application for iOS. If you have any questions, feel free to post them on our education platform sonar learning co.uk there'll be a link in the description to that if you liked the video, give it a thumbs up and leave a comment and hit that subscribe button. And as usual, thanks for watching, and I hope you have a great day.
This is really good.