[cast] Load debug script (#1505)

## Description

## Tests

web/apps/cast/src/pages/index.tsx

@@ -53,11 +53,18 @@ export default function PairingMode() {
         const context = cast.framework.CastReceiverContext.getInstance();
         context.setLoggerLevel(cast.framework.LoggerLevel.DEBUG);
         const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
-        castDebugLogger.setEnabled(true);
-
         try {
             const options = new cast.framework.CastReceiverOptions();
             options.maxInactivity = 3600;
+            context.addEventListener(
+                cast.framework.system.EventType.READY,
+                () => {
+                    if (!castDebugLogger.debugOverlayElement_) {
+                        // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
+                        castDebugLogger.setEnabled(true);
+                    }
+                },
+            );
             context.addEventListener(
                 cast.framework.system.EventType.ERROR,
                 (event) => {

web/apps/cast/src/utils/useCastReceiver.tsx

@@ -23,6 +23,13 @@ const load = (() => {
                 });
 
                 document.body.appendChild(script);
+                const debugScript = document.createElement("script");
+                debugScript.src =
+                    "https://www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js";
+                debugScript.addEventListener("load", () => {
+                    console.log("debug script loaded");
+                });
+                document.body.appendChild(debugScript);
             });
         }
         return promise;
@@ -32,6 +39,7 @@ const load = (() => {
 export const useCastReceiver = () => {
     const [receiver, setReceiver] = useState<Receiver | null>({
         cast: null,
+        debug: null,
     });
 
     useEffect(() => {