显示HN:Wirebrowser – 一款基于断点驱动堆搜索的JavaScript调试器
Show HN: Wirebrowser – A JavaScript debugger with breakpoint-driven heap search

原始链接: https://github.com/fcavallarin/wirebrowser

## Wirebrowser:强大的客户端调试工具包 Wirebrowser是一个全面的工具包,用于调试、拦截流量和检查Web应用程序的内存,基于Chrome DevTools Protocol (CDP) 构建。它将网络操作、API测试、自动化和详细的JavaScript内存分析结合到一个界面中。 主要功能包括实时HTTP请求/响应操作以及强大的内存检查工具,例如**实时对象搜索**(在运行时修补对象)和**断点驱动堆搜索 (BDHS)**——通过在调试器暂停时捕获堆快照来追踪数据变化的来源。独特的**混合结构相似性引擎**有助于搜索和追踪不断变化的对象。 除此之外,Wirebrowser允许创建和执行API请求(类似于Postman),并支持浏览器/Node.js脚本进行自动化。操作可以全局应用或应用于特定的浏览器标签页。Wirebrowser使用JavaScript构建,基于React和Node.js,是开源且积极开发的,未来计划包括SPA爬取和DOM XSS扫描。 [https://github.com/fcavallarin/wirebrowser](https://github.com/fcavallarin/wirebrowser)

## Wirebrowser:一种新的 JavaScript 调试器 Wirebrowser 是 fcavallarin 创建的一种新的 JavaScript 调试器,结合了网络检查、请求重写、堆快照和实时对象搜索。其关键的实验性功能,**断点驱动堆搜索 (BDHS)**,在调试器暂停时自动捕获堆快照,允许开发者追踪 JavaScript 运行时内值的来源和创建过程。 另一个功能,**实时对象搜索**,能够使用正则表达式和对象相似性来检查甚至修补运行时对象。创建者构建 Wirebrowser 的目的是为了整合通常分散在多个工具(如 DevTools 和 Burp)中的调试流程。 早期的反馈指出,处理大型内存对象可能存在问题,讨论的重点在于与时间旅行调试器(如 Replay.io)以及类似的 C++ 调试工具的比较。Wirebrowser 的独特之处在于,它通过 Chrome DevTools Protocol (CDP) 与未修改的浏览器配合工作,而无需代码检测。提供了一个演示视频,该项目欢迎反馈,特别是关于 BDHS 的实用性的反馈。
相关文章

原文

Open Source Built on CDP License MIT Contributions welcome

Wirebrowser is a debugging, interception, and memory-inspection toolkit powered by the Chrome DevTools Protocol (CDP). It unifies network manipulation, API testing, automation scripting, and deep JavaScript memory inspection into one interface.
With features like Breakpoint-Driven Heap Search and real-time Live Object Search, Wirebrowser provides researchers and engineers with precise, high-visibility tools for client-side analysis, reverse engineering, and complex application debugging.

Intercept, block, rewrite, and replay HTTP requests and responses in real time.

Inspect, search, and modify JavaScript memory using both live heap analysis and heap snapshots, with full support for object identity search, primitive search (via snapshots), structural matching, and runtime patching.

  • Live Object Search — Search all live JavaScript objects using regex or structural matching, and patch matched objects at runtime to alter state or behavior dynamically.

  • Static Heap Snapshot Search Capture a full V8 heap snapshot and search all objects and primitives, including strings and closure-captured values that are unreachable through the Runtime domain.

  • Origin Trace (BDHS) — Performs automatic debugger pauses and captures a full heap snapshot at each stop. Every snapshot is searched to identify the user-land function responsible for creating or mutating the target value. Framework and vendor scripts are filtered out via heuristics.
    BDHS also includes a tolerance window that samples snapshots before and after the first match, providing contextual insight into when and how a value is introduced or mutated.

Hybrid Structural Similarity Engine (cross-modal)

A shared similarity engine used across Live Object Search, Heap Snapshots, and BDHS timelines. Enables shape-based searches, clustering, and origin tracing for objects that evolve over time.

Create, edit, and execute API requests with variable substitution and structured collections, integrating Postman-style workflows directly into the debugging environment.

Technical Writeup (BDHS / Origin Trace)

A full technical deep-dive is available here: 👉 https://fcavallarin.github.io/wirebrowser/BDHS-Origin-Trace

Below is a quick visual tour of Wirebrowser’s most distinctive capabilities.

▶️ Origin Trace (BDHS) & Live Object Search — demonstration

Watch the demo on YouTube

A short walkthrough of Wirebrowser’s advanced memory-analysis capabilities:

  • Live Object Search — real-time search and runtime patching of live JS objects.
  • Origin Trace (BDHS) — identify the user-land function responsible for creating or mutating the object during debugging.

Intercept, rewrite, block, and replay HTTP requests and responses.

Network Interceptor


Memory — Live Object Search

Search and patch live JS objects using regex or structural matching.

Live Objects


Memory — Origin Trace (BDHS)

Capture snapshots on each debugger pause to locate the user-land function responsible for object creation or mutation.

Origin Trace

git clone https://github.com/fcavallarin/wirebrowser.git
cd wirebrowser
npm install
npm run build

🐧 Linux - Sandbox issue with Electron

On some Linux distributions, Electron may fail to start due to process sandboxing restrictions, showing errors such as:

The SUID sandbox helper binary was found, but is not configured correctly.

This is a known issue in Electron ([electron/electron#42510]).
The most common solution is to disable AppArmor restrictions:

sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0

⚙️ Additional Capabilities

Beyond the core Network and Memory workflows, Wirebrowser offers several supporting modules that enhance debugging, testing, and automation workflows.

Create, edit, and execute API requests with variable substitution and organized collections.
Useful for testing endpoints, iterating on backend logic, or interacting with APIs directly from the same environment used for debugging the client.

Run browser-side or Node.js scripts, either manually or triggered by events such as page load.
Automation scripts have access to an Utils object that exposes helpers for interacting with the browser, pages, variables, iterators, and HTTP utilities.

const userId = Utils.getVar("userId");
const page = Utils.getPage(1);
page.on("request", req => req.continue());
await page.goto(`https://example.com/${userId}`);

A collection of small tools frequently needed during debugging and analysis, including:

  • Encode or decode strings in multiple formats:
  • Create, verify, and decode JSON Web Tokens (JWTs).

▶️ Scope of actions — Global vs Tab-specific

Most Wirebrowser actions can be performed either globally (across all open tabs/pages) or targeted to a single tab. This lets you choose whether a rule or inspection should affect the whole browser session or only a specific page.
Every tab/page opened by Wirebrowser has a unique integer tabId. Use this tabId to scope actions.

UI Notes

  • Many panels offer a scope selector (Global / Specific Tab ID) for quick changes.
  • Frontend (UI): React
  • Backend: Node.js
  • Language: Plain JavaScript (no TypeScript)

Wirebrowser is built with React and Node.js, using plain JavaScript to keep the codebase lightweight and hackable.
TypeScript or JSDoc-based typing may be introduced in the future for enhanced maintainability.

The following areas are being explored for future development:

  • SPA crawling — automated crawling of single-page applications to map navigation flows and surface client-side behaviors.
  • DOM XSS scanning — analysis of potential DOM-based XSS injection points during crawls or on-demand checks.

Wirebrowser is being built in the open — contributions and feedback are welcome!

Contributions and pull requests are welcome!
Open an issue or pull request — even small suggestions help improve Wirebrowser.

Wirebrowser™ is distributed under the MIT License.
See the LICENSE file for more details.

联系我们 contact @ memedata.com