Debugging

Use the Chrome Remote Debugger to debug a Cast application. Use the Cast Game Debug UI to debug a Cast-enabled game.

Chrome Remote Debugger

Launch Chrome Remote Debugger for a particular Google Cast device as follows:

To debug Cast apps on an Android TV device, see Android TV: Debugging.

To debug a receiver app on a Chromecast device, do the following:

  1. Register your application and Google Cast device on the Google Cast SDK Developer Console.

    Both the application and device must be registered in order for you to perform debugging.

  2. Start your sender app and cast to the Google Cast device to load the receiver app for debugging. Make sure your sender and receiver devices are connected to the same network.
  3. In the Chrome browser, enter the following in the address field to go to the Chrome inspector:
    chrome://inspect

    A list of Cast-enabled devices on that network appears.

  4. Select the device for the receiver app you want to debug by clicking its Inspect link.

    An inspector window should open, enabling you to remotely debug the receiver app.

  5. In the Chrome Remote Debugger console, enable debug logging, by entering the following:
    cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);

    Full DOM manipulation is supported as well as the full Chrome JavaScript REPL (console), which will allow you to tinker with the running Cast receiver app.

    When your receiver is torn down (lifecycle ended), the debugger will become inactive with a warning message along the top. At this point you can no longer interact with the debugger. To restart debugging, you must restart the receiver app and then reload the inspector.

Breakpoints

You can add manual breakpoints to your code by using debugger; within your receiver code.

Local Caching

Use window.location.reload(true); to perform a forced reload that flushes the cache of the receiver application.

Preserving logs between sessions

You can preserve the logs between sessions by clicking the gear icon within the debugger and checking the box next to “Preserve log upon navigation”.

Cast game debugging

To debug games for Cast, you can use the Cast game debugging UI. You can also run the Game Debugger sample app, which provides a basic application for observing the messages passed between the GameManager and GameManagerClient for game state changes and so forth.

Game debugging UI

The Cast Receiver API includes a DebugUI utility class that displays an overlay on the receiver app and reports gameplay states, lobby states, game data, player data, and events as they fire.

You can integrate the debugging UI into your app by exposing a public debugUi (or whatever you want to name it) field in your app. For example:

this.debugUi = new cast.receiver.games.debug.DebugUI(this.gameManager_);

Then, following the steps to run Chrome Remote Debugger, you can turn on the overlay by calling the open method on the command line. Note that you need to reference the GameManager instance in your app (gameMgr in the following example):

gameMgr.debugUi.open()

Game Debugger sample app

The Game Debugger sample app provides a basic application to run while using the game debugging UI. You can use it to become familiar with the GameManager API.

Run the Cast Game Debugger sample app as follows.

For Android and iOS:

  1. Make sure your sender and receiver devices are connected to the same network.
  2. Launch the app.
  3. Cast the app to your receiver device.

    The Cast Game Debugger receiver app appears on the TV. You can now send API calls from the sender to the receiver. In the Android and iOS apps, these are provided in pull-down menus.

    Note that in iOS, when you add in JSON data both field names must be quoted; i.e., { "foo": "bar" }. In Android the quotes are added automatically.

For Chrome:

  1. Make sure your sender and receiver devices are connected to the same network.
  2. Launch the app: enter https://googlecast.github.io/GameManagerSamples/game_debugger/index.html in the address field.
  3. Open the Chrome devtools window:
    • In Windows, press the F12 key.
    • In Mac OS, simultaneously press the Cmd, Opt, and i keys.
  4. Select Console.

    You should see the words, "### Click the Cast button in the Google Cast extension to start!" If you see, "Uncaught TypeError: Cannot read property 'GameManagerClient' of undefined", you may need to update or reinstall the Google Cast extension.

  5. Cast the app to your receiver device.

    The Cast Game Debugger receiver app appears on the TV. You can now send API calls from the sender to the receiver. In Chrome, you access the global variable for the GameManagerClient, for example:

    In the Chrome devtools console, enter gameManagerClient.getCurrentState().getApplicationName().

    This returns "GameDebugger" in the console, the same name as that which appears on the TV.

    The full GameManager API is available through the tab completion feature in devtools.

You can also run commands as the receiver app:

  1. Start your sender app and cast to the Google Cast device to load the receiver app for debugging. Make sure your sender and receiver devices are connected to the same network.
  2. In a separate Chrome browser window, enter the following in the address field to go to the Chrome inspector:
    chrome://inspect
  3. Select the device for the receiver app you want to debug by clicking its Inspect link.

    An inspector window should open, enabling you to remotely debug the receiver app.

  4. To test the debugger, in the Chrome devtools console, enter the following:
    game.gameManager_.getApplicationName()

    This returns "GameDebugger" in the console, the same name as that which appears on the TV.