fix: Use obug for debug logs in runner (#2281)

Author: aklinker1

bun.lock

@@ -78,6 +78,7 @@ words:
   - Noto
   - ntvs
   - nypm
+  - obug
   - ohash
   - oklab
   - oxlint

cspell.yml

@@ -46,5 +46,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "obug": "^2.1.1"
+  }
 }

packages/runner/package.json

@@ -1,7 +1,7 @@
 import { openWebSocket } from './web-socket';
-import { debug } from './debug';
+import { runnerDebug } from './debug';
 
-const debugBidi = debug.scoped('bidi');
+const debug = runnerDebug.extend('bidi');
 
 export interface BidiConnection extends Disposable {
   send<T>(method: string, params: any, timeout?: number): Promise<T>;
@@ -12,18 +12,18 @@ export async function createBidiConnection(
   baseUrl: string,
 ): Promise<BidiConnection> {
   const url = new URL('/session', baseUrl);
-  debugBidi('Connecting to BiDi server @', url.href);
+  debug('Connecting to BiDi server @', url.href);
 
   const webSocket = await openWebSocket(url.href);
-  debugBidi('Connected');
+  debug('Connected');
 
   let requestId = 0;
 
   return {
     send(method, params, timeout = 10e3) {
       const id = ++requestId;
       const command = { id, method, params };
-      debugBidi('Sending command:', command);
+      debug('Sending command:', command);
 
       return new Promise((resolve, reject) => {
         const cleanup = () => {
@@ -43,7 +43,7 @@ export async function createBidiConnection(
         const onMessage = (event: MessageEvent) => {
           const data = JSON.parse(event.data);
           if (data.id === id) {
-            debugBidi('Received response:', data);
+            debug('Received response:', data);
             cleanup();
             if (data.type === 'success') resolve(data.result);
             else reject(Error(data.message, { cause: data }));
@@ -62,14 +62,14 @@ export async function createBidiConnection(
     },
 
     close() {
-      debugBidi('Closing connection...');
+      debug('Closing connection...');
       webSocket.close();
-      debugBidi('Closed connection');
+      debug('Closed connection');
     },
     [Symbol.dispose]() {
-      debugBidi('Disposing connection...');
+      debug('Disposing connection...');
       webSocket.close();
-      debugBidi('Disposed connection');
+      debug('Disposed connection');
     },
   };
 }

packages/runner/src/bidi.ts

@@ -1,8 +1,8 @@
 import type { ChildProcess } from 'node:child_process';
 import type { Readable, Writable } from 'node:stream';
-import { debug } from './debug';
+import { runnerDebug } from './debug';
 
-const debugCdp = debug.scoped('cdp');
+const debug = runnerDebug.extend('cdp');
 
 export interface CDPConnection extends Disposable {
   send<T>(method: string, params: any, timeout?: number): Promise<T>;
@@ -21,7 +21,7 @@ export function createCdpConnection(
     send(method, params, timeout = 10e3) {
       const id = ++requestId;
       const command = { id, method, params };
-      debugCdp('Sending command:', command);
+      debug('Sending command:', command);
 
       return new Promise((resolve, reject) => {
         const timer = setTimeout(() => {
@@ -35,7 +35,7 @@ export function createCdpConnection(
 
           if (res.id !== id) return;
 
-          debugCdp('Received response:', res);
+          debug('Received response:', res);
           clearTimeout(timer);
           outputStream.removeListener('data', onData);
 

packages/runner/src/cdp.ts

@@ -1,24 +1,3 @@
-export interface Debug {
-  (...args: any[]): void;
-  scoped: (scope: string) => Debug;
-}
+import { createDebug } from 'obug';
 
-function createDebug(scopes: string[]): Debug {
-  const debug = (...args: any[]) => {
-    const scope = scopes.join(':');
-    if (
-      process.env.DEBUG === '1' ||
-      process.env.DEBUG === 'true' ||
-      scope.startsWith(process.env.DEBUG ?? '@NOT')
-    ) {
-      const params = scope ? [`\x1b[31m${scope}\x1b[0m`, ...args] : args;
-      console.log(...params);
-    }
-  };
-
-  debug.scoped = (scope: string) => createDebug([...scopes, scope]);
-
-  return debug;
-}
-
-export const debug = createDebug(['@wxt-dev/runner']);
+export const runnerDebug = createDebug('wxt:runner', { color: 31 });

packages/runner/src/debug.ts

@@ -6,11 +6,11 @@ import {
 } from './browser-paths';
 import { resolve, join } from 'node:path';
 import { homedir, tmpdir } from 'node:os';
-import { debug } from './debug';
+import { runnerDebug } from './debug';
 import { mkdtemp, open } from 'node:fs/promises';
 import { styleText } from 'node:util';
 
-const debugOptions = debug.scoped('options');
+const debug = runnerDebug.extend('options');
 
 export type UnknownTarget = string & {};
 export type Target = KnownTarget | UnknownTarget;
@@ -79,7 +79,7 @@ export type ResolvedRunOptions = {
 export async function resolveRunOptions(
   options: RunOptions | undefined,
 ): Promise<ResolvedRunOptions> {
-  debugOptions('User options:', options);
+  debug('User options:', options);
 
   const target = options?.target || 'chrome';
 
@@ -126,7 +126,7 @@ export async function resolveRunOptions(
     firefoxRemoteDebuggingPort,
     target,
   };
-  debugOptions('Resolved options:', resolved);
+  debug('Resolved options:', resolved);
   return resolved;
 }
 

packages/runner/src/options.ts

@@ -1,4 +1,4 @@
-import { debug } from './debug';
+import { runnerDebug } from './debug';
 import {
   resolveRunOptions,
   type ResolvedRunOptions,
@@ -8,8 +8,8 @@ import { spawn } from 'node:child_process';
 import { installChromium, installFirefox } from './install';
 import { promiseWithResolvers } from './promises';
 
-const debugFirefox = debug.scoped('firefox');
-const debugChrome = debug.scoped('chrome');
+const debugFirefox = runnerDebug.extend('firefox');
+const debugChrome = runnerDebug.extend('chrome');
 
 export interface Runner {
   stop(): void;
@@ -44,7 +44,7 @@ async function runFirefox(options: ResolvedRunOptions): Promise<Runner> {
       shell: true,
     },
   );
-  const debugFirefoxStderr = debugFirefox.scoped('stderr');
+  const debugFirefoxStderr = debugFirefox.extend('stderr');
   browserProcess.stderr.on('data', (data: string) => {
     const message = data.toString().trim();
     debugFirefoxStderr(message);
@@ -54,7 +54,7 @@ async function runFirefox(options: ResolvedRunOptions): Promise<Runner> {
       urlRes.resolve(message.slice(28));
     }
   });
-  const debugFirefoxStdout = debugFirefox.scoped('stdout');
+  const debugFirefoxStdout = debugFirefox.extend('stdout');
   browserProcess.stdout.on('data', (data: string) => {
     const message = data.toString().trim();
     debugFirefoxStdout(message);
@@ -85,7 +85,7 @@ async function runChromium(options: ResolvedRunOptions): Promise<Runner> {
     opened.reject(Error('Timed out after 10s waiting for browser to open.'));
   }, 10e3);
 
-  const debugChromeStderr = debugChrome.scoped('stderr');
+  const debugChromeStderr = debugChrome.extend('stderr');
   browserProcess.stderr!.on('data', (data: string) => {
     const message = data.toString().trim();
     debugChromeStderr(message);
@@ -96,7 +96,7 @@ async function runChromium(options: ResolvedRunOptions): Promise<Runner> {
       opened.resolve();
     }
   });
-  const debugChromeStdout = debugChrome.scoped('stdout');
+  const debugChromeStdout = debugChrome.extend('stdout');
   browserProcess.stdout!.on('data', (data: string) => {
     const message = data.toString().trim();
     debugChromeStdout(message);