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.

Horsey

Anyway if anybody is interested, the way I have worked around this for now is to just refactor my async/await code to plain promises. Breakpoints seem to work fine when I do that. It is quite disappointing, and hopefully this issue will be fixed soon. – Horsey

Are you using a physical device to debug? There is a longstanding problem with physical devices: when the physical device's time is not exactly the same as your computer's time, some things (like setTimeOut and possibly await/async as well) may not work properly. Try debugging on an emulator and see if that fixes your problem. If it does, I don't think there is a solution to make it work on your physical device though... – Waldenses

@Waldenses Unfortunately yhe issue exists whether I use a physical device or the Genymotion Android emulator. – Horsey

I'm also having this issue. Is there any workaround available? – Arboretum

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

Obmutescence

Answer 2

One of my co-workers solved this by using react-native-debugger

Tied