React Native Debugging with Async/Await

Question

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.

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.

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

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.

Answer 1

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

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