Did you know that you can easily connect a physical Android device to do your laptop for frontend debugging?

We all know that you can put the Chrome/Firefox Developer-Tools into a mobile-emulator mode, but sometimes, especially with touch interactions, “ain’t nothin’ like the real thing”…

(This isn’t a TIL in the real sense of I learned it today since I’ve known about it for some time, but I don’t think enough other people do.)

The key to this is using one of the under-the-hood chrome:// URLs: chrome://inspect/#devices

Step-By-Step Instructions:

1. Connect the Android device to your computer with a USB cable.
2. Unlock the Android device and then we need to turn on USB-debugging

• Possiprobably this under Settings > System > Advanced > Developer Options depending on Android version.

1. Of course, turn on USB debugging.
2. On your computer, open Chrome and type type chrome://inspect/#devices into the address bar.
3. Your Android device should appear in the list of devices.

• Sometimes you may need to try more than once or restart your device

1. Click on the name of your device to open the Chrome DevTools for that device.

Android Developer Options

I realize some folks don’t already have the “Developer Options” enabled on their phone. It is very easy to do and doesn’t do anything in and of itself. Just go to Settings > About Phone. At the very bottom you’ll see an Android “Build Number”. Tap on that a handful (“7”) of times and you will see a message that says “You are now a Developer”. Mazel Tov. Google says so, therefore it must be true.

iOS…

Honestly, I’ve never tried a physical connection with an iOS device, so a big ol’ YMMV warning. I have borrowed an iPhone and checked things over wi-fi though. If your dev machine and iOS device are on the same network, you first find the local-IP address of your dev-machine that is running your web server. Then, in the address bar of a browser on the iOS device, manually type in the IP and Port-# you have running on your dev-machine, so it will look something like https://192.168.1.137:3000. Don’t forget that (for now) you’re always looking at the Safari Webkit engine regardless of the app, so you’re not actually able to do any cross-browser testing on iOS!

Other Chrome Fun

You can find a full list of Chrome internals at chrome://chrome-urls/

Really, the only ones I’ve ever used are the chrome://inspect/ options and chrome://extensions/ or chrome://extensions-internals/ when working on my Chrome extensions, though I suppose chrome://user-actions/ could be useful for UI testing.

Cheers!

❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦