使用异步/等待响应本机调试

Question

我最近已经开始编写React原生代码，并且很难让Chrome调试器或React原生调试器与我的异步/等待函数和异步/等待箭头函数正常工作。

我可以成功地将调试器附加到我的代码中，并逐步遍历我的大部分代码，但是当调试器进入我的异步方法中时，它似乎失去了实际执行的行的跟踪，从而无法有效地工作。

尽管console.log语句表明代码已被执行，但有些断点仍未命中。当发生这种情况时，当前的调试行通常会切换到函数声明的行，而不是实际执行的行。

我使用crna引导我的应用程序，并在Windows10中运行。不确定这是否相关。

我在不同的论坛上看到很多关于2016年类似行为的讨论，但是没有最近的消息，所以我假设它是固定的。如果没有，那么解决办法是什么？我需要一种方法来调试我的代码。

Answer 1

每当我在使用等待操作符之后设置断点时，我都会看到这个问题。

例如，您可以有一个函数：

static async makeRequest(request) {
    // Breakpoints here work fine
    request.method = 'GET'
    // Breakpoints not working anymore because of the await operator
    const response = await fetch(request);
    const obj = await response.json();
    obj.debug = true;
    return obj;
}

在等待操作符之后放置断点不起作用。但是，在等待操作员之前设置一个断点似乎很好。

为了解决这个问题，我发现委托给其他函数可以让您放置断点。所以我会把这个改为：

static async makeRequest(request) {
    request.method = 'GET'
    const response = await fetch(request);
    const obj = await response.json();
    return doSomething(obj);
}

static doSomething(obj) {
    // Putting breakpoints here works fine
    obj.debug = true;
    return obj;
}

Answer 2

我的一个同事通过使用react本机调试器解决了这个问题。