browser-debugger-cli 0.9.0 → 0.10.0

package/dist/ui/formatters/details.js

@@ -1,9 +1,12 @@
 import { skippedBodyReason } from '../../telemetry/network.js';
 import { formatFramePosition, formatTimestamp } from './console/shared.js';
+import { headerValueLines } from './networkHeaders.js';
 import { formatRequestStatus } from './requestStatus.js';
 import { OutputFormatter } from '../formatting.js';
+import { localProxyNote } from '../messages/networkMessages.js';
 import { sessionCommand } from '../messages/sessionCommand.js';
 import { truncateByLength } from '../../utils/strings.js';
+import { safeParseUrl } from '../../utils/url.js';
 /** Characters of each WebSocket message shown in human output (`--json` has all) */
 const MESSAGE_PREVIEW_LENGTH = 200;
 /** WebSocket opcode of binary messages */
@@ -95,6 +98,58 @@ function formatBytes(bytes) {
         ? `${(bytes / 1024).toFixed(1)} KB`
         : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
+/**
+ * Whether an IP address is a loopback address (`127.0.0.0/8`, `::1`).
+ *
+ * @param ip - Address as CDP reports it (IPv6 may come in brackets)
+ * @returns True for loopback
+ */
+function isLoopback(ip) {
+    const bare = ip.replace(/^\[|\]$/g, '').toLowerCase();
+    return /^(::ffff:)?127\./.test(bare) || bare === '::1';
+}
+/** Ports of URLs without one */
+const DEFAULT_PORTS = {
+    'http:': '80',
+    'https:': '443',
+    'ws:': '80',
+    'wss:': '443',
+};
+/**
+ * Whether a request probably went through a proxy on this machine: Chrome
+ * connected to a loopback address on another port than the URL's (given or
+ * the scheme's default), for a host that is not this machine. A loopback
+ * host from `/etc/hosts` (`myapp.test`) is connected to on the URL's port,
+ * so it is not taken for a proxy. CDP has no proxy flag; this is a guess.
+ *
+ * @param request - Request with `serverIPAddress` and `serverPort`
+ * @returns True when the connection looks like a local proxy
+ */
+function looksLikeLocalProxy(request) {
+    const url = safeParseUrl(request.url);
+    if (!url || request.serverPort === undefined || !isLoopback(request.serverIPAddress ?? '')) {
+        return false;
+    }
+    const hostname = url.hostname.toLowerCase();
+    if (hostname === 'localhost' || hostname.endsWith('.localhost') || isLoopback(hostname)) {
+        return false;
+    }
+    const urlPort = url.port || DEFAULT_PORTS[url.protocol];
+    return urlPort !== undefined && String(request.serverPort) !== urlPort;
+}
+/**
+ * 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 function remoteAddress(request) {
+    const ip = request.serverIPAddress ?? '';
+    const host = ip.includes(':') && !ip.startsWith('[') ? `[${ip}]` : ip;
+    const address = request.serverPort ? `${host}:${request.serverPort}` : host;
+    return looksLikeLocalProxy(request) ? `${address} ${localProxyNote()}` : address;
+}
 /**
  * Summary rows of a request: identity, outcome, timing and size.
  *
@@ -122,13 +177,14 @@ function requestSummaryRows(request) {
     if (request.fromCache)
         rows.push(['From Cache', 'yes']);
     if (request.serverIPAddress)
-        rows.push(['Remote Address', request.serverIPAddress]);
+        rows.push(['Remote Address', remoteAddress(request)]);
     if (request.blockedReason)
         rows.push(['Blocked', request.blockedReason]);
     return rows;
 }
 /**
- * Add a header block.
+ * Add a header block, a header sent several times one value per line
+ * ({@link headerValueLines}).
  *
  * @param fmt - Formatter
  * @param title - Block title
@@ -136,7 +192,7 @@ function requestSummaryRows(request) {
  */
 function addHeaders(fmt, title, headers) {
     fmt.text(title).separator('━', 70);
-    Object.entries(headers).forEach(([key, value]) => fmt.text(`  ${key}: ${value}`));
+    Object.entries(headers).forEach(([key, value]) => headerValueLines(key, value).forEach((line) => fmt.text(`  ${key}: ${line}`)));
     fmt.blank();
 }
 /**

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

@@ -3,7 +3,8 @@ import type { DomQueryResult, DomGetResult, ScreenshotResult } from '../../types
 /**
  * Format DOM query results for human-readable output.
  *
- * Displays found nodes with their index, tag, classes, and preview text
+ * Displays found nodes with their index, tag, identifying attributes
+ * ({@link queryTagAttributes}), classes, and preview text
  * (plus where they are when outside the viewport or hidden, e.g.
  * `(below fold)`), up to {@link QUERY_DISPLAY_LIMIT} of them (no match is an error, exit 83).
  * One line of next commands follows; they take the match's index, so they

package/dist/ui/formatters/dom.js

@@ -1,3 +1,4 @@
+import { keyAttributeItems } from './keyAttributes.js';
 import { OutputFormatter } from '../formatting.js';
 import { frameLabel, moreMatchesNote, framesStillLoadingNote, noFramesMessage, queryNextSteps, screenshotGrownNote, viewportPositionHint, } from '../messages/commands.js';
 /** Matches listed in human output (JSON has all of them) */
@@ -5,7 +6,8 @@ const QUERY_DISPLAY_LIMIT = 50;
 /**
  * Format DOM query results for human-readable output.
  *
- * Displays found nodes with their index, tag, classes, and preview text
+ * Displays found nodes with their index, tag, identifying attributes
+ * ({@link queryTagAttributes}), classes, and preview text
  * (plus where they are when outside the viewport or hidden, e.g.
  * `(below fold)`), up to {@link QUERY_DISPLAY_LIMIT} of them (no match is an error, exit 83).
  * One line of next commands follows; they take the match's index, so they
@@ -34,14 +36,8 @@ export function formatDomQuery(data) {
     const { count, nodes, selector } = data;
     const fmt = new OutputFormatter();
     const nodeLines = nodes.slice(0, QUERY_DISPLAY_LIMIT).map((node) => {
-        const attributes = [
-            node.id && ` id="${node.id}"`,
-            node.name && ` name="${node.name}"`,
-            node.type && ` type="${node.type}"`,
-            node.value !== undefined && ` value="${node.value}"`,
-            node.classes?.length && ` class="${node.classes.join(' ')}"`,
-        ]
-            .filter(Boolean)
+        const attributes = queryTagAttributes(node)
+            .map((item) => ` ${item}`)
             .join('');
         const context = node.context ? ` (in ${node.context})` : '';
         const preview = node.preview ? ` ${node.preview}` : '';
@@ -57,6 +53,26 @@ export function formatDomQuery(data) {
         .tip(queryNextSteps(exampleIndex))
         .build();
 }
+/**
+ * The attributes shown in a `dom query` match's tag: id, then name, type and
+ * the key attributes of its type ({@link keyAttributeItems}: an image's file
+ * name and alt, a link's href, a field's placeholder and value), then class.
+ *
+ * @param node - Query match
+ * @returns `name="value"` items
+ */
+function queryTagAttributes(node) {
+    const identifying = {
+        ...(node.name && { name: node.name }),
+        ...(node.type && { type: node.type }),
+        ...(node.value !== undefined && { value: node.value }),
+    };
+    return [
+        ...(node.id ? [`id="${node.id}"`] : []),
+        ...keyAttributeItems(node.tag ?? '', { ...identifying, ...node.attributes }),
+        ...(node.classes?.length ? [`class="${node.classes.join(' ')}"`] : []),
+    ];
+}
 /**
  * Format DOM get results for human-readable output.
  *

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

@@ -0,0 +1,39 @@
+/**
+ * Human output of `bdg dom inspect`: a header line, then one line per group
+ * in Figma's order with DevTools' names (box, layout, parent, text, fill,
+ * border, fx, state, pseudo), then the child tree. Fields within a line are
+ * separated by ` · `; lengths are CSS px without the unit.
+ *
+ * ```
+ * button#buy.btn "Buy now" 120x41 @20,20 [flex] [prefers light]
+ * box    p 12 24 · b 1
+ * layout inline-flex row · gap 8
+ * parent div.card flex column · gap 16 · in-parent l0 t0 r180 b0 · sib b16
+ * text   Inter (webfont) 600 16/24 · color #fff · contrast 5.17 AA
+ * fill   bg #1c69e3
+ * border 1 solid #32447f · radius 8
+ * ```
+ */
+import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
+import type { IndexSource } from '../../types.js';
+/** `bdg dom inspect` data (the `success` flag is implied by the envelope), with the list an index refers to */
+export type InspectOutput = Omit<InspectResult, 'success'> & {
+    indexSource?: IndexSource | undefined;
+};
+/**
+ * The header: label, text, size and position, layout badge, what keeps it
+ * from being seen, where it lives and the color scheme.
+ *
+ * @param data - Inspect result
+ * @returns Header line
+ */
+export declare function inspectHeader(data: InspectOutput): string;
+/**
+ * Format `bdg dom inspect` output (`--why` answers only its question:
+ * the header, hints and the declarations, no style groups or tree).
+ *
+ * @param data - Inspect result
+ * @returns Formatted output
+ */
+export declare function formatInspect(data: InspectOutput): string;
+//# sourceMappingURL=inspect.d.ts.map