Skip to main content

Debugging Mobile Web Sites on a Chromebook

Users on the internet have largely moved to mobile devices. Because of that it is more important than ever to make sure that web content we produce is just as accessible and look just as great on a mobile device as it does on a Chromebook.

In this article I will show you two methods for testing your site on a mobile device. The first is easier, but less accurate, and the second has more steps, but will be running on actual hardware, and therefore perfectly accurate.

Device Toolbar

In the Chrome Dev Tools we can simulate a mobile device by using the device toolbar. It can be accessed in by pressing the device toolbar button  at the top left corner of the Chrome Dev Tools panel. When you do this it will automatically change the view of the website to a default device. You will need to refresh the page though to make sure that the result is more accurate.
The device toolbar.
Along the top of the view you will see some options. The first is a drop-down(1) that will allow you to select from templates that will configure everything to match as close as possible the device selected. If you select the Edit... option at the bottom of the list it will give you access to a lot more devices as well as allow you to configure your own.

The next pair of options(2) allows you to adjust the dimensions of the screen. This will only work on Responsive option in the device drop-down.

The next drop-down(3) changes the scaling of the view. This is mostly for convenience.

The second-to-last option(4) allows you to emulate various network conditions, which is a reality of real-world mobile browsing that you will want to test.

The last option(5) allows you to test various screen orientations and layouts. Once again, very important to test to ensure the best experience possible.

That is about it for the device toolbar. It is a very simple interface that allows you to do some fairly advanced testing right on your Chromebook. It is not always 100% accurate which is why we will want our next option.

Device Inspector

The Device Inspector tab is an awesome tool that not only allows you to connect to Android based phones and tablets, but also Chromecasts and more! Today we will be inspecting my old Nexus 7 tablet.

Before we get to the device inspector tab we will need to get our android device into developer mode. First open the settings app on your device and scroll to the bottom and tap on About Tablet (or Phone) and then scroll to the bottom of that view and start tapping repeatedly on the section titled Build Number. After a couple of taps you will see a little indicator pop-up that that says you are on your way to becoming a developer, exciting!
All right! We're legit!
Once it says "You are now a developer", go ahead and go back to the main settings panel and you will find a new Developer Options button. Tap on that.
Developer options
In here we need to enable the developer options by turning on the switch at the top right(1) and enabling USB Debugging(2).
Turn a couple of things on.
The last thing you will want to do is connect your phone or tablet to your Chromebook with a USB cable.
Now we are ready to open up the Device Inspector tab by going to the page chrome://inspect. When you first open this tab you will notice a couple of things. First, the list of devices should show an item that says Offline. This is your connected device.
The Device Inspector
The second thing you will notice is that on your device a dialog box shows up on your Android device. You will want to check the Always allow from this computer checkbox and tap OK.
Allow the Chromebook to connect.
Also, make sure you have a tab open on your Android device to inspect.

Back on the Chromebook we will now see the item listed properly, as well as a list of Chrome instances available on the device for us to inspect.
Now we're getting somewhere.
From here you can click an inspect link under the Chrome instance you want to inspect. This will open a Chrome Dev Tools panel in a dedicated window.
Inspecting with a live preview!
Right away you will see one of the coolest things about this is that you can see and interact with a live view of the Chrome instance. You will also notice that all of the same tools that are available to you in Chrome Dev Tools on a Chromebook are available here too.  
Real-time debugging on mobile hardware, WOOT!
Keep on working at optimizing your web experiences for mobile. We all know how terrible it is to land on a page that we have to keep pinch-zooming on just to interact, yuck! Let's make the internet the best it can be.


Post a Comment