feat(demo): add chrome remote debugger (#537) (c6bd9e53) · Commits · e / tools / webadb

.vscode/settings.json

+2 −0

Original line number	Diff line number	Diff line
		@@ -17,6 +17,7 @@
		"DESERIALIZERS",
		"ebml",
		"Embedder",
		"entrypoints",
		"fflate",
		"fluentui",
		"genymobile",
		@@ -49,6 +50,7 @@
		"transferables",
		"tsbuildinfo",
		"typeof",
		"undici",
		"webadb",
		"webcodecs",
		"webm",

apps/demo/next.config.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -64,7 +64,7 @@ module.exports = withPwa(
		},
		{
		key: "Cross-Origin-Embedder-Policy",
		value: "require-corp",
		value: "credentialless",
		},
		],
		},

apps/demo/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -32,6 +32,7 @@
		"@yume-chan/stream-extra": "workspace:^0.0.19",
		"@yume-chan/stream-saver": "^2.0.6",
		"@yume-chan/struct": "workspace:^0.0.19",
		"@yume-chan/undici-browser": "5.21.2-mod.9",
		"fflate": "^0.7.4",
		"mobx": "^6.7.0",
		"mobx-react-lite": "^3.4.3",

apps/demo/src/pages/_app.tsx

+10 −1

Original line number	Diff line number	Diff line
		@@ -8,6 +8,7 @@ import {
		} from "@fluentui/react";
		import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
		import type { AppProps } from "next/app";
		import getConfig from "next/config";
		import Head from "next/head";
		import Link from "next/link";
		import { useRouter } from "next/router";
		@@ -16,7 +17,6 @@ import { Connect, ErrorDialogProvider } from "../components";
		import "../styles/globals.css";
		import { Icons } from "../utils";
		import { register as registerIcons } from "../utils/icons";
		import getConfig from "next/config";

		registerIcons();

		@@ -71,6 +71,11 @@ const ROUTES = [
		icon: Icons.Power,
		name: "Power Menu",
		},
		{
		url: "/chrome-devtools",
		icon: Icons.WindowDevTools,
		name: "Chrome Remote Debugging",
		},
		{
		url: "/bug-report",
		icon: Icons.Bug,
		@@ -136,6 +141,10 @@ function App({ Component, pageProps }: AppProps) {

		const router = useRouter();

		if ("noLayout" in Component) {
		return <Component {...pageProps} />;
		}

		return (
		<ErrorDialogProvider>
		<Head>

apps/demo/src/pages/chrome-devtools-frame.tsx

0 → 100644

+98 −0

Original line number	Diff line number	Diff line
		import { useEffect } from "react";

		function ChromeDevToolsFrame() {
		useEffect(() => {
		var WebSocketOriginal = globalThis.WebSocket;
		globalThis.WebSocket = class WebSocket extends EventTarget {
		public static readonly CONNECTING: 0 = 0;
		public static readonly OPEN: 1 = 1;
		public static readonly CLOSING: 2 = 2;
		public static readonly CLOSED: 3 = 3;

		public readonly CONNECTING: 0 = 0;
		public readonly OPEN: 1 = 1;
		public readonly CLOSING: 2 = 2;
		public readonly CLOSED: 3 = 3;

		public binaryType: BinaryType = "arraybuffer";
		public readonly bufferedAmount: number = 0;
		public readonly extensions: string = "";

		public readonly protocol: string = "";
		public readonly readyState: number = 1;
		public readonly url: string;

		private _port: MessagePort;

		public onclose: ((this: WebSocket, ev: CloseEvent) => any) \| null =
		null;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/WebSocket/error_event) */
		public onerror: ((this: WebSocket, ev: Event) => any) \| null = null;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/WebSocket/message_event) */
		public onmessage:
		\| ((this: WebSocket, ev: MessageEvent) => any)
		\| null = null;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/WebSocket/open_event) */
		public onopen: ((this: WebSocket, ev: Event) => any) \| null = null;

		constructor(url: string) {
		super();

		console.log("WebSocket constructor", url);
		this.url = url;

		var channel = new MessageChannel();
		this._port = channel.port1;

		if (url.includes("/_next/")) {
		this._port.close();
		// @ts-ignore
		return new WebSocketOriginal(url);
		}

		this._port.onmessage = (e) => {
		switch (e.data.type) {
		case "open":
		this.onopen?.(new Event("open"));
		break;
		case "message":
		this.onmessage?.(
		new MessageEvent("message", {
		data: e.data.message,
		})
		);
		break;
		case "close":
		this.onclose?.(new CloseEvent("close"));
		this._port.close();
		break;
		}
		};
		window.postMessage({ type: "AdbWebSocket", url }, "*", [
		channel.port2,
		]);
		}

		send(data: ArrayBuffer) {
		this._port.postMessage({ type: "message", message: data });
		}

		public close() {
		this._port.postMessage({ type: "close" });
		this._port.close();
		}
		} as typeof WebSocket;
		console.log("WebSocket hooked");

		const script = document.createElement("script");
		script.type = "module";
		script.src = new URLSearchParams(location.search).get(
		"script"
		) as string;
		document.body.appendChild(script);
		}, []);

		return null;
		}
		ChromeDevToolsFrame.noLayout = true;
		export default ChromeDevToolsFrame;