Web-Integrated Proxy Tool: Zero‑Installation, Zero‑Configuration Remote Debugging and Mock Solution

The article presents a novel proxy tool that is embedded directly into web applications, offering zero‑installation and zero‑configuration usage through simple URL sharing or QR codes, which allows remote HTTP debugging and collaborative proxy configuration.

Key features include:

Zero installation & configuration: Users can start debugging with a single click or by scanning a QR code.

Remote debugging: Shared URLs enable others to view and interact with captured network requests.

Shared proxy configuration: Users can exchange proxy settings without manual import/export.

A typical scenario is a front‑end developer who needs to mock backend APIs before they are ready; instead of installing a local mock server, the developer generates a URL that the product or designer can open to experience the mocked interface remotely.

The solution works by integrating a proxy service SDK into the target web page or mobile app, which intercepts fetch , XMLHttpRequest , and WebSocket calls, rewrites them to a proxy server, and then forwards them to the original destination. The proxy server removes the ff- prefix and custom headers before sending the request onward, while synchronizing request data to a UI via WebSocket.

Two integration methods are described:

Automatic SDK injection via DNS: Configure DNS to resolve ff-* domains to the proxy service, which injects the SDK script into HTML responses.

Manual SDK injection: Add a <script src="/ff-sdk.js"></script> tag to the page or bundle it during build.

When the URL contains the ff-proxy-id query parameter, the SDK activates interception. The article also provides a code snippet for measuring request latency:

// Interface performance monitoring, open https://example.com/ and run in console
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 offers a UI for viewing captured requests, editing mock rules, and managing resources stored in IndexedDB. Mock rules are defined using a simple syntax parsed by peggy into an AST, which is then compiled into JavaScript functions that modify requests or responses.

Compared with traditional tools like Charles or LightProxy, this solution eliminates the need for installing applications, configuring system proxies, or handling HTTPS certificates, but it does require deploying and maintaining the proxy service and introduces some invasiveness by injecting SDK code.

In summary, the approach improves the efficiency of network debugging for frequently accessed applications by integrating proxy capabilities directly into the front‑end, provided the team can justify the deployment overhead.