Sourcemap remote debugging with break points #9742
Comments
kieferrm
added
*question
|
I'm not able to make it work with docker as well (a nodejs/express/typescript app). Can someone possibly make a clear statement about whether it is supposed to work? That's really frustrating to spend hours and days on something that is maybe not working at all. For information, I was able to remode debug pure nodejs/express javascript. |
|
@FredericLatour are you able to set and hit breakpoints in *.js files if the "sourceMaps" attribute in your launch config is set to false? |
|
@weinand As written I was able indeed to remode debug (and set breakpoints) if no sourcemaps are involved but maybe you are asking for something more specific? |
|
@FredericLatour I'm asking whether you were able to set and hit breakpoints in *.js files in your Docker/TypeScript app when the "sourceMaps" attribute in your launch config is set to false. If yes, then this means that |
|
@weinand . Ok. As far as I remember (have done hundreds of tries since then): yes. But for the sake of starting on the right track, I will check right now and will let you know. As far as I can understand, you are meaning that this is supposed to work. Don't want to look like I'm insisting but why not having a sample docker based repository posted? I mean, if I can clone a repository and see by myself that this is working properly, not only I would be confident to spend additional time on this but also I'll be able to compare the sample configuration/settings with my own configuration. Will check your specific question now and post back the result. |
|
@FredericLatour yes, I could post sample projects on github for thousand of interesting node.js + something (e.g. Docker) use cases but I'm actually a developer on the VS Code team, not on the Docker team ;-) |
|
@weinand I see what you mean but at the same time, I can't see hundreds of use-cases involving local/remote stuff with vscode. Besides "editing features", debugging is a hot topic ... And being able to debug "typescript" MS great js superset from another great MS tool "vscode" using current modern dev workflow (docker/vagrant/what else...) seems not even optional to me but I may be biased ... the docker sample is just an easy way for you (vscode team) to provide a sample that shows explicitly that remode debugging is working both with and without sourcemaps. Yes, the @delfinof project is exactly what I was suggesting. However I tried it and it didn't work. But not being published from vscode team, it was hard to say this sample is confirmed to be working on both windows and mac. Moreover, as you can see, the launch config is different between windows (a specific IP address 10.0.75.2) and mac (address = localhost). That's a bit surprising considering that docker for windows works the same way. Still will retry @delfinof sample ... could have been tired the other day after hundreds of configuration settings changes... Now if you have someone that has both Windows 10 and docker for windows in your team ... that would be great if this person could give it a try (just need 10 minutes). Will post back my results . |
|
FYI tried on 2 different projects and on 6 occasions. Debugging with breakpoints have never worked for me since VSCode launched. Many hours lost. |
|
@FredericLatour I suggest that you try to run the docker sample from #2472 on Windows 10 since that seems to be platform where you've experienced the problem (you didn't mention what OS and node version you are using, so I just picked OS X). "trace": "sm" |
|
@weinand Tried on my project. Set sourceMaps to false, removed outDir settings, set localRoot to the dest folder (where I generate typescript or copy js files for those files that are pure js) Now for some reasons, I can breakpoint in pure js files (files copied from src to build folder without transpilation) but not in js files transpiled from typescript. Doesn't make anys sense if you ask me!! I thought that maybe it was the reference to the sourcemap within the js file:
Still not able to break point in js files that are transpiled from ts. Those things can make you crazy ... Any idea what is happening here? |
|
Sure I've understood that, but you did not try it with "trace": "sm". |
@weinand I don't think I've seen this option before. It is neither in the docs? |
|
@tinganho "trace" is a new internal setting that helps when investigating problems. It is not (yet) an official end user setting. @FredericLatour please use the "trace" option on your project as well. Watch out for paths where the case of the drive letters doesn't match. |
|
@weinand OK, I tried with that option, but it still doesn't work for me. It says cannot find the generated Just curios what |
|
@weinand Where am I supposed to get "trace" information? |
|
@FredericLatour on the debug console @tinganho the "trace" option cannot 'fix' anything magically. It just a verbose option for the debugger. Let me know what "trace" prints on the debug console. |
|
I got breakpoints working now. You really need to document {
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "app.local",
"restart": false,
"sourceMaps": true,
"outDir": "${workspaceRoot}/local",
"localRoot": "${workspaceRoot}",
"remoteRoot": "/home/myusername/app"
}, |
|
But thanks anyway for the assistent. |
|
@weinand I don't get anything in the debug console ... not sure what's going on here |
|
what version of VSCode are you using? |
|
@weinand 1.4 |
|
@weinand I really don't get how you get this sample to work immediately. It doesn't even see the ts file in my case:
|
|
@weinand Moreover, in all honesty, this is not your typical app structure. Transpiled "js" file in the same folder as the typescript folder.. We can never be sure that some side effects are not involved here... With such a configuration localRoot, remoteRoot and outDir settings don't necessarily clarify things. When I see so many hours, days, posts, frustration, etc ... root nodejs folder (with package.json and so on: And now in that case
What about SourceMap generation: inline, separate files ? Are both supposed to work? |
|
@FredericLatour since you are a Docker professional, it would be great if you could create the "meaningful" (but still minimal) project that has the desired structure and shows how to set things up. |
|
@weinand I'm far from being a Docker pro. I started to investigate this tech a month ago or so. the basics are really easy to understand. Being able to run the sample on your Macbook makes you as Pro as I can be :)
Hopefuly you are not meaning I'm not constructive by trying desperately to get remote debugging with sourcemaps working or at least trying to know if it is supposed to work which is still not really clear at this time. I could certainly try to come up with a sample as a starting point but before that can you please:
Considering a fairly standard structure: root nodejs folder app (with package.json and so on): Considering that folder /code in the docker container is mapped to the local root nodejs folder app. What am I supposed to use for the following settings:
Are all combination of sourceMaps generation supported? (inline, separate map file) That would be a good starting point for building a meaningful sample :) |
|
We will put this on the September plan. |
|
@weinand To tell the truth that's a bit beyond me that you still haven't given a try to the sample you mentioned earlier under windows 10. Anyway, no other choice than going ahead on my own in the meantime ... and maybe after a thousand of settings, tsc generation and folder structure combinations, I will get it to work by luck. |
|
Hitting TypeScript breakpoints in the unmodified sample works fine on Windows 10 in the VS Code - Insiders. |
|
@weinand sounds crazy but will restart back from the beginning - cloning the repo and following the instructions in the readme.md. |
|
@weinand Just tried again and it doesn't work any better. Just trying to understand here. Can you confirm that unlike what is written in the sample readme.md you had to run "npm run-script dockerdebug" and not just "npm dockerdebug"... Running docker debug: Setting breakpoints in ts: running debugger with "Attach to docker (win)
This is just crazy that you are able to make this work while I am not ... The steps are easy enough and it's hard to think of anything I would be missing.... |
|
Yes, I had to add the |
|
What do you mean by VS Code - Insiders? |
|
@weinand Could be the reason it doesn't work then? |
|
Sure, that could be. I didn't try with 1.4. |
|
@weinand I had great hope with this insider but it didn't change anything ... the exact same problem... Question: |
|
@weinand It doesn't work any better on the c drive ... this is just insane. This is just getting crazy .... will open another issue and ask to other users if they mind giving it a try ... What do you think? |
|
@weinand I have looked a bit deeper and I have a hard time to understand how you make this work without any changes ... Alternatively, I can make it work by:
Now I'm not really into grunt ... is the grunt file supposed to copy files from tsout to tssrc? If this is the case, it doesn't work on my side. That said, it seems a bit weird to copy back the generated files .... in the source folder. |
|
I just added a "VS Code Recipe" for how to debug transpiled source in Docker with VS Code. Please see https://github.com/weinand/vscode-recipes/tree/master/Docker-TypeScript |
|
I'm happy to see I'm not alone in the remote-debugging issues area. I have a nodejs, babel, webpack 2 server that I try to debug using the remote debugger.
For the sake of simplicity I'm trying to remote debug using the localhost (although my app is running inside a docker). Note: I even tried to use the 'show loaded scripts' feature in VSC and add breakpoints inside the loaded script but the problems above still occur. launch.json {
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": true,
"localRoot": "${workspaceRoot}",
"remoteRoot": null,
"outFiles": ["${workspaceRoot}/**/*.js"],
"smartStep":true
}
]}.babelrc {
"presets": [
"es2015-webpack"
],
"sourceMaps": true,
"plugins": [
"transform-runtime",
["transform-es2015-modules-commonjs-simple", {
"noMangle": true
}],
[
"babel-plugin-webpack-alias",
{
"config": "./webpack.config.dev.js"
}
]
]
}webpack.config import path from 'path';
import fs from 'fs';
import webpack from 'webpack';
export default {
entry: "./server.js",
target: 'node',
externals: fs.readdirSync("node_modules"),
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, "build"),
filename: "[name].js",
},
resolve: {
extensions: [
"*",
".js",
".json",
]
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
"babel-loader"
],
}
]
},
devServer: {
contentBase: path.join(__dirname, "api")
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
}Please bear in mind this is the current settings I have after trying multiple solutions shown online, but I'm still stuck with this issue. Can you please assist @weinand ? |
|
Hello there! I'm having a very hard time trying to setup remote debugging as well. I have a Node.js application written in TypeScript. I'm using Docker container to transpile and run the application in development environment. I've managed to expose the port and to connect to it with the IDE. However, I can't make breakpoints to work from source TypeScript files. They are just turning grey when I connect to the running app.
My {
"version": "0.2.0",
"configurations": [
{
"name": "Node Remote Debug",
"type": "node",
"request": "attach",
"protocol": "inspector",
"port": 9229,
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/.build/compiled/**/*.js"
],
"localRoot": "${workspaceRoot}",
"remoteRoot": "/opt/project",
"trace": true
}
]
}Here's example source map file: {
"version": 3,
"sources": [
"cli.ts"
],
"names": [],
"mappings": ";;;AAEA,4BAA0B;…",
"file": "cli.js",
"sourcesContent": ["…"]
}It's referenced like this from the transpiled file: And here's the part of the debug trace log: If I place breakpoints inside of transpiled JS files (in How do I make it to work? I think I'm missing something trivial here. Any suggestions will be highly appreciated! Thank you! |
|
also happens for me, when my launch.json looks like: {
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"port": 9229,
"address": "localhost",
"restart": true,
"protocol": "inspector",
"remoteRoot": null,
"sourceMaps": true,
"localRoot": "${workspaceRoot}/"
}
]
}
I'm running nodemon with babel-node. When I put a debugger, it opens a new file (with the precompiled ES6 as expected) with this title: |
|
@lironess since you are leaving the "remoteRoot" undefined, your setup is no remote setup. |
|
@slavafomin did you ever figure this out? I have the same issue in the latest stable version 1.21.1 |
bpasero
removed
the
*question
|
With the appearance of the VS Code Remote Development Pack this problem has become obsolete. |
I tried a whole day to get remote debugging with break points on my VM, but I didn't succeed. I have read all old issues, blog posts and SO. But I still cannot figure out what I've done wrong?
I have a VM running locally on my Mac at host
app.local. Inside the VM I have a folder/home/myusername/app, I have a TS project. Here is my configurations :{ "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": true, "outDir": "Build", "rootDir": ".", "experimentalDecorators": true, "jsx": "react", "reactNamespace": "Element", "removeComments": true, "forceConsistentCasingInFileNames": true, "strictNullChecks": true, "noEmitOnError": true, "noImplicitThis": true, "inlineSourceMap": true, "inlineSources": true }, "exclude": [ "node_modules", "vendor" ] }And here is my
launch.json:{ "version": "0.2.0", "configurations": [ { "name": "Attach", "type": "node", "request": "attach", "address": "app.local", "port": 5858, "sourceMaps": true, "localRoot": "${workspaceRoot}", "remoteRoot": "/home/myusername/app", "restart": true } ] }I can see the generated files have inlined source map and inlined sources(I have also tried with non-inlined mapping as well). I start the server
node-dev --debug Build/Start.js. After that I attach to the process and succeeds. But the problem comes when I try to set a break point — it fails?I have also tried many
remoteRootpaths to hopefully get the breakpoints working, though failed? I don't think I have a remote idea what I've done wrong at this moment.The text was updated successfully, but these errors were encountered: