browser-debugger-cli 0.9.0 → 0.10.0

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

@@ -66,7 +66,11 @@ export interface HandlerDetails {
     targetName?: string | undefined;
     /** Handlers jQuery runs from this listener (set when it is jQuery's dispatcher) */
     jquery?: ResolvedHandler[] | undefined;
+    /** The handler Preact runs from this listener (set when it is Preact's event proxy) */
+    preact?: FrameworkHandler | undefined;
 }
+/** A framework's handler found behind its dispatcher, of the dispatcher's event type */
+export type FrameworkHandler = Omit<ResolvedHandler, 'type'>;
 /** A handler registered through a framework, found behind its dispatcher */
 export interface ResolvedHandler {
     /** Event type it was registered for */

package/dist/runtime/dom/listenerSummary.js

@@ -140,14 +140,16 @@ function toElementListener(listener, found, name) {
     };
 }
 /**
- * Report entries for a jQuery dispatcher: one per jQuery handler that runs
- * for the element, with the dispatcher's flags.
+ * Report entries for a framework's dispatcher: one per handler it runs for
+ * the element (jQuery's handlers, Preact's handler), with the dispatcher's
+ * type and flags.
  *
- * @param dispatcher - Entry built for jQuery's own listener
+ * @param dispatcher - Entry built for the framework's own listener
  * @param handlers - Handlers behind it
+ * @param framework - The framework
  * @returns Entries naming the real handlers
  */
-function jqueryListeners(dispatcher, handlers) {
+function frameworkListeners(dispatcher, handlers, framework) {
     return handlers.map((resolved) => ({
         ...dispatcher,
         handler: {
@@ -157,10 +159,25 @@ function jqueryListeners(dispatcher, handlers) {
             lineNumber: resolved.lineNumber,
             columnNumber: resolved.columnNumber,
         },
-        framework: 'jQuery',
+        framework,
         ...(resolved.selector && { delegateSelector: resolved.selector }),
     }));
 }
+/**
+ * Report entries for one listener: itself, or the handlers behind a
+ * framework's dispatcher.
+ *
+ * @param built - Entry built for the listener
+ * @param detail - What the page reported about its handler
+ * @returns Entries
+ */
+function resolveDispatcher(built, detail) {
+    if (detail.jquery)
+        return frameworkListeners(built, detail.jquery, 'jQuery');
+    if (detail.preact)
+        return frameworkListeners(built, [detail.preact], 'Preact');
+    return [built];
+}
 /** Chain position given to React parents outside the chain: after the last one inside */
 const OUTSIDE_CHAIN_OFFSET = 0.5;
 /**
@@ -319,11 +336,11 @@ export function collapseFrameworkRoots(placed) {
     };
 }
 /**
- * Report entries of every listener, jQuery dispatchers replaced by the
- * handlers they run for the element.
+ * Report entries of every listener, jQuery dispatchers and Preact proxies
+ * replaced by the handlers they run for the element.
  *
  * @param found - Listeners per chain entry, in chain order
- * @param details - Per flattened listener: handler name, jQuery handlers
+ * @param details - Per flattened listener: handler name, jQuery or Preact handlers
  * @returns Entries in chain order
  */
 function placeListeners(found, details) {
@@ -331,7 +348,7 @@ function placeListeners(found, details) {
     return flat.flatMap(({ entry, listener }, i) => {
         const detail = details[i] ?? {};
         const built = toElementListener(listener, entry, detail.name);
-        const listeners = detail.jquery ? jqueryListeners(built, detail.jquery) : [built];
+        const listeners = resolveDispatcher(built, detail);
         return listeners.map((item) => ({
             position: entry.position,
             entry: entry.entry,

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

@@ -86,6 +86,11 @@ export declare const FILL_READ_BACK_SCRIPT = "(() => {\n  const check = window._
  * When selector matches multiple elements without index, prioritizes visible ones.
  * A `<label>` is clicked (and double-clicked) through its control when that
  * is visible ({@link LABEL_CONTROL_JS}), reported as e.g. `input (via label)`.
+ * A hover first notes what is hidden around the element
+ * ({@link REVEAL_SNAPSHOT_JS}), so its result can say what it revealed. For
+ * a press, a probe (`window.__bdgPressProbe`) records whether the press
+ * reaches the element, and otherwise which element it landed on: a browser
+ * dialog or bubble can swallow input while the page looks normal.
  */
 export declare const CLICK_ELEMENT_SCRIPT: string;
 /**

package/dist/runtime/dom/reactEventHelpers.js

@@ -6,6 +6,7 @@
  * to properly trigger React's event system.
  */
 import { FILL_REFUSALS, LABEL_WITHOUT_CONTROL, NAME_QUERY_PLACEHOLDER, VIA_LABEL_SUFFIX, } from '../../errors/messages.js';
+import { REVEAL_SNAPSHOT_JS } from './actionEffectsScripts.js';
 import { ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS } from './elementInfo.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS } from './targetNode.js';
 /**
@@ -437,6 +438,11 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
  * When selector matches multiple elements without index, prioritizes visible ones.
  * A `<label>` is clicked (and double-clicked) through its control when that
  * is visible ({@link LABEL_CONTROL_JS}), reported as e.g. `input (via label)`.
+ * A hover first notes what is hidden around the element
+ * ({@link REVEAL_SNAPSHOT_JS}), so its result can say what it revealed. For
+ * a press, a probe (`window.__bdgPressProbe`) records whether the press
+ * reaches the element, and otherwise which element it landed on: a browser
+ * dialog or bubble can swallow input while the page looks normal.
  */
 export const CLICK_ELEMENT_SCRIPT = `
 (function(selector, parts, index, action) {
@@ -588,12 +594,14 @@ export const CLICK_ELEMENT_SCRIPT = `
   else if (!hasSize) obstruction = 'zero-size';
   else if (!hittable) obstruction = 'covered by another element' + coveredBy();
 
-  // Records whether the coming mouse press reaches the element at all; a
-  // browser dialog or bubble can swallow input while the page looks normal.
+  if (action === 'hover') (${REVEAL_SNAPSHOT_JS})(el);
+
   if (hittable && action !== 'hover') {
-    const probe = { reached: false };
+    const probe = { reached: false, landedOn: null };
     const markReached = (event) => {
-      if (event.composedPath().includes(el)) probe.reached = true;
+      const path = event.composedPath();
+      if (path.includes(el)) probe.reached = true;
+      else if (!probe.landedOn && path[0] && path[0].nodeType === 1) probe.landedOn = describe(path[0]);
     };
     ['pointerdown', 'mousedown'].forEach((type) => view.addEventListener(type, markReached, true));
     probe.stop = () => ['pointerdown', 'mousedown'].forEach((type) => view.removeEventListener(type, markReached, true));

package/dist/runtime/page/emulation.d.ts

@@ -32,6 +32,26 @@ export declare function applySessionEmulation(cdp: CDPConnection, emulation: {
     viewport?: ViewportSize;
     colorScheme?: ColorScheme;
 }): Promise<void>;
+/** Page emulation of a session: what `--viewport` and `--color-scheme` set */
+export interface SessionEmulation {
+    viewport?: ViewportSize;
+    colorScheme?: ColorScheme;
+}
+/**
+ * Change the page emulation mid-session (`bdg page emulate`): set the
+ * viewport or the color scheme, or clear both (back to the browser window
+ * and the system setting).
+ *
+ * @param cdp - Session connection
+ * @param current - Emulation now in effect
+ * @param change - What to set, or `reset`
+ * @param record - Called after each change Chrome accepted (so a later
+ *   failure leaves the recorded emulation true)
+ * @returns Emulation in effect afterwards
+ */
+export declare function emulatePage(cdp: CDPConnection, current: SessionEmulation, change: SessionEmulation & {
+    reset?: boolean;
+}, record: (emulation: SessionEmulation) => void): Promise<SessionEmulation>;
 /** What the page currently renders with, for `bdg status` */
 export interface PageAppearance {
     /** Layout viewport without scrollbars (as `dom layout` reports it) */

package/dist/runtime/page/emulation.js

@@ -37,6 +37,43 @@ export async function applySessionEmulation(cdp, emulation) {
         });
     }
 }
+/**
+ * Change the page emulation mid-session (`bdg page emulate`): set the
+ * viewport or the color scheme, or clear both (back to the browser window
+ * and the system setting).
+ *
+ * @param cdp - Session connection
+ * @param current - Emulation now in effect
+ * @param change - What to set, or `reset`
+ * @param record - Called after each change Chrome accepted (so a later
+ *   failure leaves the recorded emulation true)
+ * @returns Emulation in effect afterwards
+ */
+export async function emulatePage(cdp, current, change, record) {
+    let state = current;
+    const step = async (send, next) => {
+        await send();
+        state = next;
+        record(state);
+    };
+    const { viewport: _viewport, colorScheme, ...rest } = state;
+    if (change.reset || change.viewport) {
+        await step(() => change.viewport
+            ? cdp.send('Emulation.setDeviceMetricsOverride', viewportOverride(change.viewport))
+            : cdp.send('Emulation.clearDeviceMetricsOverride', {}), {
+            ...rest,
+            ...(colorScheme && { colorScheme }),
+            ...(change.viewport && { viewport: change.viewport }),
+        });
+    }
+    if (change.reset || change.colorScheme) {
+        const { colorScheme: _scheme, ...withoutScheme } = state;
+        await step(() => cdp.send('Emulation.setEmulatedMedia', {
+            features: [{ name: 'prefers-color-scheme', value: change.colorScheme ?? '' }],
+        }), { ...withoutScheme, ...(change.colorScheme && { colorScheme: change.colorScheme }) });
+    }
+    return state;
+}
 /** How long `bdg status` waits for the page to report its appearance */
 const APPEARANCE_TIMEOUT_MS = 1000;
 /**

package/dist/telemetry/a11y.d.ts

@@ -24,6 +24,16 @@ export declare function buildTreeFromRawNodes(rawNodes: Protocol.Accessibility.A
  * @throws Error if CDP Accessibility domain fails
  */
 export declare function collectA11yTree(): Promise<A11yTree>;
+/**
+ * The tree with the values of secret fields masked ({@link MASKED_VALUE},
+ * whatever their length), and the names and values of the nodes inside them
+ * left out (the text Chrome lists under a text field is its value).
+ *
+ * @param tree - Accessibility tree
+ * @param secretIds - Node ids of secret fields
+ * @returns The same tree (nodes replaced in place)
+ */
+export declare function maskSecretValues(tree: A11yTree, secretIds: ReadonlySet<string>): A11yTree;
 /**
  * Queries accessibility tree by pattern (role, name, description).
  *

package/dist/telemetry/a11y.js

@@ -1,7 +1,9 @@
 import { CommandError } from '../errors/index.js';
 import { unknownQueryFieldError } from '../errors/messages.js';
 import { callCDP } from '../ipc/client.js';
+import { MASKED_VALUE, SENSITIVE_FIELD_JS } from '../runtime/dom/elementInfo.js';
 import { childFrameIds } from '../runtime/dom/frameLayout.js';
+import { ConcurrencyLimiter } from '../utils/concurrency.js';
 import { EXIT_CODES } from '../utils/exitCodes.js';
 import { levenshteinDistance } from '../utils/levenshtein.js';
 /**
@@ -80,12 +82,87 @@ export async function collectA11yTree() {
         if (!result?.nodes) {
             throw new CommandError('Failed to get accessibility tree', { suggestion: 'CDP returned no nodes. The page may not be fully loaded.' }, EXIT_CODES.SOFTWARE_ERROR);
         }
-        return buildTreeFromRawNodes([...result.nodes, ...(await collectFrameNodes(result.nodes))]);
+        const tree = buildTreeFromRawNodes([
+            ...result.nodes,
+            ...(await collectFrameNodes(result.nodes)),
+        ]);
+        return maskSecretValues(tree, await sensitiveNodeIds(tree));
     }
     finally {
         await callCDP('Accessibility.disable', {});
     }
 }
+/** Concurrent page checks for {@link sensitiveNodeIds} */
+const SENSITIVE_CHECK_CONCURRENCY = 10;
+/**
+ * The accessibility nodes whose value is a secret: nodes with a value whose
+ * element is a sensitive field ({@link SENSITIVE_FIELD_JS}: passwords, card
+ * fields, one-time codes). Only nodes with a value are checked, one page
+ * call each (a page has few).
+ *
+ * @param tree - Accessibility tree
+ * @returns Node ids of secret fields
+ */
+async function sensitiveNodeIds(tree) {
+    const candidates = [...tree.nodes.values()].filter((node) => node.value !== undefined && node.backendDOMNodeId !== undefined);
+    const limiter = new ConcurrencyLimiter(SENSITIVE_CHECK_CONCURRENCY);
+    const checked = await Promise.all(candidates.map((node) => limiter.run(async () => (await isSensitiveField(node.backendDOMNodeId ?? 0)) ? node.nodeId : null)));
+    return new Set(checked.filter((id) => id !== null));
+}
+/**
+ * Whether an element is a sensitive field. An element that cannot be read
+ * counts as one, so a value is never shown by mistake.
+ *
+ * @param backendNodeId - The element
+ * @returns True for secret fields (and unreadable elements)
+ */
+async function isSensitiveField(backendNodeId) {
+    const objectGroup = 'bdg-a11y-secret';
+    const resolved = await callCDP('DOM.resolveNode', { backendNodeId, objectGroup });
+    const objectId = resolved.data?.result?.object
+        ?.objectId;
+    if (!objectId)
+        return true;
+    try {
+        const response = await callCDP('Runtime.callFunctionOn', {
+            objectId,
+            functionDeclaration: `function () { return this.nodeType !== 1 || (${SENSITIVE_FIELD_JS})(this); }`,
+            returnByValue: true,
+        });
+        const value = response.data?.result?.result
+            ?.value;
+        return value !== false;
+    }
+    finally {
+        await callCDP('Runtime.releaseObjectGroup', { objectGroup });
+    }
+}
+/**
+ * The tree with the values of secret fields masked ({@link MASKED_VALUE},
+ * whatever their length), and the names and values of the nodes inside them
+ * left out (the text Chrome lists under a text field is its value).
+ *
+ * @param tree - Accessibility tree
+ * @param secretIds - Node ids of secret fields
+ * @returns The same tree (nodes replaced in place)
+ */
+export function maskSecretValues(tree, secretIds) {
+    const hide = (nodeId, inside) => {
+        const node = tree.nodes.get(nodeId);
+        if (!node)
+            return;
+        const { name: _name, value: _value, ...rest } = node;
+        const masked = inside
+            ? rest
+            : { ...node, ...(node.value !== undefined && { value: MASKED_VALUE }) };
+        tree.nodes.set(nodeId, masked);
+        if (tree.root.nodeId === nodeId)
+            tree.root = masked;
+        node.childIds?.forEach((childId) => hide(childId, true));
+    };
+    secretIds.forEach((nodeId) => hide(nodeId, false));
+    return tree;
+}
 /**
  * Accessibility nodes of the page's iframes, attached under their `Iframe`
  * node (the page's own tree stops there). Frames in another process

package/dist/telemetry/console.d.ts

@@ -2,6 +2,7 @@
  * Console message collection via CDP Runtime and Log domains.
  *
  * Captures console.log, console.error, etc. and JavaScript exceptions
+ * (unhandled rejections removed again when a handler is attached later)
  * with automatic nested object expansion, browser messages (failed loads,
  * CORS, security, deprecations), and the same from cross-origin iframes and
  * workers.

package/dist/telemetry/console.js

@@ -2,6 +2,7 @@
  * Console message collection via CDP Runtime and Log domains.
  *
  * Captures console.log, console.error, etc. and JavaScript exceptions
+ * (unhandled rejections removed again when a handler is attached later)
  * with automatic nested object expansion, browser messages (failed loads,
  * CORS, security, deprecations), and the same from cross-origin iframes and
  * workers.
@@ -76,14 +77,17 @@ function createMessage(type, text, timestamp, args, context) {
 /**
  * Insert a message in timestamp order.
  * Messages are kept sorted by timestamp to handle async expansion delays.
+ *
+ * @returns False when the message limit is reached (the message is dropped)
  */
 function insertMessageByTimestamp(messages, message) {
     if (messages.length >= MAX_CONSOLE_MESSAGES) {
         log.debug(`Warning: Console message limit reached (${MAX_CONSOLE_MESSAGES})`);
-        return;
+        return false;
     }
     const insertIndex = findInsertIndex(messages, message.timestamp);
     messages.splice(insertIndex, 0, message);
+    return true;
 }
 /**
  * Find the correct insertion index to maintain timestamp order.
@@ -171,15 +175,93 @@ export function formatExceptionText(details) {
 }
 /**
  * Handle an exception thrown event.
+ *
+ * @returns The message added, undefined when filtered out or over the limit
  */
 function handleExceptionThrown(messages, params, context, includeAll) {
     const exception = params.exceptionDetails;
     const text = formatExceptionText(exception);
     if (shouldExcludeConsoleMessage(text, 'error', includeAll)) {
-        return;
+        return undefined;
     }
     const message = createMessage('error', text, params.timestamp, undefined, context);
-    insertMessageByTimestamp(messages, message);
+    return insertMessageByTimestamp(messages, message) ? message : undefined;
+}
+/** CDP's text of an unhandled promise rejection (the only kind Chrome revokes) */
+const UNHANDLED_REJECTION_TEXT = 'Uncaught (in promise)';
+/**
+ * Unhandled promise rejections that may still be revoked: Chrome reports a
+ * rejection without a handler at the end of the task, and revokes the
+ * report (`Runtime.exceptionRevoked`) when a handler is attached later, as
+ * DevTools does by removing the message. `bdg dom eval` attaches its
+ * handler only after the evaluation returns, so this is what keeps
+ * `bdg dom eval 'Promise.reject(…)'` out of the console; a rejection
+ * nothing ever handles stays.
+ */
+class RevocableRejections {
+    /** Messages of rejections, by session and exception id, oldest first */
+    pending = new Map();
+    /**
+     * Remember a reported exception if it is an unhandled rejection. Past
+     * {@link MAX_CONSOLE_MESSAGES} rejections, the oldest is forgotten.
+     *
+     * @param details - Exception details
+     * @param message - Its console message
+     * @param sessionId - Session it was reported on (undefined: the page)
+     */
+    track(details, message, sessionId) {
+        if (!details.text.startsWith(UNHANDLED_REJECTION_TEXT))
+            return;
+        this.pending.set(this.key(details.exceptionId, sessionId), message);
+        if (this.pending.size <= MAX_CONSOLE_MESSAGES)
+            return;
+        const [oldest] = this.pending.keys();
+        if (oldest !== undefined)
+            this.pending.delete(oldest);
+    }
+    /**
+     * Remove the message of a revoked rejection.
+     *
+     * @param messages - Console messages (updated)
+     * @param exceptionId - Revoked exception
+     * @param sessionId - Session it was revoked on (undefined: the page)
+     */
+    revoke(messages, exceptionId, sessionId) {
+        const key = this.key(exceptionId, sessionId);
+        const message = this.pending.get(key);
+        this.pending.delete(key);
+        const index = message ? messages.indexOf(message) : -1;
+        if (index !== -1)
+            messages.splice(index, 1);
+    }
+    /**
+     * Forget the rejections of a session whose documents are gone (it
+     * detached, or its contexts were cleared by a navigation): they can no
+     * longer be revoked.
+     *
+     * @param sessionId - Session (undefined: the page)
+     */
+    forgetSession(sessionId) {
+        const prefix = this.key('', sessionId);
+        for (const key of this.pending.keys()) {
+            if (key.startsWith(prefix))
+                this.pending.delete(key);
+        }
+    }
+    /** Forget every rejection (the collection stopped). */
+    clear() {
+        this.pending.clear();
+    }
+    /**
+     * Map key of an exception: ids are counted per session.
+     *
+     * @param exceptionId - Exception id ('' for the session's prefix)
+     * @param sessionId - Session
+     * @returns Key
+     */
+    key(exceptionId, sessionId) {
+        return `${sessionId ?? ''}:${exceptionId}`;
+    }
 }
 /**
  * Handle a browser log entry (failed resource loads, CORS, security,
@@ -255,12 +337,24 @@ export async function startConsoleCollection(cdp, messages, includeAll = false,
         };
         handleConsoleAPICall(senderFor(cdp, sessionId), messages, params, context, includeAll);
     });
-    registry.registerTyped(typed, 'Runtime.exceptionThrown', (params) => {
+    const rejections = new RevocableRejections();
+    registry.registerTyped(typed, 'Runtime.exceptionThrown', (params, sessionId) => {
         const context = {
             navigationId: getCurrentNavigationId?.(),
             stackTrace: convertStackTrace(params.exceptionDetails.stackTrace),
         };
-        handleExceptionThrown(messages, params, context, includeAll);
+        const message = handleExceptionThrown(messages, params, context, includeAll);
+        if (message)
+            rejections.track(params.exceptionDetails, message, sessionId);
+    });
+    registry.registerTyped(typed, 'Runtime.exceptionRevoked', ({ exceptionId }, sessionId) => {
+        rejections.revoke(messages, exceptionId, sessionId);
+    });
+    registry.registerTyped(typed, 'Runtime.executionContextsCleared', (_params, sessionId) => {
+        rejections.forgetSession(sessionId);
+    });
+    registry.registerTyped(typed, 'Target.detachedFromTarget', ({ sessionId }) => {
+        rejections.forgetSession(sessionId);
     });
     registry.registerTyped(typed, 'Log.entryAdded', ({ entry }) => {
         handleLogEntry(messages, entry, getCurrentNavigationId?.(), includeAll);
@@ -275,6 +369,7 @@ export async function startConsoleCollection(cdp, messages, includeAll = false,
     const detachChildren = await startOptionalSources(cdp, typed);
     return async () => {
         registry.cleanup();
+        rejections.clear();
         await detachChildren();
     };
 }

package/dist/telemetry/network.js

@@ -110,7 +110,7 @@ export function skippedBodyReason(body) {
  * @param resourceType - Resource type reported with the response
  */
 function applyResponse(request, response, resourceType) {
-    const { status, mimeType, headers, timing, remoteIPAddress, connectionId } = response;
+    const { status, mimeType, headers, timing, remoteIPAddress, remotePort, connectionId } = response;
     request.status = status;
     if (response.statusText)
         request.statusText = response.statusText;
@@ -138,6 +138,8 @@ function applyResponse(request, response, resourceType) {
     }
     if (remoteIPAddress)
         request.serverIPAddress = remoteIPAddress;
+    if (remotePort)
+        request.serverPort = remotePort;
     if (connectionId !== undefined)
         request.connection = String(connectionId);
 }

package/dist/types.d.ts

@@ -137,7 +137,10 @@ export interface NetworkRequest {
     redirectURL?: string;
     encodedDataLength?: number;
     decodedBodyLength?: number;
+    /** Address Chrome connected to: the server's, or a proxy's (CDP `remoteIPAddress`) */
     serverIPAddress?: string;
+    /** Port Chrome connected to (CDP `remotePort`) */
+    serverPort?: number;
     connection?: string;
     /** Status text sent by the server (empty for HTTP/2) */
     statusText?: string;
@@ -324,7 +327,34 @@ export interface DomContext {
     children?: string[];
     /** Number of child elements, for an element without text */
     childCount?: number;
+    /** Attributes that identify it by its type (see {@link KeyAttributes}) */
+    attributes?: KeyAttributes;
+    /** A field holding a secret (password, card, one-time code): its value is shown masked */
+    sensitive?: boolean;
 }
+/**
+ * Live state of a form control read in the page: an input's type and value
+ * (`checked` for checkboxes and radios), a textarea's value, the labels of a
+ * select's selected options, the type of a button in a form.
+ */
+export interface ElementState {
+    type?: string;
+    /** Masked in the page for sensitive fields; never read for hidden inputs */
+    value?: string;
+    checked?: boolean;
+    selected?: string;
+    /** A field holding a secret (its value and selected option are masked) */
+    sensitive?: boolean;
+}
+/**
+ * The attributes that identify an element by its type, with full values:
+ * img `src`, `alt`; a `href`; input `type`, `name`, `placeholder`, `value`
+ * (current value, masked for passwords; for checkboxes and radios their
+ * `value` attribute) and `checked`; textarea `name`,
+ * `placeholder`, `value`; button `type` (`submit` by default in a form), `name`; select `name`, `selected`
+ * (labels of the selected options); iframe `src`; form `action`, `method`.
+ */
+export type KeyAttributes = Record<string, string | boolean>;
 /**
  * Reference to a DOM node for CDP calls: a per-connection `nodeId` (valid only
  * within one command) or a `backendNodeId` (valid while the node exists).
@@ -392,6 +422,8 @@ export interface DomQueryResult {
         type?: string;
         /** `value` attribute of an `<option>` */
         value?: string;
+        /** Attributes that identify it by its type (see {@link KeyAttributes}) */
+        attributes?: KeyAttributes;
         classes?: string[];
         /** Text content preview (display only, never used for targeting) */
         preview?: string;

package/dist/ui/formatters/details.d.ts

@@ -1,4 +1,12 @@
 import type { NetworkRequest, ConsoleMessage } from '../../types.js';
+/**
+ * The address Chrome connected to, with its port, noting when it looks like
+ * a proxy on this machine ({@link looksLikeLocalProxy}).
+ *
+ * @param request - Request with `serverIPAddress`
+ * @returns e.g. `93.184.215.14:443`, `[2606:4700::1]:443`, `127.0.0.1:9000 (loopback; likely a local proxy)`
+ */
+export declare function remoteAddress(request: NetworkRequest): string;
 /**
  * Format network request details for human-readable output.
  *