Remote debugging web apps running locally (in Chrome OS)

“Wait, what… What do you mean ‘remote debugging apps running locally, how is that remote in any way?’” you might ask.

Well, it (sort of is). Did you know that Chrome OS can run Android apps, and, starting with Chrome OS 69, you can install Linux support? Search for “Linux” in Settings, tap Install, and in a couple minutes you’ll have a terminal window.

From then on, you can install use the same familiar development tools you’re using on Mac OS or Linux: Node, npm, VS Code, Android Studio and so on. Linux support is still in beta, but (almost) anything you can apt install works fine. The umbrella term for Linux application support in Chrome OS is Crostini, and you can read more about it on the Crostini page.

Chrome OS has gone from being the operating system with (perhaps) the fewest apps you could run, back in 2011 (just web apps and some Chrome apps), to the one that can run the most — Android, Linux, and web apps. This works thanks to a container/VM architecture that has only a small overhead, and no emulation while running Linux or Android apps.

For web app developers, this means that you can develop on Linux, then test on Android browsers running natively, on the very same machine, locally. Hence, local/remote debugging.

To do that, there are a few steps.

1. Set your Chromebook to Developer Mode: press Esc + ⟳ + Power. A yellow exclamation point (!) or “Please insert a recovery USB stick” is displayed. Press Ctrl+D to begin developer mode, then Enter.
2. Enable Google Play Store from Settings
3. Settings -> Google Play Store -> Manage Android preferences
4. Enable Developer Options in Android (tap About -> Build number 7 times)
5. In the newly accessible Developer options menu, enable ADB debugging (this is what requires Chrome OS to be in Developer Mode)
6. Download Android SDK latform-Tools for Linux
7. Install ADB: open the downloaded ZIP file, copy the platform-tools directory, and paste it in the Linux files folder
8. Open a terminal, then cd platform-tools; chmod +x adb
9. Run adb connect 100.115.92.2 (per https://developer.android.com/topic/arc/studio#running_locally) and accept the Allow USB debugging prompt.
10. Launch the Play Store and install Chrome Dev for Android. (We’re choosing Chromium Dev so that its icon is easy to distinguish from other Chrome instances we’ll be running on the Chromebook).
11. Open a terminal and run ip addr show. The 100.115… number is the IP of the Linux container.
12. Launch your web app server in that terminal window
13. Run Android Chromium Dev from the launcher and open your web app by navigating to the 100.115… IP and the port your server is listening to
14. In another terminal window (Ctrl+Shift+N), install Chromium for Linux: sudo apt install chromium
15. Launch Chromium (from the launcher, or by typing chromium in the terminal). It’s necessary to run a Linux Chrome/Chromium rather than the OS Chrome, because the ADB bridge is established between the Linux container and the Android container.
16. In Chromium, go to chrome://inspect. You should see your web app’s tab in the list of targets.
17. Click inspect. You should see something like this (the screencast shows the Squoosh app).

Remote debugging from Linux Chromium web apps running in Android Chrome, on Chrome OS.

Troubleshooting

If you see “Pending authentication: please accept debugging session on the device” in Chromium DevTools, reboot the Chromebook. We’re working on a fix!

More about developing on Chrome OS

To learn more about what Chrome OS can do for web developers, check out my talk at Chrome Dev Summit ’18.