Both the application and device must be registered to the same developer
account in order for you to perform debugging.
Start your sender app and cast to the Google Cast device
to load the Web Receiver app for debugging. Make sure your sender and Web
Receiver devices are connected to the same network.
There are two ways to connect to your device for remote debugging:
Chrome Inspector
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.
Select the device for the Web Receiver app you want to debug by
clicking its Inspect link.
An inspector window should open, enabling you to remotely debug the
Web Receiver app.
Directly to the device's 9222 port
In the Chrome browser, enter the following in the address field to
go to the device you are debugging directly. This may be faster
than the Chrome Inspector if you have many devices on your network:
<deviceIPaddress>:9222
The device IP address can be found by selecting the device in the
Google Home app, going to settings, and looking under the
Information section.
Select the session you would like to debug by clicking its
Remote Debugging link.
If the Chrome Remote Debugger does not populate, select the
icon to the left of the address bar and select site settings.
Scroll to the bottom of the settings and change the setting for
Insecure content to Allow.
In the Chrome Remote Debugger console, enable debug logging, by entering the
following:
Full DOM manipulation is supported as well as the full Chrome JavaScript
REPL (console), which will allow you
to tinker with the running Web Receiver app.
When your Web 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 Web Receiver app and then reload the inspector.
Breakpoints
You can add manual breakpoints to your code by using debugger; within your
Web Receiver code.
Local caching
Use window.location.reload(true); to perform a forced reload that flushes the
cache of the Web 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”.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-18 UTC."],[[["Use the Chrome Remote Debugger to debug your Cast Web Receiver application by inspecting it through `chrome://inspect` or directly accessing the device's 9222 port."],["To enable debugging, register your application and Cast device on the Google Cast SDK Developer Console, ensuring both are linked to the same developer account."],["Initiate a cast session from your sender app to the target Cast device to load the Web Receiver and allow the debugger to connect."],["Leverage the Chrome Remote Debugger's console for logging, DOM manipulation, and utilizing the JavaScript REPL for interacting with the running Web Receiver app."],["Remember to disable debug logging in production environments and avoid logging sensitive information."]]],["To debug a Cast app using Chrome Remote Debugger, first register your app and device on the Google Cast SDK Developer Console. Then, start your sender app and cast to the device to load the Web Receiver app. Connect to the device via `chrome://inspect` or directly using `\u003cdevice IP address\u003e:9222`. Select the Web Receiver session to debug and enable debug logging with `cast.framework.CastReceiverContext.getInstance().setLoggerLevel(cast.framework.LoggerLevel.DEBUG);`. Use `debugger;` for breakpoints and `window.location.reload(true);` to flush the cache. Preserve logs between sessions in the settings.\n"]]