Отладка NativeScript с помощью Vue в коде Visual Studio

Я создал приложение NativeScript с Vue.js, используя следующее руководство: https://nativescript-vue.org/en/docs/getting-started/quick-start/

Эти команды создают следующую структуру кода:

введите описание изображения здесь

Я пытаюсь отладить приложение с помощью Visual Studio Code. Я установил расширение NativeScript для VS Code. Это сгенерировало следующую конфигурацию launch.json:

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

При запуске отображается следующая ошибка:

Ни один проект не найден в 'my project root dir' или выше, и ни один из них не был указан --path.

Когда я меняю конфигурацию launch.json на следующее (обратите внимание на каталог dist в appRoot):

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

и начать отладку, приложение запускается отлично, но я не могу установить точки останова в файлах JavaScript. Это, конечно, связано с тем, что каталог dist уже содержит скомпилированный код Android / iOS, а файлы JavaScript находятся в каталоге src.

Как я могу отлаживать и устанавливать точки останова с помощью NativeScript, Vue.js и VS Code?


visual-studio-code webpack nativescript vue.js nativescript-vue
person fikkatra    schedule 04.07.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Если вы используете ветвь next файла nativescript-vue / vue-cli- template, теперь возможна отладка в VSCode с помощью плагина NativeScript VSCode. В этом шаблоне используется Vue CLI 3.0, чтобы упростить настройку и привести ее в соответствие с практиками NativeScript (в частности, разрешая tns команды в корневом каталоге).

Обратите внимание, что, как указано в разделе отладка Webpack, вам нужно будет добавить следующее в соответствующие конфигурации launch.json:

"tnsArgs": [ "--bundle" ]

Кроме того, активация исходных карт веб-пакетов требуется для включения точек останова в однофайловых компонентах. Добавьте в свой webpack.config.js следующее:

devtool: "eval-source-map"

Наслаждайтесь интегрированной отладкой.

person David    schedule 07.09.2018

arrow_upward
2
arrow_downward

NativeScript-Vue и NativeScript VS Code plugin несовместимы, потому что NativeScript-Vue использует npm commands, тогда как плагин NativeScript VS Code использует tns команды за кулисами.

Чтобы отладить NativeScript-Vue, запустите

npm run debug:<platform>

В выводе отладки вы увидите URL-адрес для отладки с помощью Chrome DevTools. Выглядит это примерно так:

Чтобы начать отладку, откройте следующий URL-адрес в Chrome: chrome-devtools: //devtools/bundled/inspector.html? Experts = true & ws = localhost: 40000

Откройте этот URL-адрес в Chrome, и вы сможете выполнять отладку в Chrome DevTools, включая установку точек останова.

person fikkatra    schedule 04.07.2018