使用 Async/Await 进行 React Native 调试答案

【问题标题】：React Native Debugging with Async/Await使用 Async/Await 进行 React Native 调试
【发布时间】：2018-10-11 11:02:18
【问题描述】：

我最近开始编写 React Native 代码，并且很难让 Chrome 调试器或 React Native 调试器与我的 Async/Await 函数和 Async/Await 箭头函数正常工作。

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

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

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

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

【问题讨论】：

无论如何，如果有人感兴趣，我现在解决这个问题的方法就是将我的 async/await 代码重构为简单的 Promise。当我这样做时，断点似乎工作正常。非常令人失望，希望这个问题能很快得到解决。
您是否使用物理设备进行调试？物理设备存在一个长期存在的问题：当物理设备的时间与您计算机的时间不完全相同时，某些事情（例如 setTimeOut 和可能的 await/async ）可能无法正常工作。尝试在模拟器上调试，看看是否能解决您的问题。如果是这样，我认为没有解决方案可以让它在您的物理设备上运行......
@brkn 不幸的是，无论我使用物理设备还是 Genymotion Android 模拟器，都存在问题。
我也遇到了这个问题。有什么解决办法吗？

标签： reactjs react-native google-chrome-devtools create-react-app react-native-debugger

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：