How to debug a Kiosk Chrome application running on a Chromebox?

Question

A Chrome Kiosk application that I wrote has a problem only when running in Kiosk mode on a Chromebox. When staring the application manually after I log into the Chromebox it

Answer 1

If you run Chrome with the --remote-debugging-port=9222 option it will provide access to DevTools at http://localhost:9222/. Now, on a Chromebox running in Kiosk mode that's not all that useful (or even possible) without some extra steps:

1. Put your device in "developer mode". Instructions vary depending on hardware model.
2. Make the file system writable so that you can modify chrome's command line arguments.
3. Add "--remote-debugging-port=9222" to /etc/chrome_dev.conf.
4. killall chrome so that the command line changes take effect.
5. Use ssh to log into the Chromebox and forward the port locally: ssh -L9222:127.0.0.1:9222 chronos@<chromebox ip>
6. Access DevTools from your local machine at http://localhost:9222/

Given all this it is easier to debug a kiosk app if you can run it unpackaged in non-kiosk mode.

Answer 2

In the hopes of saving other a bit of time in the future, I found that you do not need to ssh in as the chronos user when attempting to debug an app that is running in kiosk mode.

In fact, I found that I was unable to ssh in as the chronos user while the device was running an app in unmanaged kiosk mode at all, however, I could while logged in to the OS.

Instead I had to ssh in as the root user. I was then able to setup the tunnel as documented by Reilly Grant and connect to the remote debugger via localhost:9222.

This means that the only change you need to make to Reilly Grant's instructions are in Step 5 change ssh -L9222:127.0.0.1:9222 chronos@<chromebox ip> to ssh -L9222:127.0.0.1:9222 root@<chromebox ip>

Answer 3

I know this should be a comment yet I sit at 49 rep.. For those trying this with the latest version of chrome you will likely end up with a non functioning remote console. To fix this you must open a local debugger and enter the following into Its console: (Reference: https://github.com/Adobe-CEP/CEP-Resources/issues/78)

isEnterKey = function(event){
  return event.key ==  'Enter' && event.keyCode == 13;
};

Object.defineProperty(KeyboardEvent.prototype, 'keyIdentifier', {
    get: function() {
        switch (this.key) {
            case "ArrowDown":
                return "Down";
            case "ArrowLeft":
                return "Left";
            case "ArrowRight":
                return "Right";
            case "ArrowUp":
                return "Up";
            case "Escape":
                return "U+001B";
            case "Tab":
                return "U+0009";
            default:
                return this.key;
        } 
    }
});