DevTools: adjustments to logging behaviour

src/debug.ts

@@ -1,4 +1,6 @@
 import { OutputChannel } from "vscode";
+import { TraceValues } from "vscode-languageclient";
+import { format } from "node:util";
 
 /**
  * for errors (and other logs in debug mode) we want to print
@@ -21,6 +23,21 @@ export class Debug {
     this.outputConsole = outputConsole;
   }
 
+  private static _traceLevel: Exclude<TraceValues, "compact"> = "off";
+  public static get traceLevel(): TraceValues {
+    return Debug._traceLevel;
+  }
+  public static set traceLevel(value: TraceValues | undefined) {
+    console.log("setting trace level to", value);
+    if (value === "compact") {
+      // we do not handle "compact" and it's not possible to set in settings, but it doesn't hurt to at least map
+      // it to another value
+      this._traceLevel = "messages";
+    } else {
+      this._traceLevel = value || "off";
+    }
+  }
+
   /**
    * Displays an info message prefixed with [INFO]
    */
@@ -55,6 +72,28 @@ export class Debug {
     this.outputConsole.appendLine(`[WARN] ${message}`);
   }
 
+  public static traceMessage(
+    short: string,
+    verbose = short,
+    ...verboseParams: any[]
+  ) {
+    if (!this.outputConsole) return;
+    if (Debug.traceLevel === "verbose") {
+      this.outputConsole.appendLine(
+        `[Trace] ${format(verbose, ...verboseParams)}`,
+      );
+    } else if (Debug.traceLevel === "messages") {
+      this.outputConsole.appendLine(`[Trace] ${short}`);
+    }
+  }
+
+  public static traceVerbose(message: string, ...params: any[]) {
+    if (!this.outputConsole) return;
+    if (Debug.traceLevel === "verbose") {
+      this.outputConsole.appendLine(`[Trace] ${format(message, ...params)}`);
+    }
+  }
+
   /**
    * TODO: enable error reporting and telemetry
    */

src/devtools/DevToolsViewProvider.ts

@@ -156,7 +156,7 @@ export class DevToolsViewProvider implements vscode.WebviewViewProvider {
         return vscode.postMessage(...args);
       };
 
-      window.addEventListener("message", (event) => { console.debug(event); });
+      // window.addEventListener("message", (event) => { console.debug(event); });
     </script>
     <script nonce="${nonce}" src="${scriptUri}"></script>
     <script nonce="${nonce}">

src/devtools/server.ts

@@ -9,10 +9,22 @@ export const devtoolsEvents = new EventEmitter<{
   fromDevTools: [unknown];
 }>();
 devtoolsEvents.addListener("toDevTools", (msg) => {
-  Debug.info("WS > DevTools: " + JSON.stringify(msg));
+  Debug.traceMessage(
+    `WS > DevTools: ${
+      msg && typeof msg === "object" && "type" in msg ? msg.type : "unknown"
+    }`,
+    "WS > DevTools: %o",
+    msg,
+  );
 });
 devtoolsEvents.addListener("fromDevTools", (msg) => {
-  Debug.info("DevTools > WS: " + JSON.stringify(msg));
+  Debug.traceMessage(
+    `DevTools > WS: ${
+      msg && typeof msg === "object" && "type" in msg ? msg.type : "unknown"
+    }`,
+    "DevTools > WS: %o",
+    msg,
+  );
 });
 
 let id = 1;

src/extension.ts

@@ -394,6 +394,20 @@ export async function activate(
     }),
   );
 
+  Debug.traceLevel = workspace
+    .getConfiguration("apollographql")
+    .get("trace.server");
+  context.subscriptions.push(
+    workspace.onDidChangeConfiguration((event) => {
+      const affected = event.affectsConfiguration("apollographql.trace.server");
+      if (affected) {
+        Debug.traceLevel = workspace
+          .getConfiguration("apollographql")
+          .get("trace.server");
+      }
+    }),
+  );
+
   await client.start();
   return {
     outputChannel,