debugging 类似于浏览器的async_hooks之类的东西？

xiozqbni 于 2023-03-13 发布在其他

关注(0)|答案(2)|浏览(162)

我正在尝试调试一些在浏览器环境中运行的（第三方）代码，我想跟踪所有的下游异步函数调用，几乎完全是async_hooks for nodejs所提供的。本质上，类似于https://github.com/mafintosh/why-is-node-running，但在浏览器中。我会满足于“接近的东西”，或者甚至修补全局，如果我必须的话...
有人知道任何远程接近吗？这个（https://stackoverflow.com/a/49245432/1256988）看起来很有前途，但它似乎不工作的子调用对我来说？！
我应该指出，我在这里的实际用途实际上只是保持异步函数调用的计数，以便在测试结束时，我知道我是否“泄漏”了异步调用。
我应该另外指出，这（https://github.com/AndreasMadsen/async-hook/issues/15）似乎表明，我可能是在浏览器的运气不好（虽然我确定只有大约正确的结果）。

debugging

来源：https://stackoverflow.com/questions/66960129/something-like-async-hooks-for-the-browser

2条答案

按热度按时间

deyfvvtc1#

Zone.js在这方面做得很好。Angular内部使用它来跟踪异步调用的状态，但它确实是作为一个单独的API存在的。它通过修补整个浏览器API负载（如setTimeout、事件订阅等）来工作。
下面是一个HTML示例，展示了它的使用。它运行了几个区域（基本上是线程上下文），并在每个区域中执行异步工作。您可以看到当前区域在异步工作流中神奇地传递。

<html>
  <script src="https://unpkg.com/zone.js@0.11.5/bundles/zone.umd.js"></script>
  <script>
    const rootZone = Zone.current;

    // Create two zones (thread contexts, basically)
    const zone1 = rootZone.fork({
      name: 'zone1',
      properties: { pizzaInfo: { topping: 'pepperoni' } },
    });
    const zone2 = rootZone.fork({
      name: 'zone2',
      properties: { pizzaInfo: { topping: 'pineapple' } },
    });

    // A function which will trigger some asynchronous work
    // Doesn't know anything about zones, but magically the
    // work will run in whatever zone launched it.
    function someWork() {
      setTimeout(someAsyncWork, 1000);
    }

    // Some asynchronous work
    function someAsyncWork() {
      const initialZone = Zone.current;
      const pizzaInfo = initialZone.get('pizzaInfo');

      console.log(`someAsyncWork: in zone ${initialZone.name}`);
      console.log(`someAsyncWork: best pizza topping for this zone is ${pizzaInfo.topping}`);

      // Have some async fun with promises and timers
      delay(500).then(yetMoreWork);
    }

    function yetMoreWork() {
      const zone = Zone.current;
      console.log(`yetMoreWork: in zone ${zone.name}`);
    }

    function delay(millis) {
      return new Promise((resolve) => setTimeout(resolve, millis));
    }

    zone1.run(someWork);
    zone2.run(someWork);
  </script>
</html>

(Here是该代码的JSFiddle：https://jsfiddle.net/rbkxd512/）
Zone.js在浏览器中有很多需要修补的地方，所以它被分成了多个模块，您可以根据您是否关心多媒体API、网络API等进行选择。

赞(0）回复(0）举报 2023-03-13

1cklez4t2#

js实现了一个名为PSD的东西，它允许跟踪异步上下文--即使使用本机承诺。
我把它放进了它自己的 Package 里：https://github.com/vlcn-io/model/tree/main/ts/packages/zone
您可以在这里看到跟踪异步函数的示例：https://github.com/vlcn-io/model/blob/bb2907ca5034b345bfedd42af21944e10543b01d/ts/packages/value/src/transaction.ts#L106-L125
请注意，该API还不是非常用户友好，而且要正确设置区域跟踪可能会很复杂。
真实的测试和使用帮助您入门：https://github.com/vlcn-io/model/tree/main/ts/packages/value

赞(0）回复(0）举报 2023-03-13

我来回答

debugging 类似于浏览器的async_hooks之类的东西？

2条答案

相关问题

热门标签

最新问答