使用Async / Await进行本机调试 [英] React Native Debugging with Async/Await

问题描述

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

I have recently started writing React Native code, and am having tremendous difficulty getting either the Chrome debugger or the React Native debugger to work properly with my Async/Await functions and Async/Await arrow functions.

我可以成功地将调试器附加到我的代码上并逐步执行我的大多数代码，但是看来，当调试器进入我的异步方法内部时，它会

I can successfully attach the debuggers to my code and step through most of my code, but it seems that when the debugger gets inside of my async methods, it loses track of what line is actually executing, making it impossible to work productively.

即使console.log语句指出某些断点也没有命中，但它却无法跟踪实际执行的行。该代码已执行。发生这种情况时，通常当前的调试行将切换到函数声明的行，而不是实际执行的行。

Some breakpoints just do not get hit, even though console.log statements indicate that the code has been executed. When this happens, usually the current debug line will switch to the line of the function declaration rather than the actually executing line.

我使用 crna ，并在Windows 10中运行。不确定是否与此相关。

I bootstrapped my app using crna, and am running in Windows 10. Not sure if that is relevant.

我看到有很多关于2016年类似行为的讨论各种论坛，但没有最新消息，因此我认为它是固定的。如果没有，那么解决方法是什么？我需要一种调试代码的方法。

I see lots of talk about similar behaviour from 2016 in various forums, but there is no recent news on it, so I would assume it was fixed. If not, then what is the workaround? I need a way to debug my code.

推荐答案

使用await运算符设置断点后，我会看到此问题。

I see this problem whenever i set a breakpoint after the use of an await operator.

例如，您可能具有以下功能：

For example you could have a function:

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

Putting a breakpoint after one of the await operators does not work. However, setting a breakpoint before the await operator seems to work fine.

要解决此问题，我发现委托其他函数可以让您放置断点。因此，我将其更改为：

To get around this issue I found that delegating into other functions allow you to put breakpoints. So I would change this to:

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

这篇关于使用Async / Await进行本机调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！