browser-debugger-cli 0.9.0 → 0.10.0

package/dist/runtime/dom/inspectTree.js

@@ -0,0 +1,134 @@
+/**
+ * The child tree of `bdg dom inspect`: the page-side walk's children
+ * ({@link RawTreeNode}) with sizes rounded, consecutive identical siblings
+ * (same label, size and layout) grouped into one row with a count
+ * (`li.card ×33 266x107`), and cut to a number of rows in document order.
+ */
+import { containerKind } from './inspectLayoutModel.js';
+/** Default depth of the tree */
+export const DEFAULT_TREE_DEPTH = 2;
+/** Default number of rows */
+export const DEFAULT_TREE_LIMIT = 20;
+/** Characters of text kept per row */
+const ROW_TEXT_LENGTH = 30;
+/**
+ * Cut a row's text on a whole character.
+ *
+ * @param text - Text
+ * @returns At most {@link ROW_TEXT_LENGTH} characters, with `…` when cut
+ */
+export function rowText(text) {
+    const characters = Array.from(text);
+    return characters.length > ROW_TEXT_LENGTH
+        ? `${characters.slice(0, ROW_TEXT_LENGTH).join('').trimEnd()}…`
+        : text;
+}
+/**
+ * One child as a tree row (its children converted too).
+ *
+ * @param raw - Child from the page-side walk
+ * @returns Tree row
+ */
+function toNode(raw) {
+    const layout = containerKind(raw.display);
+    const children = raw.children ? groupSiblings(raw.children.map(toNode)) : undefined;
+    return {
+        element: raw.label,
+        x: Math.round(raw.x * 10) / 10,
+        y: Math.round(raw.y * 10) / 10,
+        w: Math.round(raw.w),
+        h: Math.round(raw.h),
+        ...(layout && { layout }),
+        ...(raw.text && { text: rowText(raw.text) }),
+        ...(children && children.length > 0 && { children }),
+        ...(raw.childCount && { childCount: raw.childCount }),
+        ...(raw.hidden && { hiddenChildren: raw.hidden }),
+    };
+}
+/**
+ * Whether two siblings look the same in the tree.
+ *
+ * @param a - Row
+ * @param b - Row
+ * @returns True for the same label, size and layout
+ */
+function identical(a, b) {
+    return a.element === b.element && a.w === b.w && a.h === b.h && a.layout === b.layout;
+}
+/**
+ * Group runs of identical siblings into one row with a count. A group keeps
+ * its text only when every member has the same, and lists no children.
+ *
+ * @param nodes - Sibling rows
+ * @returns Rows with runs grouped
+ */
+export function groupSiblings(nodes) {
+    const grouped = [];
+    for (let i = 0; i < nodes.length;) {
+        const first = nodes[i];
+        let run = 1;
+        while (i + run < nodes.length && identical(first, nodes[i + run]))
+            run++;
+        if (run === 1) {
+            grouped.push(first);
+        }
+        else {
+            const members = nodes.slice(i, i + run);
+            const sameText = members.every((member) => member.text === first.text);
+            const { children: _children, childCount: _count, hiddenChildren: _hidden, text, ...row } = first;
+            grouped.push({ ...row, ...(sameText && text && { text }), count: run });
+        }
+        i += run;
+    }
+    return grouped;
+}
+/**
+ * Rows a node takes in the tree (itself and its listed descendants).
+ *
+ * @param node - Row
+ * @returns Row count
+ */
+function rowCount(node) {
+    return 1 + (node.children ?? []).reduce((sum, child) => sum + rowCount(child), 0);
+}
+/**
+ * Keep the first rows in document order.
+ *
+ * @param nodes - Rows
+ * @param budget - Rows still allowed (decremented)
+ * @returns Kept rows and the number left out
+ */
+function prune(nodes, budget) {
+    const kept = [];
+    let dropped = 0;
+    for (const node of nodes) {
+        if (budget.left <= 0) {
+            dropped += rowCount(node);
+            continue;
+        }
+        budget.left--;
+        if (!node.children) {
+            kept.push(node);
+            continue;
+        }
+        const sub = prune(node.children, budget);
+        dropped += sub.dropped;
+        const { children: _children, ...row } = node;
+        kept.push(sub.kept.length > 0 ? { ...row, children: sub.kept } : row);
+    }
+    return { kept, dropped };
+}
+/**
+ * The child tree from the page-side walk: grouped, then cut to `limit` rows.
+ *
+ * @param raw - Children from the walk
+ * @param limit - Rows shown at most
+ * @param skipped - Children the walk did not reach (counted as left out)
+ * @returns Rows and the number of rows left out
+ */
+export function buildTree(raw, limit, skipped = 0) {
+    const rows = groupSiblings(raw.map(toNode));
+    const { kept, dropped } = prune(rows, { left: limit });
+    return { children: kept, moreRows: dropped + skipped };
+}
+//# sourceMappingURL=inspectTree.js.map

package/dist/runtime/dom/inspectVariables.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `var()` in declared values: which custom properties a value uses, which of
+ * them are not set, and the value with them substituted. A fallback counts
+ * only when its custom property is not set.
+ */
+import type { StyleMap } from './inspectLayoutModel.js';
+/**
+ * The custom properties a value uses that are not set and have no fallback:
+ * the fallback of an unset one is used instead (and checked in turn).
+ *
+ * @param value - Value as written
+ * @param style - Computed styles (custom properties included)
+ * @returns Names of the unset custom properties
+ */
+export declare function unsetVariables(value: string, style: StyleMap): string[];
+/**
+ * The custom properties a value takes its value from (fallbacks only when
+ * used).
+ *
+ * @param value - Value as written
+ * @param style - Computed styles
+ * @returns Names
+ */
+export declare function usedVariables(value: string, style: StyleMap): string[];
+/**
+ * A value with its custom properties substituted.
+ *
+ * @param value - Value as written
+ * @param style - Computed styles
+ * @returns Substituted value (unset ones without fallback left as written)
+ */
+export declare function substituteVariables(value: string, style: StyleMap): string;
+//# sourceMappingURL=inspectVariables.d.ts.map

package/dist/runtime/dom/inspectVariables.js

@@ -0,0 +1,94 @@
+/**
+ * `var()` in declared values: which custom properties a value uses, which of
+ * them are not set, and the value with them substituted. A fallback counts
+ * only when its custom property is not set.
+ */
+/**
+ * The top-level `var()` calls of a value.
+ *
+ * @param value - Value as written
+ * @returns Calls in order (nested ones are inside a fallback)
+ */
+function varCalls(value) {
+    const calls = [];
+    for (let start = value.indexOf('var('); start !== -1; start = value.indexOf('var(', start + 1)) {
+        const end = closingParen(value, start + 3);
+        const [name = '', ...fallback] = value.slice(start + 4, end).split(',');
+        calls.push({
+            start,
+            end,
+            name: name.trim(),
+            ...(fallback.length > 0 && { fallback: fallback.join(',').trim() }),
+        });
+        start = end;
+    }
+    return calls;
+}
+/**
+ * Index of the parenthesis that closes the one at `open`.
+ *
+ * @param text - Text
+ * @param open - Index of `(`
+ * @returns Index of the matching `)` (the end of the text when unbalanced)
+ */
+function closingParen(text, open) {
+    let depth = 0;
+    for (let i = open; i < text.length; i++) {
+        if (text[i] === '(')
+            depth++;
+        if (text[i] === ')' && --depth === 0)
+            return i;
+    }
+    return text.length;
+}
+/**
+ * The custom properties a value uses that are not set and have no fallback:
+ * the fallback of an unset one is used instead (and checked in turn).
+ *
+ * @param value - Value as written
+ * @param style - Computed styles (custom properties included)
+ * @returns Names of the unset custom properties
+ */
+export function unsetVariables(value, style) {
+    return varCalls(value).flatMap((call) => {
+        if (style[call.name] !== undefined)
+            return [];
+        return call.fallback !== undefined ? unsetVariables(call.fallback, style) : [call.name];
+    });
+}
+/**
+ * The custom properties a value takes its value from (fallbacks only when
+ * used).
+ *
+ * @param value - Value as written
+ * @param style - Computed styles
+ * @returns Names
+ */
+export function usedVariables(value, style) {
+    return varCalls(value).flatMap((call) => style[call.name] !== undefined || call.fallback === undefined
+        ? [call.name]
+        : usedVariables(call.fallback, style));
+}
+/**
+ * A value with its custom properties substituted.
+ *
+ * @param value - Value as written
+ * @param style - Computed styles
+ * @returns Substituted value (unset ones without fallback left as written)
+ */
+export function substituteVariables(value, style) {
+    let result = '';
+    let last = 0;
+    for (const call of varCalls(value)) {
+        const set = style[call.name];
+        const replacement = set !== undefined
+            ? set.trim()
+            : call.fallback !== undefined
+                ? substituteVariables(call.fallback, style)
+                : value.slice(call.start, call.end + 1);
+        result += value.slice(last, call.start) + replacement;
+        last = call.end + 1;
+    }
+    return result + value.slice(last);
+}
+//# sourceMappingURL=inspectVariables.js.map

package/dist/runtime/dom/inspectWhyModel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `dom inspect --why <property>`: every declaration of a property on the
+ * element, the winner first, with `var()` values substituted and where the
+ * winner's custom properties are set. A shorthand gives one answer when one
+ * declaration sets all its longhands (listing every declaration it beats on
+ * any of them), else one per longhand.
+ */
+import type { InspectWhy } from '../../ipc/protocol/inspectTypes.js';
+import { type Resolution } from './inspectCascade.js';
+import type { CascadeInput, PropertyGroup } from './inspectCascadeModel.js';
+/**
+ * `--why` for a property.
+ *
+ * @param group - The property and its longhands
+ * @param cascade - Resolved properties
+ * @param input - Matched rules, computed style and the label function
+ * @returns One entry, or one per longhand when they differ
+ */
+export declare function buildWhy(group: PropertyGroup, cascade: Map<string, Resolution>, input: CascadeInput): InspectWhy[];
+//# sourceMappingURL=inspectWhyModel.d.ts.map

package/dist/runtime/dom/inspectWhyModel.js

@@ -0,0 +1,134 @@
+/**
+ * `dom inspect --why <property>`: every declaration of a property on the
+ * element, the winner first, with `var()` values substituted and where the
+ * winner's custom properties are set. A shorthand gives one answer when one
+ * declaration sets all its longhands (listing every declaration it beats on
+ * any of them), else one per longhand.
+ */
+import { normalizeProperty } from './inspectAllStyles.js';
+import { resolveCascade } from './inspectCascade.js';
+import { substituteVariables, unsetVariables, usedVariables, } from './inspectVariables.js';
+/**
+ * `--why` for a property.
+ *
+ * @param group - The property and its longhands
+ * @param cascade - Resolved properties
+ * @param input - Matched rules, computed style and the label function
+ * @returns One entry, or one per longhand when they differ
+ */
+export function buildWhy(group, cascade, input) {
+    const whys = group.longhands.map((longhand) => whyOf(longhand, cascade.get(longhand), input));
+    const [first] = whys;
+    if (!first || group.shorthand === undefined)
+        return whys;
+    const winner = JSON.stringify(first.chain[0]);
+    if (!whys.every((why) => JSON.stringify(why.chain[0]) === winner))
+        return whys;
+    const values = whys.map((why) => why.computed);
+    const computed = values.every((value) => value === first.computed)
+        ? first.computed
+        : values.join(' ');
+    const beaten = whys.flatMap((why) => why.chain.slice(1));
+    const overridden = [...new Map(beaten.map((entry) => [JSON.stringify(entry), entry])).values()];
+    const chain = [...first.chain.slice(0, 1), ...overridden];
+    return [{ ...first, property: group.shorthand, computed, chain }];
+}
+/**
+ * `--why` for one longhand.
+ *
+ * @param property - Longhand
+ * @param resolution - Its resolution
+ * @param input - Matched rules, computed style and the label function
+ * @returns Why
+ */
+function whyOf(property, resolution, input) {
+    const winner = resolution?.winner;
+    const chain = [
+        ...(winner
+            ? [whyEntry(winner, winner.ancestor !== undefined ? 'inherited' : 'applied', input)]
+            : []),
+        ...(resolution?.overridden ?? []).map((d) => whyEntry(d, 'overridden', input)),
+    ];
+    const variables = winner ? variableSources(winner, input) : [];
+    return {
+        property,
+        computed: normalizeProperty(property, input.style[property] ?? ''),
+        chain,
+        ...(variables.length > 0 && { variables }),
+    };
+}
+/**
+ * One declaration in a `--why` chain: a shorthand's as written, `var()`
+ * substituted (or the custom properties that are not set), with the
+ * selector's specificity.
+ *
+ * @param declaration - Declaration
+ * @param status - Applied, overridden or inherited
+ * @param input - Computed style and the label function
+ * @returns Entry
+ */
+function whyEntry(declaration, status, input) {
+    const value = declaration.via ? (declaration.written ?? declaration.value) : declaration.value;
+    const unset = value.includes('var(') ? unsetVariables(value, input.style) : [];
+    const resolved = value.includes('var(') ? resolvedValue(declaration, value, input) : value;
+    const { specificity, layer, condition } = declaration.source;
+    return {
+        value,
+        ...(declaration.via && { via: declaration.via }),
+        ...(unset.length > 0 ? { unset } : resolved !== value && { resolved }),
+        source: input.label(declaration),
+        ...(specificity && { specificity }),
+        status,
+        ...(declaration.important && { important: true }),
+        ...(layer && { layer }),
+        ...(condition && { condition }),
+    };
+}
+/** How many levels of custom properties set from others are followed */
+const MAX_VARIABLE_DEPTH = 5;
+/**
+ * Where the custom properties the winning value uses are set, and those
+ * their values use in turn (`--bs-btn-border-width: var(--bs-border-width)`).
+ *
+ * @param winner - Winning declaration
+ * @param input - Matched rules, computed style and the label function
+ * @returns The variables with a declaration (on the element or an ancestor)
+ */
+function variableSources(winner, input) {
+    const found = [];
+    let names = usedVariables(winner.written ?? winner.value, input.style);
+    for (let depth = 0; names.length > 0 && depth < MAX_VARIABLE_DEPTH; depth++) {
+        const cascade = resolveCascade(input.matched, names);
+        const next = names.flatMap((name) => {
+            const declaration = cascade.get(name)?.winner;
+            if (!declaration || found.some((variable) => variable.name === name))
+                return [];
+            found.push({
+                name,
+                value: declaration.value,
+                source: input.label(declaration),
+                ...(declaration.ancestor !== undefined && { inherited: declaration.ancestor }),
+            });
+            return usedVariables(declaration.value, input.style);
+        });
+        names = [...new Set(next)];
+    }
+    return found;
+}
+/**
+ * A `var()` value substituted; a color longhand's in hex (Tailwind's
+ * `lab()` and `oklch()` tokens are unreadable).
+ *
+ * @param declaration - Declaration
+ * @param value - Its value as shown
+ * @param input - Computed style
+ * @returns Substituted value
+ */
+function resolvedValue(declaration, value, input) {
+    const substituted = substituteVariables(value, input.style);
+    const isColor = declaration.via === undefined && declaration.property.endsWith('color');
+    return isColor && !substituted.includes('var(')
+        ? normalizeProperty(declaration.property, substituted)
+        : substituted;
+}
+//# sourceMappingURL=inspectWhyModel.js.map

package/dist/runtime/dom/layout.d.ts

@@ -30,7 +30,11 @@ export interface RawElementLayout {
     text: string;
     context: string;
     geometry: ElementGeometry;
-    coveredBy: string | null;
+    /** The element on top at its visible center, and whether it paints nothing there */
+    cover: {
+        element: string;
+        transparent: boolean;
+    } | null;
     computed: LayoutComputedStyle;
 }
 /** What {@link LAYOUT_JS} returns. */

package/dist/runtime/dom/layout.js

@@ -150,6 +150,12 @@ const LAYOUT_JS = `function (found, index, limit) {
     }
     return best;
   };
+  const paintsNothing = (node) => {
+    const s = node.ownerDocument.defaultView.getComputedStyle(node);
+    const clearColor = (c) => c === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(c);
+    const ownText = Array.from(node.childNodes).some((n) => n.nodeType === 3 && n.data.trim() !== '');
+    return clearColor(s.backgroundColor) && s.backgroundImage === 'none' && s.boxShadow === 'none' && !ownText;
+  };
   const hitTestable = (node) => node.ownerDocument.defaultView.getComputedStyle(node).pointerEvents !== 'none';
   const coveredBy = (el, g) => {
     const center = hitTestable(el) && visibleCenter(el, g);
@@ -164,7 +170,7 @@ const LAYOUT_JS = `function (found, index, limit) {
       y += offset.y;
       cover = coverAt(view.frameElement, x, y);
     }
-    return cover ? describe(cover) : null;
+    return cover ? { element: describe(cover), transparent: paintsNothing(cover) } : null;
   };
   const elements = picked.map(([i, el]) => {
     const style = el.ownerDocument.defaultView.getComputedStyle(el);
@@ -176,7 +182,7 @@ const LAYOUT_JS = `function (found, index, limit) {
       text: String(textOf(el)).replace(/\\s+/g, ' ').trim().slice(0, 1000),
       context: contextOf(el),
       geometry: geometry,
-      coveredBy: geometry.hidden ? null : coveredBy(el, geometry),
+      cover: geometry.hidden ? null : coveredBy(el, geometry),
       computed: { display: style.display, visibility: style.visibility, position: style.position, opacity: style.opacity, zIndex: style.zIndex }
     };
   });
@@ -324,7 +330,8 @@ function elementLayout(raw, page) {
         },
         viewport: { x: Math.round(rect.x), y: Math.round(rect.y) },
         ...placement,
-        ...(inView && raw.coveredBy && { coveredBy: raw.coveredBy }),
+        ...(inView && raw.cover && { coveredBy: raw.cover.element }),
+        ...(inView && raw.cover?.transparent && { coverTransparent: true }),
         ...(raw.geometry.invisible && { invisible: raw.geometry.invisible }),
         ...(raw.geometry.inert && { inert: true }),
         computed: raw.computed,

package/dist/runtime/dom/listenerPageScripts.d.ts

@@ -1,8 +1,9 @@
 /**
  * Page-side functions of `bdg dom listeners`: what only the page can tell
  * about an element's listeners (handler names and identities, React root
- * containers, the handlers behind jQuery's dispatcher, React's `on…` props
- * of the element and its ancestors, the element's iframe).
+ * containers, the handlers behind jQuery's dispatcher and Preact's event
+ * proxy, React's `on…` props of the element and its ancestors, the
+ * element's iframe).
  *
  * Each piece is a function expression in a string, combined into
  * {@link ELEMENT_INFO_JS}; every lookup of page globals is guarded, so a
@@ -14,17 +15,18 @@ export declare const MAX_JQUERY_HANDLERS = 50;
 export declare const MAX_REACT_HANDLERS = 50;
 /**
  * Page function, called on the element with the listeners (position in the
- * chain and event type of each), the requested event types (null for all;
+ * chain, event type and capture flag of each), the requested event types (null for all;
  * React props are filtered before the limit), then the chain's objects, then each
  * listener's handler, then the function each handler calls (a bound
  * function's target, else null).
  *
- * Returns `[info, ...jQueryHandlers, ...reactHandlers]`. `info` has the
+ * Returns `[info, ...jQueryAndPreactHandlers, ...reactHandlers]`. `info` has the
  * iframe element holding the element's document (`frame`), a framework
  * label per chain entry (`roots`), per listener the handler's name, the
  * identity and name of the function it calls (equal identities are the same
  * function object) and, for jQuery's dispatcher, the jQuery handlers that
- * run for the element; then the React `on…` props that run for the
+ * run for the element, for Preact's event proxy the handler Preact runs
+ * (`preact`); then the React `on…` props that run for the
  * element's events (`react`, see {@link REACT_HANDLERS_JS}). Their functions follow `info` in the same order.
  * After {@link MAX_JQUERY_HANDLERS}, dispatchers stay unresolved and are
  * counted in `jquerySkipped`; after {@link MAX_REACT_HANDLERS}, React props
@@ -44,6 +46,10 @@ export interface ElementInfo {
             selector: string | null;
             name: string;
         }>;
+        /** The handler Preact runs from this listener (set when it is Preact's event proxy) */
+        preact?: {
+            name: string;
+        };
     }>;
     /** jQuery handlers left unresolved (over the limit) */
     jquerySkipped: number;

package/dist/runtime/dom/listenerPageScripts.js

@@ -1,8 +1,9 @@
 /**
  * Page-side functions of `bdg dom listeners`: what only the page can tell
  * about an element's listeners (handler names and identities, React root
- * containers, the handlers behind jQuery's dispatcher, React's `on…` props
- * of the element and its ancestors, the element's iframe).
+ * containers, the handlers behind jQuery's dispatcher and Preact's event
+ * proxy, React's `on…` props of the element and its ancestors, the
+ * element's iframe).
  *
  * Each piece is a function expression in a string, combined into
  * {@link ELEMENT_INFO_JS}; every lookup of page globals is guarded, so a
@@ -95,12 +96,30 @@ const REACT_PROPS_JS = `(node) => {
 }`;
 /** Most fibers walked up from the element (guards against cycles) */
 const MAX_FIBER_STEPS = 1000;
+/**
+ * `(fiber) => fiber | null`: for a React root's fiber, the fiber of the
+ * nearest React-rendered DOM element at or above its container (where
+ * React continues for nested roots: an outer root's handlers run for
+ * events in an inner one); null for other fibers and for top-level roots.
+ */
+const OUTER_ROOT_FIBER_JS = `(fiber) => {
+  const own = ${OWN_VALUE_JS};
+  const container = own(own(fiber, 'stateNode'), 'containerInfo');
+  try {
+    for (let node = container; node && typeof node === 'object'; node = node.parentNode) {
+      const outer = (${REACT_FIBER_JS})(node);
+      if (outer) return outer;
+    }
+  } catch (e) { return null; }
+  return null;
+}`;
 /**
  * `(element, nodes) => Array<{ node, position }>`: the DOM elements whose
  * React props run for events on the element, nearest first. With a fiber,
  * the host components on its `.return` path (so a portal's React parents
- * count and DOM parents outside the React path don't); `position` is the
- * node's place in the chain, null outside it. Without one, the chain's elements.
+ * count and DOM parents outside the React path don't), continued from a
+ * nested root's container into the outer root; `position` is the node's
+ * place in the chain, null outside it. Without one, the chain's elements.
  */
 const REACT_HOSTS_JS = `(element, nodes) => {
   const own = ${OWN_VALUE_JS};
@@ -115,10 +134,70 @@ const REACT_HOSTS_JS = `(element, nodes) => {
       const position = nodes.indexOf(node);
       hosts.push({ node, position: position === -1 ? null : position });
     }
-    fiber = own(fiber, 'return');
+    fiber = own(fiber, 'return') || (${OUTER_ROOT_FIBER_JS})(fiber);
   }
   return hosts;
 }`;
+/** Longest source of a minified Preact event proxy (Preact 10 and 11: about 120 characters) */
+const MAX_PREACT_PROXY_LENGTH = 200;
+/**
+ * `(source, read) => boolean`: whether a proxy source calls the handler it
+ * reads (`read`: the match of `this.<key>[<event>.type + …]`) with the
+ * event, directly (`this.l[e.type + false](e)`) or through a variable
+ * (`var t = this.l[u.type + n]; … return t(l.event ? l.event(u) : u)`).
+ */
+const CALLS_READ_HANDLER_JS = `(source, read) => {
+  const event = read[2];
+  const passesEvent = (from) => {
+    const open = source.indexOf('(', from);
+    const close = source.indexOf(')', open);
+    if (open === -1 || close === -1 || source.slice(from, open).trim() !== '') return false;
+    return source.slice(open + 1, close).split(/[^\\w$]+/).includes(event);
+  };
+  const end = read.index + read[0].length;
+  if (passesEvent(end)) return true;
+  const assigned = /([\\w$]+)\\s*=\\s*$/.exec(source.slice(0, read.index));
+  if (!assigned) return false;
+  const variable = assigned[1];
+  for (let at = source.indexOf(variable, end); at !== -1; at = source.indexOf(variable, at + 1)) {
+    const before = source[at - 1] || '';
+    if (/[\\w$.]/.test(before)) continue;
+    if (passesEvent(at + variable.length)) return true;
+  }
+  return false;
+}`;
+/**
+ * `(node, type, capture, handler) => function | null`: the handler Preact
+ * runs from `handler` when it is Preact's event proxy on `node`. Preact
+ * keeps an element's handlers in an object on the element under a mangled
+ * key (`l` in Preact 10, `__e` in 11, `_listeners` unmangled), keyed by
+ * event type plus the capture flag (`clickfalse`); the key is read from the
+ * proxy's own source (`this.l[e.type + useCapture]`), so it follows
+ * Preact's renames. A proxy named `eventProxy`/`eventProxyCapture`
+ * (unminified builds; Preact 8 keys by type alone) is accepted as such;
+ * any other must look like Preact's minified one: a short function whose
+ * key holds a function for exactly the type plus capture flag, which it
+ * calls with the event. A generic dispatcher (`this.handlers[e.type](e)`)
+ * is left alone.
+ */
+const PREACT_HANDLER_JS = `(node, type, capture, handler) => {
+  const own = ${OWN_VALUE_JS};
+  try {
+    if (typeof handler !== 'function' || !node || typeof node !== 'object') return null;
+    const source = Function.prototype.toString.call(handler);
+    const read = /this\\.([\\w$]+)\\[([\\w$]+)\\.type(?:\\s*\\+\\s*(![01]|true|false|[\\w$]+))?\\s*\\]/.exec(source);
+    const store = read ? own(node, read[1]) : undefined;
+    if (!store || typeof store !== 'object') return null;
+    const flag = { true: true, '!0': true, false: false, '!1': false }[read[3]];
+    if (flag !== undefined && flag !== capture) return null;
+    const fn = own(store, read[3] ? type + capture : type);
+    if (typeof fn !== 'function') return null;
+    const name = own(handler, 'name');
+    if (name === 'eventProxy' || name === 'eventProxyCapture') return fn;
+    const minified = read[3] && source.length < ${MAX_PREACT_PROXY_LENGTH};
+    return minified && (${CALLS_READ_HANDLER_JS})(source, read) ? fn : null;
+  } catch (e) { return null; }
+}`;
 /** `(node) => string`: CDP-like description of an element, e.g. `div#app.card` */
 const DESCRIBE_NODE_JS = `(node) => {
   try {
@@ -222,17 +301,18 @@ const REACT_HANDLERS_JS = `(element, nodes, wanted, fns) => {
 }`;
 /**
  * Page function, called on the element with the listeners (position in the
- * chain and event type of each), the requested event types (null for all;
+ * chain, event type and capture flag of each), the requested event types (null for all;
  * React props are filtered before the limit), then the chain's objects, then each
  * listener's handler, then the function each handler calls (a bound
  * function's target, else null).
  *
- * Returns `[info, ...jQueryHandlers, ...reactHandlers]`. `info` has the
+ * Returns `[info, ...jQueryAndPreactHandlers, ...reactHandlers]`. `info` has the
  * iframe element holding the element's document (`frame`), a framework
  * label per chain entry (`roots`), per listener the handler's name, the
  * identity and name of the function it calls (equal identities are the same
  * function object) and, for jQuery's dispatcher, the jQuery handlers that
- * run for the element; then the React `on…` props that run for the
+ * run for the element, for Preact's event proxy the handler Preact runs
+ * (`preact`); then the React `on…` props that run for the
  * element's events (`react`, see {@link REACT_HANDLERS_JS}). Their functions follow `info` in the same order.
  * After {@link MAX_JQUERY_HANDLERS}, dispatchers stay unresolved and are
  * counted in `jquerySkipped`; after {@link MAX_REACT_HANDLERS}, React props
@@ -264,7 +344,13 @@ export const ELEMENT_INFO_JS = `function (listeners, types, ...rest) {
     const entry = { name: typeof handler === 'function' ? handler.name : null, identity: identity(target),
       targetName: typeof target === 'function' ? target.name : null };
     const resolved = jq ? (${JQUERY_HANDLERS_JS})(jq, this, nodes[listener.position], listener.type, handler) : null;
-    if (!resolved) return entry;
+    if (!resolved) {
+      const preact = (${PREACT_HANDLER_JS})(nodes[listener.position], listener.type, listener.capture, handler);
+      if (!preact) return entry;
+      fns.push(preact);
+      const preactName = (${OWN_VALUE_JS})(preact, 'name');
+      return { ...entry, preact: { name: typeof preactName === 'string' ? preactName : '' } };
+    }
     if (fns.length + resolved.length > ${MAX_JQUERY_HANDLERS}) {
       jquerySkipped += resolved.length;
       return entry;