Cannot debug .ts files (instead steps into .js) when the workspace path contains space

[RobertGardner]

When I debug in VS Code I can set a breakpoint in a .ts file and the debugger will stop at that location, however, it stops in the .js file. All further step-debugging takes place in the .js file instead of in the .ts file.

The intro video for the extension shows the debugger stopping and stepping in the .ts file itself.

I am running 0.7.0 with NS 3.0.1, but this was happening with older versions as well.

I have tried switching to sourceMap (took awhile to figure out that compile.js forces inlineSourceMap!), but I get the same behavior.

[yyosifov]

Hi @RobertGardner,

we've tried to reproduce your issue locally but with no luck. Can you please help us with some more details:

1. What kind of NativeScript App are you working on - Angular or Pure NativeScript with TypeScript?
2. Have you tweaked somehow the Webpack configuration (in case you use Angular)
3. Are the .js files in the same place where the .ts files are?
4. Does this happen with a newly created application?
5. On what OS are you working on?

I'm not sure you need to use SourceMap, currently it works for us without one.

[RobertGardner]

Sorry, I should have provided this info the first time!

This has been happening since I first started developing on NativeScript a few months ago, but I decided to wait until NS 3 to see if that would fix it. When it didn't, I filed the bug.

Here is the info:
1- Angular
2- I made a clean install of HelloWorld and it happens on that project with no modifications anywhere. I can't find webpack on my path or anywhere on my system, and 'grep -ir webpack app' doesn't find anything.
3- Yes, and I can see the inline source in them (once I set it back to --inlineSourceMap).
4- Yes, HelloWorld using 'tns create --template nativescript-template-ng-tutorial'. 'tns doctor' reports no problems.
5- Mac OS 10.12.4 and I'm building for iOS only, I don't (yet) have any Android tooling installed.
Other- I did a complete remove and reinstall of NS3 and supporting tools (performing only the steps for iOS development), I have removed every VS Extension except this one, VS is updated to v1.12.2. It still happens.

[RobertGardner]

I'd love some advice on this, it's driving me crazy!

I did a clean install of NativeScript, VS Code, the extension, and the HelloWorld Angular tutorial on another laptop. It debugs correctly. A clean install of HelloWorld tutorial on my laptop does not. So there must be something about the installation on my laptop.

I tried completely uninstalling and reinstalling VS Code and the extension. I have done a complete reinstall of NativeScript. I am currently using NS 3.0.3 with modules 3.0.1, typescript 2.2.2 (with 2.3.2 installed globally, but VSCode set to use the workspace version).

Since this doesn't happen on a clean install on a different laptop, I realize this may not be a bug you can look into, but if you have any suggestions on what I could do to figure this out I'd greatly appreciate it.

[jfalmoguera]

I have the same problem. If I debug in VS Code the app does not stop in the TS file, but if I use the Chrome developer Tools the TS files as displayed and the break point are running well

[ivanbuhov]

I can't reproduce the problem, guys. Everything works on my side. @RobertGardner your configuration seems to be correct but still I can't guess what may be causing the problem. It seems to be a nasty bug.
I guess the VSCode extension fails to resolve source maps and fallback to the JavaScript file. You can try setting diagnosticLogging flag to true in your launch.json configuration and send the log in the Debugger Console.

[joshcomley]

Hi all,

I have just created an identical issue to this, so I'll close that one and contribute to this one.

I am having the same issue on Windows 10.

I have created a new Angular project:

tns create some-app --ng

From VS Code, when I launch to debug mode all my breakpoints go to the JavaScript compiled version of my files rather than TypeScript.

The documentation states I should add sourceMap: "true" to my tsconfig.json, but when I do I am given the following error upon running:

error TS5053: Option 'sourceMap' cannot be specified with option 'inlineSourceMap'.

I thought I had tried on another laptop (and originally wrote as such), but I haven't (I was confusing myself with the other bug I've just reported). I'll check in a moment as it has a fully fresh install of {NS}, Android and VS Code.

If it's any help, you are welcome to TeamView to my laptop to inspect.

Many thanks,
Josh

[joshcomley]

I should mention I have tried uninstalling and reinstalling the NativeScript plugin and VS Code as a whole, and disabling all other VS Code plugins.

[joshcomley]

Hi all,

At least in my case, I've figured out what is causing this behaviour.

If you have your code here:

D:\Code\MyProjects\MyApp

All is OK, and I can debug to TypeScript files.

If you rename MyProjects to My Projects (in other words introduce a space in the path name) then debugging TypeScript no longer works and you are taken to the JavaScript files - in VS Code. Using tns debug android however and opening the Chrome debugger works fine with spaces in the path name.

Probably somewhere some path variable is not wrapped in quotes, but that's just a guess.

I hope this helps.

Cheers,
Josh

[ivanbuhov]

@joshcomley nice catch.
@RobertGardner can you confirm that having a space in the workspace path is what causes the problem in your case, too?

[josealmoguera]

Hi,
I can confirm this behavior. After changing the path (removing spaces from the path) the break points are working fine and the code displayed is the TypeScript content.

[RobertGardner]

Yes, that fixed it!!!!! Jumping for joy!!!