Add interactive debugging support

[utkuturunc]

node-debug/node-inspector or webstorm/vscode can be used in order to debug functions locally.

[thenikso]

I think this would require to start the whole thing with a --debug option to node.. I wonder how we could do this. I guess that starting serverless in debug mode should do.

[utkuturunc]

#47 should solve this issue. serverless-offline has debugger support.

[gertjvr]

referring to https://github.com/node-inspector/node-inspector#advanced-use

Steps to debug locally.

• run serverless webpack serve or serverless offline
• signal node process to enter debug mode (find the process id)
  • linux: kill -s USR1 {process id}
  • windows: node -e "process._debugProcess({process id})"
• use your debugging ide / tool of choice and connect remote debugging

[utkuturunc]

@gertjvr thanks. that works.

how can i use sourcemaps with this method and use the debugger on prebabel transpiled surces?

[gertjvr]

been pulling my hear out, only webstorm seems to be able to debug sourcemaps

[utkuturunc]

I tried with devtools: "source-map" in webpack and also set "sourcemaps": true in launch.json (vscode)

Webstorm mostly works including editing, but in console I have to use _logger2.default.info() instead of logger.info()

In VSCode, I have to put my breakpoints in .webpack folder but it will stop at mapped files. If webstorm can do it, this must be either missing feature on vscode's part or misconfiguration on my part. I cannot get it to listen to the breakpoints in my original source code.

In Chrome Debugger, I can put breakpoints in my source code from webpack://./ sources and it will stop at those points. However, my code lies in file://./ so editing is not possible.

[thenikso]

any updates on this? It would be great if we could add an howto directly in the readme

[ricardolpd]

So after a lot head bashing i managed to get it partially working with webpack.
It seems that paths from the sourcemaps out of the box dont seem to work.
So i found this webpack plugin and i set my webpack.config.js

`var templateFn = require('adjust-sourcemap-loader')
.moduleFilenameTemplate({
format: 'projectRelative'
});

module.exports = {
devtool: "source-map",
entry: {
babelExample: './babelExample.js',
converse: './converse.js'
},
target: 'node',
module: {
loaders: [
{
test: /.js$/,
loaders: ['babel'],
include: __dirname,
exclude: /node_modules/
},
{
test: /.json$/,
loader: 'json-loader'
}
]
},
output: {
devtoolModuleFilenameTemplate : templateFn,
devtoolFallbackModuleFilenameTemplate: templateFn,
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js'
},
};`

and then i created a launch.json (which needs tidying up but bare with me).

"configurations": [ { "type": "node", "request": "launch", "name": "Serve webcast", "program": "/Users/edevh46/.nvm/versions/node/v7.5.0/lib/node_modules/serverless/bin/serverless", "cwd": "${workspaceRoot}", "args": [ "webpack", "serve" ], "preLaunchTask": "build", "runtimeArgs": [ "--nolazy" ], "sourceMaps": true, "smartStep": true, "outFiles": [ "${workspaceRoot}/.webpack/**" ] } ] }

Now the strange thing is that to be able to breakpoint, i have to follow always this pattern.

launch server with vs code, which is the same as launching:
sls webpack serve
then i have to do:
sls webpack

If i do this debugging works,

However if i do the other way around (which is the logic way to me, please correct me if am wrong),
i get a load of errors which i think have to do with the sourcemaps:

TypeError: func is not a function at module.exports.serve._newExpressApp.funcConfs._getFuncConfigs.httpEvents._handlerAddCors.handler._handlerBase.func (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/serverless-webpack/lib/serve.js:119:7) at Layer.handle [as handle_request] (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/layer.js:95:5) at next (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/route.js:131:13) at Route.dispatch (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/layer.js:95:5) at /Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:277:22 at Function.process_params (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:330:12) at next (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:271:10) at jsonParser (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/body-parser/lib/types/json.js:103:7) at Layer.handle [as handle_request] (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:312:13) at /Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:280:7 at Function.process_params (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:330:12) at next (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:271:10) at expressInit (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/middleware/init.js:33:5) at Layer.handle [as handle_request] (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:312:13) at /Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:280:7 at Function.process_params (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:330:12) at next (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/index.js:271:10) at query (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/middleware/query.js:44:5) at Layer.handle [as handle_request] (/Users/edevh46/Source/Work/orchestration-middleware/node_modules/express/lib/router/layer.js:95:5)

Now it would be nice to get to the bottom of this, as to why is it happening.
-am I incorrect for doing sls webpack, then sls serve, (however this works in the command line)?

• do you guys think the issue could be where sourcemaps are not complete or something right before we lauch server, causing the issue (this seems unlickely i have to switch between applications to make the request).

• or the actual sourcemap is incorrect if so how can i get to the bottom of this, as it would be nice to have it debugging with vs code finally?

• Any hints or help would be really appreciated.
  P.S: should have i made a separate issue for this?

[ricardolpd]

I finally got debugging working in vs code with this package:

The key to it was to set the devtool to:
devtool: "source-map",

and in

output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
}

as far as i can tell this is the only stopping it, however just as an example please find a working version of my config:

var path = require('path');
const webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');

module.exports = {
  devtool: "source-map",
  debug: true,
  entry: {
    babelExample: 'example/babelExample.js',
    converse: 'converse/converse.js'
  },
  target: 'node',
  plugin: [
    new webpack.DefinePlugin({
      '__DEV__': true
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loaders: ['source-map'],
        include: __dirname,
      }
    ],
    externals: [nodeExternals()],
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: __dirname,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',
    libraryTarget: 'commonjs',
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    root: [
      path.resolve(__dirname),
      path.resolve(__dirname, 'server'),
    ],
    extensions: ['', '.js', '.jsx']
  }
};

This allows me to debug interactively in vscode 1.9.1 with node debugger extension using node v4.3.2 runtime.

[jamesandersen]

@ricardolpd I'm trying to follow your suggestions (using typescript in my case) and not having any luck so far. Is your project public by chance? I'm wondering if there's something I'm just missing...

[ricardolpd]

@jamesandersen no sorry the project is private and belongs to my workplace.
are you generating source maps?

the key bits for me to get it working with vs code was to use:
devtool: "source-map",

devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',

in my launch.json i also had to do:

"outFiles": [
                "${cwd}/<webpack_output_folder>/*"
            ],
 "sourceMaps": true,
 "smartStep": true

[deathweaselx86]

Do you know how to make source maps work with code that is not for API Gateway, preferably with node-inspector? sls webpack invoke runs too fast to send a debugging signal to and sls webpack watch ends up debugging the watch code.

[aheissenberger]

To debug add:
webpack.config.js: devtool: 'source-map',
add a debugger statement in your code
run node --inspect --debug-brk ./node_modules/.bin/sls webpack serve

for a complete example try my boilerplate and take a look into package.json:
https://github.com/aheissenberger/serverless-boilerplate
(webpack.config.js uses webpack 2.x Format - do not copy this if you use webpack 1.x - currently this is the default when installing serverless-webpack

[HyperBrain]

@aheissenberger 's approach seems to be working to debug. Closing this now. If you don't mind you can also try with a recent plugin version (and the new 3.0.0-rc.2 version which supports serverless invoke local now).

[skylarmb]

For any future googlers, the solution for me was twofold. I had to make sure the configuration in Webstorm was running with --inspect-brk under "Node parameters". In addition to this there seems to be a quirk where breakpoints are only hit after a debugger; statement. I never had to use debuggers in webstorm before using webpack, but now if I use a debugger statement, execution will stop there and any further breakpoints are respected.

[HyperBrain]

@skylarmb For me using VSCode adding --lazy additionally to the node command line to enable lazy breakpoint evaluation improved the situation too (at least when using babel-register). I'm not sure since which version of Node this is supported though.