Web‑Integrated Proxy Tool: Zero‑Installation, Remote Debugging and Mocking for Front‑End Development

Most developers are familiar with traditional packet‑capture proxy tools, but this article introduces a proxy solution that is directly integrated into a Web application, requiring no installation or configuration.

Key characteristics include:

Zero‑install, zero‑config: users can start the proxy with a single click in a browser or by scanning a QR code on an app.

Shareable URL (or QR code) enables remote HTTP debugging and collaborative proxy configuration.

Remote sharing of proxy settings without manual import/export.

Typical scenario : a front‑end developer needs to mock an API that is not yet ready. Instead of installing a local mock server, the developer configures the mock, generates a URL, and shares it with designers or product managers for instant remote testing.

The solution works by embedding a proxy SDK into the target Web page or mobile app, which intercepts network requests and forwards them to a dedicated proxy service.

Integration methods :

Automatic injection via DNS wildcard (e.g., ff-* ) that rewrites the HTML head to insert <script src="/ff-sdk.js"></script> without modifying the original project.

Manual injection by adding the script tag to the HTML or during the build process, suitable when DNS configuration is unavailable.

After the SDK is loaded, it decides whether to intercept based on the URL query parameter ff-proxy-id . Interception rewrites fetch , XMLHttpRequest , WebSocket , and even link targets to route traffic through the proxy service.

Example code for measuring request latency:

// Interface performance monitoring – run in the console after opening https://example.com/
const _fetch = window.fetch;
window.fetch = (...args) => {
  const startTime = performance.now();
  return _fetch(...args).finally(() => {
    console.info('接口耗时：', Math.round(performance.now() - startTime), 'ms');
  });
};
await fetch('//example.com');

The proxy service provides a UI (accessed via ff-proxy.bilibili.com/ui/ ) that displays captured requests, allows mock rule configuration, and synchronizes data with the client through WebSocket, using the ff-proxy-id to isolate each user’s session.

Mock rules can modify request URL, headers, or body, as well as response status, headers, and body. Rules are defined in a simple syntax, parsed into an AST with peggy , and compiled into JavaScript functions that apply the transformations before forwarding the request or after receiving the response.

All rule data and large request/response bodies are stored in the browser’s IndexedDB and synchronized with the proxy service on each connection.

Advantages :

Eliminates the need for per‑device proxy installation.

Supports remote debugging across devices.

Provides a UI‑driven mock configuration.

Drawbacks :

Requires deployment and maintenance of the proxy service.

Introduces some intrusion by injecting SDK code into the target application.

Not suitable for debugging systems that cannot be integrated (e.g., third‑party services without SDK support).

In summary, integrating a proxy service into Web or mobile applications can dramatically improve the efficiency of network debugging and mock testing for front‑end teams, provided the organization can bear the operational overhead.