Debugging with sourcemap (babel), breakpoints move and can't see values of "non-local but in scope" variables. Works in chrome debugger.

[dipunm]

• VSCode Version: 1.28.2
• OS Version: macOS High Sierra Version 10.13.6 (17G65)

Steps to Reproduce:

So far, I have a fairly simple application. (https://github.com/dipunm/react-boiler/tree/5f14be9393aadbf717685cc91a5e8f9f03f54e2d)
The broken file in question is:

'use strict';

import React from 'react';
import { renderToNodeStream } from 'react-dom/server';
import colors from 'colors/safe';
import express from 'express';
import portfinder from 'portfinder';
import Promise from 'bluebird';
import App from '../components/App';


const app = express();
app.get('/', (req, res, next) => {
    res.contentType('html');
    const reactStream = renderToNodeStream(<App />);
    reactStream.pipe(res, {end: false});
    reactStream.on('end', () => {
        res.end();
    });
    next();
});

async function start() {
    portfinder.basePort = 3000;
    const port = await portfinder.getPortPromise()
    const listenAsync = Promise.promisify(app.listen).bind(app);
    await listenAsync(port);
    console.log(colors.bold(colors.blue(`
        Application has started and is running at:
        http://localhost:${port}/
    `)))
}


start().catch(console.log);

also, breakpoints are here:

The only other source file (App.js):

import React from 'react';
class App extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

export default App;

Then:
.babelrc

{
    "env": {
        "node": {
            "presets": [
                ["@babel/preset-env", {
                    "targets": {
                        "node": "current",
                        "esmodules": true
                    }
                }],
                "@babel/react"
            ],
            "sourceMaps": "both",
            "sourceType": "unambiguous",
            "sourceFileName": "index.js"
        }
    }
}

package.json scripts:

"scripts": {
    "start": "nodemon --exec BABEL_ENV=node babel-node src/server/index.js --inspect=1234",
    "debug": "nodemon --exec BABEL_ENV=node babel-node src/server/index.js --inspect-brk=1234"
  },

and my current launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 1234,
            "cwd": "${workspaceFolder}",
            "skipFiles": [
                "node_modules/**/*"
            ],
            "sourceMaps": true
        },
        {  
            "type": "node",
            "request": "launch",
            "name": "Nodemon",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/nodemon",
            "args": [
                "--exec", "BABEL_ENV=node babel-node"
            ],
            "program": "${workspaceFolder}/src/server/index.js",
            "restart": true,
            "console": "internalConsole",
            "internalConsoleOptions": "neverOpen",
            "sourceMaps": true,
            "cwd": "${workspaceFolder}"
        }
    ]
}

execute: npm run debug
debug using 'Attach'.
It will start debugging, after continuing, it will eventually break on a different line:

And you can see the breakpoints moved.
Detach and re-attach and the breakpoints are now back to where they should be (this is the same as if I started by executing npm start)
The problem now is that local variables are not what I expect:

You can see things like _App, _bluebird, _express have underscores before them but the variables App, Promise, express are nowhere in scope. Local variables (eg. variables like port when inside the start() function) exist and I can hover over them etc.

Same thing but using chrome debugger, I can see all the variables I expect to see, I can hover over and watch things like portfinder but not in vscode.

Does this issue occur when all extensions are disabled?: No -- But neither of the launch configurations work anumore. The attach complains that it can't find anything at port 1234 when the terminal says it is listening at port 1234, and the launch command is asking to use the inspector protocol and then complains that --debug-brk is not valid anymore (which vscode is doing on my behalf)

I have tried to give as much detail as I can. More details:
node: 8.10.0
npm: 6.1.0
chrome: Version 69.0.3497.100 (Official Build) (64-bit)
transpiled files are running in memory.

Upon further inspection, chrome has some of the characteristics of vscode... (but)

...but 2 things it does better is:

1. It doesn't move breakpoints around the first time you attach (even when using npm run debug)
2. I can hover over variables even if they don't exist with the same name in the transpiled source.

[roblourens]

There are a couple issues, the main one is the same that I was investigating here: facebook/create-react-app#5319 (comment), which is that debugging with a transpiled script that is loaded with the same name as the original script doesn't work well.

But also in your test repo, the closest file to your original issue seems to be express.js, but that is named index.js in the sourcemap for some reason. That seems to be related to this line in the babel config: other.sourceFileName = "index.js";. If I remove that then I am just left with the first issue.

The only workaround I have currently is that breakpoints set after the script loads will bind correctly. So you can put debugger; in the script and set BPs after you hit that. But obviously not a real solution.

[dipunm]

That is very insightful thankyou. I wonder if I can do anything to make the transpiled file have a different name.