nativescript-vscode-extension

nativescript-vscode-extension copied to clipboard

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.

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.

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.

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.

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

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.

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

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.

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

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

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.

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

I looked at this issue for an hour or so. I'm sure we need something like encodeUri(path) somewhere, but it's a bit hard to find where exactly. Perhaps we should show a warning if the path contains a space (for the time being)?

Does it do the same thing if the file workspace path contains hyphens and dots as well or only spaces?

This is still not working for me. Tried to debug TS file just skips over it. If i put the break point on the JS file it then goes to the ts file for the corresponding line.

Additionally when i put the breakpoint on the ts file the debug console throws an error:

ENOENT: no such file or directory, open 'C:\repos\helloworldnative\node_modules\@angular\animations\bundles\shared.js.map","\**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} ...`

The application error says Workstation Error Loading IPP: ippStsWaterfall: Cannot load required library, waterfall is used

If that helps?

David Bambrick

JCAII

[email protected]

416-717-4556

This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.

On Wed, Mar 14, 2018 at 3:13 PM, Nico [email protected] wrote:

This is still not working for me. Tried to debug TS file just skips over it. If i put the break point on the JS file it then goes to the ts file for the corresponding line

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/NativeScript/nativescript-vscode-extension/issues/134#issuecomment-373141904, or mute the thread https://github.com/notifications/unsubscribe-auth/AFsn119V6gKNP01ag1jw_gILQMyWWJTVks5teWvJgaJpZM4NZfcf .

Got exactly the same problem as @ndcunningham ... removed package angular/animation from my app , as i did not need it finally :) , and now the error is the same but with file ..\node_modules@angular\common\bundles\api.js.map... *Guess there's nothing to do with thse files themselves ....

Hi, same exact problem than @ndcunningham and @karlatt ... VSCode can't set .ts breakpoint. I'm now debugging with Chrome Dev Tools which seems to work ok by now.

Don't think its related to whitespaces in the dir name. Have same issue with each new project and checked "C:\wtfs\wtf" with --ng template. Running on Windows 10, nativescript 3.4.3 - only Chrome debugging works.

Using VSC 1.21.1.

Ok, and putting breakpoint in .js file makes VSC jump into.. Proper place in TS file from which JS was generated.

Same here - cant set breakpoint in VSC 1.22.2. Every time i'm adding breakpoint in debug console error shown: Error: ENOENT: no such file or directory, open '{path to my project}\node_modules@angular\animations\bundles\shared.js.map"

But if i add "debugger;" in my code, vscode will stop in right TS file, so mappings works.

+1

I'm suffering similar problems. VSCode 1.20.1 on Ubuntu 16.04 and the basic Angular template leads to (having removed @angular/animations due to the same error on the path reported by @ndcunningham)...

Error: ENAMETOOLONG: name too long, open '/home/simon/mobapp/node_modules/@angular/common/bundles/api.js.map","/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes} checked by tsc...

Firstly, that file doesn't seem to exist. Secondly, the filename seems to be missing a terminating single quote.

I had sameproblem in windows 10, vs code 1.23.1 and nativescript 4.0.1

Ts breakpoints not hit, but when add breakpoint on js file it then goes to the ts file for the corresponding line. In my project map files is not generated. when I add sourceMap = true in tsconfig.json then the error below thrown:

error TS5053: Option 'sourceMap' cannot be specified with option 'inlineSourceMap'. and when I remove it the error below exist in: debugger console

[NSDebugAdapter] Connection to target application successfully enabled Error: ENOENT: no such file or directory, open 'C:\Projects\rps_conf2\node_modules\tns-core-modules\application\application-common.js.map'

I had a similar problem with VSCode 1.25.1 on Mac OS 10.13.6, it cannot debug .ts directly when my project folder name start with 'ts-' or end with '-ts'.