CODEWITHSUNDEEP
vue.jswebpackvisual-studio-codenativescriptnativescript-vue
fikkatra
fikkatra

Reputation: 5792

Debugging NativeScript with Vue in Visual Studio Code

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:

enter image description here

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?

Upvotes: 2

Views: 1866

Answers (2)

David
David

Reputation: 9945

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.

Upvotes: 4

fikkatra
fikkatra

Reputation: 5792

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.

Upvotes: 2

Related Questions