Async await transformed to ES5 generators not debuggable in Chrome

[jasonpang]

TypeScript Version: nightly (2.2.0-dev.20161118)

Chrome Version: Stable 54.0.2840.99 (Official Build) m (64-bit) (Revision 7eca4ce1e662f12cadaf96c30cd2335fd03e7140-refs/branch-heads/2840@{#830})

TypeScript Code:

function work() {
  return Promise.resolve(67);
}

async function method() {
  var number = await work();
  console.log(number);
}

debugger; method();

GIF of Issue:

Expected behavior:

Stepping into method() on Chrome should step into the original TypeScript file just a few lines up.

Actual behavior:

Stepping into method() on Chrome steps into the generated ES5 JavaScript file.

Instructions to Reproduce:

1. Download the self-contained project at my Google Drive link: https://goo.gl/8tmMXh (GitHub did not allow me to upload a .ZIP file).
2. Open index.html and follow the instructions on-screen.

Possibly related to:

• Chromium Bug: Step-over does not understand yield statements in generators
• Unexpected step over/into behavior in files using async/await #5888

[tonyn4444]

Yeah I've run into this problem too many times

[meakyl]

I have the same problem with the 2.1.1rc

[jasonpang]

Hey @rbuckton @mhegazy,

From Chromium Bug 496865, using Chrome to step into or over lines with await in an async function work. In other words, running this code works. Interestingly enough, it also works in Chrome Stable 54.0.2840.98, so I don't think I understand what the original bug really was and what got fixed here. The Chromium bug is now closed and marked as Fixed.

Problems that remain:

• After TypeScript transpiles async/await down to ES5, debugging the async function produces the behavior shown in the GIF in the first comment. Using async / await natively in Chrome without transpiling works perfectly
• Breakpoints cannot be set on lines with await

[jasonpang]

I have no idea what this means but it's really cool.

Using the target: "es6" option, I'm able to debug async/await perfectly! There are some slight jumps when you go into a method (it jumps to the end of the file and you have to step into it twice), but then it does step into the target function and it works beautifully:

{
  "compilerOptions": {
    "lib": [
      "dom",
      "es6",
      "dom.iterable",
      "scripthost"
    ],
    "module": "commonjs",
    "target": "es6"
}

Does not work with target es5.

Works best in Chrome Canary 57 since Chrome Stable 54 seems to syntax-highlight TypeScript incorrectly and make most of the file one large comment.

[rbuckton]

Unfortunately, the Chrome Dev Tools do not provide a means to step over generated code that is unmapped, such as the __generator helper emitted at the top of the file for ES5 and ES3 targets.. VS Code supports debugging Chrome and can skip over this generated content if you set "smartStep": true in the debugger launch configuration.

[Gambero81]

@mhegazy is this bug fixed also for chrome debugging? will be available in next typescript release?
Thanks

[kachalkov]

It is not a bug you need configure in settings to skip generated code (quite a lot of it :-/ )

…

On Wed, 18 Jan 2017, 20:18 Claudio, ***@***.***> wrote: @mhegazy <https://github.com/mhegazy> is this bug fixed also for chrome debugging? will be available in next typescript release? Thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#12390 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6dQ04V2Ei0zICpDxJoB06135tmafZrks5rTdj-gaJpZM4K3Zvg> .

[mikecg]

@kachalkov does your last comment still apply? It seems that Chrome dev tools still has issues with transpiled async arrow functions. Do you know how to workaround that?

[kachalkov]

Have not tried this with latest async await.

On Tue, 1 May 2018, 04:43 Michael Greenspan, ***@***.***> wrote: @kachalkov <https://github.com/kachalkov> does your last comment still apply? It seems that Chrome dev tools still has issues with transpiled async arrow functions. Do you know how to workaround that? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12390 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6dQxoIr3JgnZyWIH3VmNGtycTNHxyiks5tt1tHgaJpZM4K3Zvg> .

-- Best regards, Alex