Private class fields: support in Chrome developer tools / Visual Studio Code

Question

Private class fields have been shipped in Chrome 74 according to caniuse. I am aware that despite being shipped, private class fields still have proposal status as of TC39.

We would very much love to use these in the webcomponent library we're developing. Our build setup fully supports this and the code works as designed.

Unfortunately, by the looks of it there is still no support for this feature in the Chrome developer tools (as of Version 78.0.3904.97) - despite a Chromium issue claiming the opposite.

Not only can you not look into private class fields while debugging

but also the indentation is completely screwed in the source view (we're using sourcemaps). Identically wrong indentation behaviour is found in Visual Studio Code 1.39.2 (which, I assume, is the reason I'm seeing this wrong indentation in Chrome developer tools).

Also VS Code linter shows Invalid character:

I tried to research information on this, but wasn't able to find anything substantial.

Does anyone have any reference/knowledge as of

1. is this supposed to work (which I'd expect for a feature shipped 5 versions ago, maybe behind a flag?),
2. if not, when will this work,
3. is there any way to enable support for private class fields in VS Code (e.g. via a plugin)?

What I was able to find:

• Chromium Issue 8337: Include private fields in GetInternalProperties Status: Fixed (Closed)
• Typescript issue (has been going on since 2016)
• VS Code issue (marked as a duplicate of above Typescript issue)

Answer 1

When will this work?

• Showing private class fields was introduced in Chrome 77
• Displaying them was improved in Chrome 101
• With Chrome 111, you can directly access private fields from the console