时间戳

首页 > 解决方案 > 使用 Async/Await 进行 React Native 调试

reactjs - 使用 Async/Await 进行 React Native 调试

问题描述

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

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

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

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

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

标签： reactjsreact-nativegoogle-chrome-devtoolscreate-react-appreact-native-debugger

解决方案

每当我在使用 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 运算符之前设置断点似乎可以正常工作。

为了解决这个问题，我发现委派给其他函数允许您放置断点。所以我将其更改为：

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

推荐阅读