async / await debug in chrome

[pomelio]

after changing the promise to async await, I found debugging in chrome is impossible. Is there any plan to fix this in the near future or should I switch back to promise ?

[mkonicek]

Hey @jaynsw, in order to be able to help you with this issue you need to provide some code samples. What doesn't work exactly? Where did you put the breakpoint?

I have a question for you. Did you see the New Issue Guidelines when creating this issue? Is there anything we could improve there? Is the text too long or unclear for example?

[Somojojojo]

I'll post my experience here, since the OP hasn't responded yet.

Debugging async/await in chrome is extremely difficult. Maybe because of my inexperience with the inner workings of how it works, I'm not sure. But when you have code like so:

1. let response = await getSomethingFromTheNetwork();
2. let bar = response.foo;
3. doSomethingWithFoobar(bar);

In Chrome if I place a breakpoint at line 2, the debugger will pause the application on that line and response will be undefined. Obviously this is not desirable behaviour, and you'd expect response to have been resolved by the time the debugger breaks at line 2.

Does this make sense?

[pomelio]

I have changed back all of my code to promise then and catch.
On 26 Feb 2016 11:11 AM, "Kyle Somogyi" notifications@github.com wrote:

I'll post my experience here, since the OP hasn't responded yet.

Debugging async/await in chrome is extremely difficult. Maybe because of
my inexperience with the inner workings of how it works, I'm not sure. But
when you have code like so:

1. let response = await getSomethingFromTheNetwork();2. let bar = response.foo;3. doSomethingWithFoobar(bar);

In Chrome if I place a breakpoint at line 2, the debugger will pause the
application on that line and response will be undefined. Obviously this
is not desirable behaviour, and you'd expect response to have been resolved
by the time the debugger breaks at line 2.

Does this make sense?

—
Reply to this email directly or view it on GitHub
#6056 (comment)
.

[mkonicek]

Thanks for the example @Somojojojo! Any idea how to make Chrome show you the value of response?

[Somojojojo]

Besides using the console JS API I haven't found a solid way of getting those values.
I haven't read into how React is managing the Chrome debug session at all, and I haven't had any experience managing it myself. At a high level, I would say you could defer breakpoints inside an async function the same way you defer code execution. As code execution progresses in an async function, you would execute breakpoints belonging to that call. In theory that would keep the debugger and the async function state synchronized. This is assuming you have power over if/when breakpoints are executed.

Again, as I have no idea how React is managing the debug session, my explanation likely sounds silly or obvious – but maybe it will give someone a good idea on how to solve this.

[mkonicek]

This looks like a feature request and I'm not sure anyone on the team has bandwidth to look into it. Let's vote on it on Product Pains (voting is not possible on GitHub) so we see how high-priority this is.

[mkonicek]

@facebook-github-bot feature

[facebook-github-bot]

Hey @jaynsw! Thanks for opening the issue, however it looks like a feature request. As noted in the Issue template we'd like to use the GitHub issues to track bugs only. Can you implement the feature as a standalone npm module? If not consider sending a pull request or a create an entry on Product Pains. It has a voting system and if the feature gets upvoted enough it might get implemented.

[facebook-github-bot]

Hey @jaynsw! Thanks for opening the issue, but we are closing it because it looks like a feature request. If this can't be implemented as a standalone npm module free to send us a Pull Request or create an entry on Product Pains. It has a voting system and if the feature gets upvoted enough it might get implemented.'

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/async-await-debug-in-chrome

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[mikecg]

@mkonicek Hello... has this feature been implemented? If not, is there a workaround?

[melissachang]

I believe async/await debugging in Chrome is currently broken:

https://bugs.chromium.org/p/chromium/issues/detail?id=833928

@aslushnikov FYI

[mikecg]

@Somojojojo I know this thread is old but I am having a similar experience. Are you still using react native and seeing the same difficult async/await debugging experience in Chrome? If so, did you come up with a better workaround for debugging?

[lhrolim]

I'm still experiencing that using RN 0.55.4

Are there any workarounds available?

[kelset]

Ok it looks like the chromium bug is still there, so there isn't much we can do about it for now AFAIK.

Still, let's reopen this.

[cpojer]

Since this is not actionable in the RN repo and an issue with Chromium, let's close this issue here since we can't do anything about it.