使用Async/Await调试React Native

Question

最近我开始编写React Native代码，但是在使用Chrome调试器或React Native调试器时，遇到了极大困难，无法正常处理我的Async/Await函数和箭头函数。

虽然我可以成功地将调试器附加到我的代码上并逐步检查大部分代码，但当调试器进入我的异步方法中时，似乎就失去了实际执行的行，使得我无法高效工作。

有些断点根本不会触发，即使console.log语句表明代码已经被执行。这种情况下，当前调试行通常会切换到函数声明的行而不是实际执行的行。

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

我看到各种论坛中2016年关于类似行为的讨论，但没有最近的消息，因此我认为它已经被修复。如果没有，那么有什么解决方法？我需要一种调试代码的方式。

- Mikeyg36

---

无论如何，如果有人感兴趣，我现在解决这个问题的方法是将我的async/await代码重构为普通的promises。当我这样做时，断点似乎可以正常工作。这相当令人失望，希望这个问题很快就能得到解决。 - Mikeyg36

你在使用物理设备进行调试吗？物理设备存在一个长期存在的问题：当物理设备的时间与计算机的时间不完全相同时，某些功能（如setTimeOut和可能的await/async）可能无法正常工作。尝试在模拟器上进行调试，看看是否可以解决问题。如果可以，我认为没有解决方案可以使其在物理设备上正常工作... - brkn

很遗憾，无论我使用物理设备还是Genymotion Android模拟器，问题都存在。 - Mikeyg36

我也遇到了这个问题。有没有可行的解决方法？ - Luiz Henrique Martins Lins Rol

Answer 1

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

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

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;
}

在await操作符之后设置断点是不起作用的。但是，在await操作符之前设置断点似乎是正常工作的。

为了解决这个问题，我发现将任务委托给其他函数可以让你设置断点。因此，我会将代码改为：

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;
}

- Niels Ladekarl

Answer 2

我的一位同事通过使用react-native-debugger解决了这个问题。

- Cody Moniz