Private Fields Not Inspectable In Chrome Dev Tools

[kane-mason]

Bug Report

Current Behavior
I am using @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods with webpack to create and use private class fields. Everything transformes correctly and the website works as expected. But when i put a breakpoint in chrome and try to inspect the value (within the class and within scope of course), chrome doesn't seem to recognise the variable.

I am not sure if this is a babel issue, a sourcemaps issue, or webpack issue, or chrome issue, i am just hoping to start here and see where it goes. Not sure if this is expected or there is a work around? Looking for some guidance please.

I did check and you can inspect native private fields in Chrome, though i understand this is not quite the same.

Input Code

export default class PrivateTest {

  #welcomeText = `\nHello from PrivateTest!`;

  constructor(element) {
    element.innerText += this.#welcomeText;
  }
}

Expected behavior/code
You should be able to inspect the private variable within the scope of the class

Babel Configuration (webpack.config.js)

loader: "babel-loader",
options: {
  presets: [
    ["@babel/preset-env", { exclude: ["@babel/plugin-transform-async-to-generator", "@babel/plugin-transform-regenerator"] }]
   ],
   plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
 }

Environment

• Babel version(s): [v7.7.5]
• Node/npm version: [Node 6/npm 6]
• OS: [Windows 10]
• Monorepo: [no]
• How you are using Babel: [loader]

Additional context/Screenshots
this.#welcomeText is not inspectable in current scope

Private fields runing natively in Chrome

[babel-bot]

Hey @kane-mason! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

Unfortunately, this is something that cannot be represented using source maps.

Babel generates this code for your class:

var PrivateTest = function PrivateTest(element) {
  _classCallCheck(this, PrivateTest);

  _welcomeText.set(this, {
    writable: true,
    value: "\nHello from PrivateTest!"
  });

  element.innerText += _classPrivateFieldGet(this, _welcomeText);
};

var _welcomeText = new WeakMap();

and there is no way for us to tell the debugger that when you write this.#welcomeTest it should actually run _classPrivateFieldGet(this, _welcomeText) 🙁

[kane-mason]

Thank you for the response. Is this someone elses shortcoming we can log on another project? For example with chrome or sourcemap spec. Or is there absolutely nothing we can do and have to live with

[JLHwung]

class-properties and private-methods are now included in preset-env behind a shippedProposals: true flag. If you use Chrome 84 and sets targets: "chrome 84" in preset-env, they will no longer be transpiled by Babel and you can inspect them from DevTools.