Add global debug flag

.storybook/preview-head.html

@@ -1,3 +1,4 @@
 <script>
   window.global = window;
+  window.__debug_react_done_tracker = true;
 </script>

README.md

@@ -150,6 +150,14 @@ Unlike Suspense, with done trackers you cannot re-suspend from inside the tree,
 
 You can easily use Done Trackers and Suspense together, see [this example](https://react-done-tracker.vercel.app?path=/docs/contextual-api-suspense--docs).
 
+## How can I debug this?
+
+Run `window.__debug_react_done_tracker = true` before importing the library, and you will see logs of done tracker events, as well as the state of a done tracker tree when its doneness is being checked.
+
+You can print the state of a done tracker tree to the console with `doneTracker.log()`.
+
+Next to that, the `useDoneTrackerRaw` hook uses `useDebugValue` which displays the done tracker state in React DevTools.
+
 ## More examples
 
 It's best to take a look at [Storybook](https://react-done-tracker.vercel.app) first to get a feeling of how this library can be used.

src/debug.ts

@@ -0,0 +1,5 @@
+declare global {
+  // eslint-disable-next-line no-var
+  var __debug_react_done_tracker: boolean;
+}
+export const DEBUG = typeof globalThis === "object" && globalThis.__debug_react_done_tracker;

src/log.ts

@@ -1,3 +1,11 @@
-export const debug = console.debug.bind(window.console, "[Done Tracker]");
-export const log = console.log.bind(window.console, "[Done Tracker]");
-export const warn = console.warn.bind(window.console, "[Done Tracker]");
+import { DEBUG } from "./debug";
+
+export const debug = DEBUG
+  ? console.debug.bind(window.console, "[Done Tracker]")
+  : () => undefined;
+export const log = DEBUG
+  ? console.log.bind(window.console, "[Done Tracker]")
+  : () => undefined;
+export const warn = DEBUG
+  ? console.warn.bind(window.console, "[Done Tracker]")
+  : () => undefined;

src/node-done-tracker.ts

@@ -1,4 +1,5 @@
 import { BaseDoneTracker } from "./base-done-tracker";
+import { DEBUG } from "./debug";
 import { DoneTracker } from "./done-tracker-interface";
 import { getUniqueId } from "./get-unique-id";
 import { log, warn, debug } from "./log";
@@ -156,13 +157,15 @@ export class NodeDoneTracker extends BaseDoneTracker implements DoneTracker {
       (child) => child.done
     ).length;
 
-    console.groupCollapsed(
-      "[Done Tracker]",
-      "🧮 Calculating doneness",
-      this.id
-    );
-    this.log();
-    console.groupEnd();
+    if (DEBUG) {
+      console.groupCollapsed(
+        "[Done Tracker]",
+        "🧮 Calculating doneness",
+        this.id
+      );
+      this.log();
+      console.groupEnd();
+    }
     if (this._done) return;
     if (this._willHaveChildren && this.children.size === 0) {
       log("🚧 Will have children so not done yet", this.id);