Debugging NativeScript with Vue in Visual Studio Code

Question

I've created a NativeScript app with Vue.js using the following guide: https://nativescript-vue.org/en/docs/getting-started/quick-start/

These commands create the following code structure:

I'm trying to debug the app with Visual Studio Code. I installed the NativeScript extension for VS Code. This generated the following launch.json config:

{
    "name": "Launch on Android",
    "type": "nativescript",
    "request": "launch",
    "platform": "android",
    "appRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "wtch": true
}

Upon running, the following error is shown:

No project found at or above 'my project root dir' and neither was a --path specified.

When I change the launch.json config to the following (notice the dist directory in appRoot):

{
    "name": "Launch on Android",
    "type": "nativescript",
    "request": "launch",
    "platform": "android",
    "appRoot": "${workspaceRoot}\\dist",
    "sourceMaps": true,
    "wtch": true
}

and start debugging, the app launches perfectly, but I'm unable to set any breakpoints in the JavaScript files. This is of course because the dist directory already contains the compiled Android/iOS code, and the JavaScript files reside in the src directory.

How can I debug and set breakpoints using NativeScript, Vue.js and VS Code?

David · Accepted Answer · 2018-09-07 02:15:16Z

4

If you use the next branch of the nativescript-vue/vue-cli-template, debugging is now possible in VSCode with the NativeScript VSCode plugin. This template uses Vue CLI 3.0 to simplify setup and re-align to NativeScript practices (specifically allowing tns commands in the root directory).

Note that as mentionned in the debug Webpack section, you will need to add the following to your appropriate launch.json configurations:

"tnsArgs": [ "--bundle" ]

Also, activating webpack source maps is required to enable breakpoints in the single-file components. Add the following to your webpack.config.js:

devtool: "eval-source-map"

Enjoy integrated debugging.

edited Sep 7, 2018 at 2:15

answered Sep 7, 2018 at 1:52

David

10k6 gold badges67 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fikkatra · Accepted Answer · 2018-07-04 15:35:57Z

2

NativeScript-Vue and the NativeScript VS Code plugin are incompatible, because NativeScript-Vue uses the npm commands, whereas the NativeScript VS Code plugin uses the tns commands behind the scenes.

To debug NativeScript-Vue, run

npm run debug:<platform>

In the debug output, you will see a url to debug using Chrome DevTools. It looks something like this:

To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

Open this url in Chrome and you will be able to debug in Chrome DevTools, including setting breakpoints.

answered Jul 4, 2018 at 15:35

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Collectives™ on Stack Overflow

Debugging NativeScript with Vue in Visual Studio Code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related