Remote debug node in docker container - sourcemaps in WebStorm

Question

I have problems debugging contenerized application using WebStorm (or IntelliJ) remote debugging option which works perfect when trying to remote debug application running locally.

Here are the relevant parts of my gulp config file:

gulp.task("mainCompile", () =>
    gulp.src(`${config.src.main.baseDir}/**/*.js`, {base: "./src"})
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.babel())
        .pipe(plugins.sourcemaps.write(".", {
          includeContent: false,
          sourceRoot: "../src"
        }))
        .pipe(gulp.dest(config.build.baseDir))
);

gulp.task("nodemon", ["copyResources", "compile"], () =>
    plugins.nodemon({
      execMap: {
        js: "node --debug-brk"
      },
      script: path.join(config.build.mainDir, "index.js"),
      ext: "js yaml",
      delay: 2500,
      debug: true,
      verbose: true,
      watch: config.src.main.baseDir,
      tasks: ["copyNonJs", "yamlToJson", "compile"]
    })
);

And the part of compose config. As you can see I mount the project root at /app in the container.

server:
    image: justmarried/jmserver:development-latest
    build:
      context: .
      dockerfile: containers/develop/Dockerfile
    ports:
      - 2701:2701
      - 5858:5858
    volumes:
      - ./:/app

Remote debugger attaches but stops only for breakpoints defined in index.js (or if I put a breakpoint inside "build" dir which is not what I want). When the app is fully loaded I get this:

As you can see index.js gets mapped perfectly but none of the other files do. Tried to inline code into sourcemaps but it didn't help. Is it a bug in WebStorm (newest, 2017.1.3)?

One more observation. When I do "show actual source" of any files in build dir in scripts tab in debug tab I get sth. like this:

(function (exports, require, module, __filename, __dirname) { "use strict";

var _httpStatus = require("http-status");

var _httpStatus2 = _interopRequireDefault(_httpStatus);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = {
  get: function get(req, res) {
    res.status(_httpStatus2.default.OK).json({
      text: "Hi there!"
    });
  }
};
//# sourceMappingURL=ping.js.map

});

But when I do "show source" I get

"use strict";

var _httpStatus = require("http-status");

var _httpStatus2 = _interopRequireDefault(_httpStatus);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = {
  get: function get(req, res) {
    res.status(_httpStatus2.default.OK).json({
      text: "Hi there!"
    });
  }
};
//# sourceMappingURL=ping.js.map

Of course the actual source of that file resides in the src/main dir not build/main dir and is:

import HttpStatus from "http-status";

module.exports = {
  get(req, res) {
    res.status(HttpStatus.OK).json({
      text: "Hi there!"
    });
  }
};

The contents of that ping.js.map is:

{"version":3,"sources":["main/handlers/ping.js"],"names":["module","exports","get","req","res","status","OK","json","text"],"mappings":";;AAAA;;;;;;AAEAA,OAAOC,OAAP,GAAiB;AACfC,KADe,eACXC,GADW,EACNC,GADM,EACD;AACZA,QAAIC,MAAJ,CAAW,qBAAWC,EAAtB,EAA0BC,IAA1B,CAA+B;AAC7BC,YAAM;AADuB,KAA/B;AAGD;AALc,CAAjB","file":"ping.js","sourceRoot":"../../../src"}

Remote debug node in docker container - sourcemaps in WebStorm

0 Answers