8.1 Mobile Debugging

In the previous video, we learned how to use the Chrome DevTools and inspect a webpage that is residing in a browser either for a laptop or a desktop. Now what if we are viewing the same webpage on a mobile browser, which is, let's say, in our iPhone or Android or any other mobile device. How can we inspect the elements on these webpages that are coming from a mobile browser? In this video, we'll be taking a look at two such options. The first option is looking at the Safari browser on an iPhone. And then the second option is looking at the Chrome browser from an Android device. So let's start with Safari. Firstly, I'll open up Safari on my desktop. The very first thing I will do is go to Safari and then Preferences. And make sure that I check the, Show Develop menu in the menu bar under the Advanced options. And once I do that, you'll see an extra menu that will pop up here. Now after this, I will show how we can debug something using the iOS simulator. So, here I am in my applications folder, and here we can see Xcode. Yes, you will need to have Xcode installed. And, let's go to the iOS simulator, so to access it, you will go to Show Package Contents, and then Contents > Applications. And under applications, there you see there is the IOS simulator. So let's go ahead and fire it up. So this is the iOS simulator. The first thing I'll do is go to the Settings and access the Safari. And scroll right to the bottom, go to the Advanced options and ensure that the Web Inspector is turned on. And now I'll come back to the home screen and then click Safari. Let's visit a website here. How about hub.tutsplus.com? Great. Now once we are on this page in the Safari mobile web browser, we can go back to Safari. So let me just split the screen, and if you go on the Develop menu, you will see under iPhone Simulator, there you go hub.tutsplus.com is shown. This will open up the very familiar web inspector in Safari on our desktop. Now notice what happens when I go over the elements. Just like how it happens in our desktop browser, yup, you will see the hovering right in our iOS simulator. We can also go ahead and do same thing as what we did in our desktop browser so let's go ahead and let's say we choose the h1, okay? We can go ahead and even change the text, hello remote mobile debugging. And there you go, the text here is changed as well. And of course, you can even go ahead and change the color of the text. So let's just try green, or how about light blue. And we can also similarly go ahead and uncheck and check, and maybe we uncheck the font-size, max width, padding, and well you get the picture. So this is how using a simulator, the iOS simulator, you can inspect element and fire up any web address that you want. Let me quit the iOS simulator and we will do exactly the same thing with a device. So now I'll do exactly the same as my connected device. Here you see I've connected my iPhone to my laptop. And the very first thing I will do is go to the Settings and find the Safari app, and I will scroll right to the bottom, go to Advanced and turn on the Web Inspector. Now go back to the home screen. And now I will fire up the safari where I will basically access hub.tutsplus.com. Now when I come back to Safari on my desktop, notice here right on my right-hand side, I will similarly go to Develop, and there you go, it's detecting my iPhone. And now I can go to hub.tutsplus.com. Notice how, on my connected iPhone, it will show the hover. And yup, it is showing up the hover. And why don't I go ahead and change here to like hello, a big hello. And there you go, it says hello, and very similarly, let me just change the color right here. And let's just say red and yup, as you can see, the text color is changed here. So very similarly you can access your webpage, whatever you are viewing on your mobile device on iPhone in this manner and do some little debugging. And I believe this should be good enough to kind of give us lead to what is wrong in our webpage when we want to correct certain mistakes. Next we will do the same thing, but this time, with an Android device. So if you look at the Google DevTools, the documentation on remote debugging on Android, the very first step we need to do is install the Android SDK. So do go ahead to the Android SDK home page and download it. Now if you have downloaded the Android SDK, you can come to your command line. And if you do android -h for help, if the download is successful, it will give you a list of commands to use. Next, as you see here, I have connected a USB cable to the Android device. Now in step number two, enable USB debugging on Andriod, firstly, we will go to Settings. And then on the Settings, we will go to Application, and on the Developer options, we will ensure that USB debugging is turned on. Great, now we will go back to the home screen and let's go to the Chrome browser. Here I will once again fire up hub.tutsplus.com. So after this, I said in the instructions, let's do a little query on the connector devices. So for this, we will do adb and then devices. Yep, looks like my device is connected. Finally, to do a little port forwarding so that we can see this exact same website's inspector panel. In our desktop's Chrome browser, we will basically run this command in our command line. All right, so let me go ahead and do that. Now if I come to local host port 9222, you'll be able to see a list of pages. And yup, Tuts+ is there. So let me go ahead and click it. And there you go, the entire inspector panel will be there. And as I am scrolling here, you'll be able to see the whole verse spaces there as well. Why don't I go ahead and try to target the header once again. So there is the header. Let me try to expand it. And there you go, there is the header. And let me click it. And you can change it as any webpage. So I'll just say a big hello. There you go. And maybe I will say font-weight, how about bold so that you can see it? All right. And maybe the color can be red. And there you go. As I'm changing the properties in my Inspector panel from my laptop, my connected device is showing the change right here. So next time you wanna do some live editing to see how your webpage looks like on a mobile web browser. Do connect up your Android or iPhone device right up to your laptop or desktop and do a remote debugging.