Nativescript getting debugging to work in VS Code

Question

Thank you, thank you, thank you for sharing your Nativescript expertise. I'm pretty stuck

I'm really trying. I'm searching and trying for last couple days to get a simple Nativescript demo app to run in VS Code debugger and break.

I have my dev environment fully setup. I can build and run Nativescript demo apps in VS Code as long as I don't try to use the debugger.

Here is my tns doctor output. You can see I have it all setup correctly.

I'm only doing Android for now. Ignore the tns-ios update.

I have my launch.json setup like this...

    {
        "name": "Launch on Android",
        "type": "nativescript",
        "request": "launch",
        "platform": "android",
        "appRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "watch": true,
        "tnsArgs": [
            "--debug",
            "--bundle"
        ]
    },

I've added this line to my webpack.config.js...

    devtool: "eval-source-map",

And so far, above is all I can find on how to get Nativescript app debugging working in VS Code. What am I missing? Here is what I get in VS Code debug output when I try to do Launch on Android. Link is to Pastebin...

Nativescript VSCode 'Launch on Android' debug output

EDIT 2/3 console output after running commands in first comment...

[NativeScriptCli] execute: tns --analyticsClient VSCode --version

[NativeScriptCli] execute: tns --analyticsClient VSCode --version [NSDebugAdapter] Using tns CLI v5.1.1 on path 'tns'

[NSDebugAdapter] Running tns command...

[NativeScriptCli] execute: tns --analyticsClient VSCode debug android --watch --bundle [NSDebugAdapter] Watching the tns CLI output to receive a connection token

Searching for devices...

Executing before-watchPatterns hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watchPatterns\nativescript-dev-webpack.js

Executing before-watch hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watch\nativescript-dev-webpack.js

Running webpack for Android...

Bundling application for entryPath .\app...

C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:453 throw err; ^

Error: EPERM: operation not permitted, scandir 'C:/Users/markd/Documents/code-projects/nativescript/blank-vue-app/platforms/android/app/src/main/assets/app/App_Resources/Android/drawable-mdpi/background.png' at Object.readdirSync (fs.js:786:3) at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:288:41) at GlobSync._readdirInGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:267:20) at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:276:17) at GlobSync._processReaddir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:137:22) at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:132:10) at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:380:10) at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) at new GlobSync (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:48:10) at Function.globSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:26:10) at Function.rimrafSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\rimraf\rimraf.js:280:22) at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:166:16 at Array.forEach () at CleanWebpackPlugin.clean (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:92:15) at CleanWebpackPlugin.apply (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:212:20) at webpack (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\lib\webpack.js:47:13) at processOptions (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:441:16) at yargs.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:536:3) at Object.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\yargs\yargs.js:567:18) at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:219:8 at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:538:3) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\bin\webpack.js:155:2) at Module._compile (internal/modules/cjs/loader.js:689:30)

[31;1mExecuting webpack failed with exit code 1.[0m

[31;1mCannot read property 'kill' of undefined[0m

tns debug

Description

Initiates a debugging session for your project on a connected device or native emulator. When necessary, the command will prepare, build, deploy and launch the app before starting the debug session. While debugging, the output from the application is printed in the console and any changes made to your code are synchronized on all connected devices or running emulators.

Commands

┌─────────┬─────────────────────┐ │ Usage │ Synopsis │ │ General │ $ tns debug android │ └─────────┴─────────────────────┘

tremho tremho · Accepted Answer · 2020-02-22T18:09:29

If you aren't getting Chrome debugger to work, you won't get any better results with VS Code, since it uses the same protocol.

I assume you have nativescript-dev-webpack included in your 'devDependencies' block of your package.json?

If not, npm install --save-dev nativescript-dev-webpack

then, tns debug android should prompt you with the URL for the chrome debugger connection, and from there you should be able to set a breakpoint somewhere in your code that your application can hit after a button click or some similar direct user event. If you try to set a breakpoint early in the startup of the app, it may not hit it unless you use the --debug-brk flag (see https://docs.nativescript.org/tooling/debugging/debugging#debugger-options). Best to start with something you can trigger after the app if fully up and running. this will be especially true when using VS Code.

Once you get this level of success with Chrome, install the Nativescript extensions for VS Code (https://docs.nativescript.org/tooling/visual-studio-code-extension). Note that, when in VS Code, clicking the 'settings gear' icon allows you to edit launch.json which controls the target configuration for the debug options. If you have a root other than ${workspaceRoot}, for example, you may need to edit it here so that finds your project in the right place. When I use this, I use the 'attach android' option, rather than the launch, but that's mostly just my preference. I believe it works either way. I launch from the command line with tns debug android and then in VS Code select 'attach android' and then wait (a short but seemingly long time) for the 'back and forth' progress indicator at the top to stop and the console output to say 'ready to attach debugger' Then I can select a breakpoint and trigger the app, and it will catch it. It can be frustrating to insure the debugger attachment is in place, especially after an edit that triggers a restart, because of the delay. But I use it for my android debugging quite a bit. For whatever reason, it disconnects repeatedly for me when I try to do the same for iOS, but for that, Chrome works nicely.

What I'd really like is a tight and clean debugger solution for WebStorm, which is my IDE of choice, and there used to be one (that no longer works). Such is life.

Nativescript getting debugging to work in VS Code

tns debug

Description

Commands

2 Answers