Diagnose and Fix Your iPhone Web Apps with Web Inspector

Hey, so, uh, let's talk about how you can connect your iPhone, uh, which is, uh, right here, uh, to your Mac for, uh, doing diagnosing of what's going on with your device. Um, so the first thing you need to do is you're gonna need to plug your iPhone or have a cable to plug it into your computer. Later on, I think you can do this through network, but it's easiest to start with the cable. The second thing you're going to do is you're going to bring up Safari just like I have right here. As far as right now in dark mode, that's why it looks the way that it does. And, you know, I can always switch it off of dark mode if one were so inclined. See, turn off dark mode. Hey, Ray, and turn back on dark mode. Okay. But the— what we want to do now is go over to Safari and we want to click where it says Settings. And in Settings, we can now have a bunch of different tabs, general, whatever, whatever, whatever. You wanna go click on where it says advanced. And if you were to, at the very, very bottom here, and if you, it'll say show features for web developers. If you click this, you'll see a new tab shows up both here, but also you'll notice a new tab is showing up here at the very top of your screen. Watch, we're gonna turn it off. Okay, and turn it off. See, now there's no develop menu up here, and now there is a develop menu. That's how you know you're in developer mode. Developer mode is going to give you some superpowers. Now there are some additional JavaScript things you can do from in here, but we're not going to worry about those right now. Um, the, um, the big interesting thing is going to be in the develop menu up here. Now, so before I'm able to make that connection work with that develop menu that we have up here, uh, we're going to need to make sure the phone itself is set up to use what's called the Web Inspector feature for mobile Safari. So if I'm on my phone right now, I can, you know, flick away from this and open up my settings, right, which I have on the front page of my phone. But if you don't have immediately, you can swipe down and just do settings, and you can see all these settings that are in here, right? So you want to scroll on down to Safari, or you can just go search for Safari. Safari here. Good. And now I can scroll down through Safari and you're going to need to go all the way to the bottom here where it says Advanced. And under Advanced, you're going to see this thing that says Web Inspector. This might be off as a starting point. So you want to turn it on and make sure that that's there for it to run properly. So at this point, and of course there's some other very cool features in here, but the, but the biggest one is this inspector because if this inspector Inspector is on, that's going to allow us to make the connection that we're about to do next. I'm sure I've got my phone unplugged right now, and I can click where it says Use for Development. And now it says Pairing Denied. Usually this is because I now have a thing up on my screen that says, do you trust this computer? I'm going to click Trust, and it's going to ask me to go punch in my security code. Okay, so At this point, it's like it still says pairing denied, even though I've already gone through all the business of putting in the, uh, do you trust me? So I pulled the plug. Notice how the phone went away. I pushed the plug back in. And then, yeah, sometimes I have to click away from this to make it come in, but it seems to have done it automatically this time where it shows my phone again. And now you can see that it shows like sites, uh, that I'm currently looking at. At this point, I'm in a position where I can pick one of the tabs in Safari. So if I were to, in fact, you want to do right now is I'm going to, uh, bring up, uh, QuickTime. Uh, QuickTime is actually a really great way to be getting this kind of side-by-side going on. You can go, uh, File, New Screen Recording of, oh no, it's not Screen Recording. Pick a button. It's going to be a movie recording. And which is going to be from, and I'm just going to move this over here. Okay. So instead of showing myself, which is not that exciting and say, please show from my iPhone screen. Look at that. See, now I have the ability to record from my screen. Now you can always do that just by using the screen recorder directly on your phone, but by using it here, now I have the ability to sort of look side by side. Uh, both I have one on my hand and up here, which, which actually really great for when I want to do like a screen share demonstration of what's going on on the phone and be able to see my diagnostics at the same time. So let's talk about those diagnostics. I'm now on this, uh, site and I'm going to click and go to, um, I don't want to be in QuickTime. I want to be in Safari. I click on my develop and I can click on my iPhone now. And now if I click this, you'll see it highlights this particular tab. Now, if I were to say I want to create a new tab and I were to go to StateChange, you know, there's some background page to get discovered some of what's going on behind the scenes. And I want to pick, I don't know, StateChange AI, right? Now, by clicking that, it gives me a screen that probably looks pretty familiar to you, which looks like developer tools. Of what you have from this particular site. So you can track everything that's going on for the network and how long it takes. And I can just do a quick refresh of the page. I can't actually, remember, I can't click on the QuickTime view. I have to actually use the phone for it, which can be tricky, which is cool. And now I can see everything that is going on, you know, and be able to watch it through the timeline and how long stuff is taking. Yes, some of the stuff is coming from script user content, which is, oh, that's because I have a description video in here. And if I scroll on my phone, see I'm pushing up on my phone and down, that's how you get to see what the site looks like, and be able to track what's going on in the network, be able to track what's going on in the console. And actually, yes, I do have the ability to look at the, look in here and say, you know, document.getElementById, star.length, just to find out. This tells me there are 500 elements that are on the page. So I can interact with the JavaScript, even on a mobile browser, because I'm hooked up through Safari. There are some additional things you can do here by, you know, you can take a look at storage to see what's going on inside here, which can be super handy to see if there's something that might be going off the rails a little bit. Graphics layers, which sort of tells you about how the thing is being drawn. But these are all very Safari things. Um, the, from performance point of view, the most interesting thing is going to be profiling, right? In the way we associate with being on desktop. So I can click on the recorder here and start to show me, all right, well, how much of my CPU is being used for which pieces of all this? And you'll notice that when I scroll, it becomes a little more intensive, whatever. Uh, and then I can press stop. This isn't running all the time because it's super intensive to run, but you get to find out how well it is operating. And anything that extends, um, Safari that works with mobile Safari will work with this too. So this is the core of how we can use the inspector. And we can have different inspectors that go with different pages. Like, for example, I have this other tab that's not currently in the foreground. And I switch over to it. Sorry. And I switch over to it. Right here I am. Now I've got the reveal up. This is what the reveal looks like. And I can take a look at the console, take a look at sources, take a look at the network, and find out how it is performing. This gives you superpowers. All the stuff that you can do for a desktop app, you can do for your mobile as well. And you don't need to use sort of the faked-up, you know, mobile emulator like you have in Chrome. You can actually see what it looks like on the most popular of browsers, which of course is mobile Safari. If you have questions about that, please leave them in the comments, and we'll see you next time.