使用Async/Await进行本机调试

Question

我最近开始编写React Native代码,并且在使用我的Async/Await函数和Async/Await箭头函数使Chrome调试器或React Native调试器正常工作时遇到了巨大的困难.

我可以成功地将调试器连接到我的代码并逐步完成我的大部分代码,但似乎当调试器进入我的异步方法时,它会失去对实际执行的行的跟踪,从而无法高效地工作.

即使console.log语句指示代码已执行,一些断点也不会受到影响.发生这种情况时,通常当前的调试行将切换到函数声明的行而不是实际执行的行.

我使用了我的应用程序crna,并在Windows 10中运行.不确定这是否相关.

我看到很多关于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;
}