Nativescript 在 VS Code 中进行调试

Posted 2023-04-13

【中文标题】Nativescript 在 VS Code 中进行调试

【英文标题】：Nativescript getting debugging to work in VS Code

【发布时间】：2019-06-26 21:43:04

【问题描述】：

谢谢，谢谢，谢谢分享您的 Nativescript 专业知识。我卡住了

我真的很努力。最近几天我一直在寻找并尝试让一个简单的 Nativescript 演示应用程序在 VS Code 调试器中运行并中断。

我的开发环境已完全设置。我可以在 VS Code 中构建和运行 Nativescript 演示应用程序，只要我不尝试使用调试器。

这是我的tns doctor 输出。您可以看到我已正确设置所有内容。

我现在只做 android。忽略 tns-ios 更新。

我有这样的 launch.json 设置...

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

我已将此行添加到我的 webpack.config.js...

    devtool: "eval-source-map",

到目前为止，我可以找到关于如何在 VS Code 中进行 Nativescript 应用程序调试的所有内容。我错过了什么？这是我在尝试执行Launch on Android 时在 VS Code 调试输出中得到的结果。链接到 Pastebin...

Nativescript VSCode 'Launch on Android' debug output

在第一条评论中运行命令后编辑 2/3 控制台输出...

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

[NativeScriptCli] 执行：tns --analyticsClient VSCode --version [NSDebugAdapter] 在路径 'tns' 上使用 tns CLI v5.1.1

[NSDebugAdapter] 运行 tns 命令...

[NativeScriptCli] 执行：tns --analyticsClient VSCode 调试 android --watch --bundle [NSDebugAdapter] 观察 tns CLI 输出以接收连接令牌

正在搜索设备...

从 C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watchPatterns\nativescript-dev-webpack.js 执行 before-watchPatterns 挂钩

从 C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watch\nativescript-dev-webpack.js 执行 before-watch 钩子

为 Android 运行 webpack...

entryPath .\app...的捆绑应用程序

C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:453 抛出错误； ^

错误：EPERM：不允许操作，scandir 'C:/Users/markd/Documents/code-projects/nativescript/blank-vue-app/platforms/android/app/src/main/assets/app/App_Resources/安卓/drawable-mdpi/background.png' 在 Object.readdirSync (fs.js:786:3) 在 GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:288:41) 在 GlobSync._readdirInGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:267:20) 在 GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:276:17) 在 GlobSync._processReaddir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:137:22) 在 GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:132:10) 在 GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:380:10) 在 GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) 在 GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) 在 GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) 在 GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) 在 GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) 在 GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10) 在 GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10) 在新的 GlobSync (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:48:10) 在 Function.globSync [同步] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:26:10) 在 Function.rimrafSync [同步] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\rimraf\rimraf.js:280:22) 在 C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:166:16 在 Array.forEach () 在 CleanWebpackPlugin.clean (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:92:15) 在 CleanWebpackPlugin.apply (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:212:20) 在 webpack (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\lib\webpack.js:47:13) 在 processOptions (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:441:16) 在 yargs.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:536:3) 在 Object.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\yargs\yargs.js:567:18) 在 C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:219:8 在对象。 (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:538:3) 在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load (internal/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3) 在 Module.require (internal/modules/cjs/loader.js:637:17) 在需要（内部/模块/cjs/helpers.js:22:18） 在对象。 (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\bin\webpack.js:155:2) 在 Module._compile (internal/modules/cjs/loader.js:689:30)

[31;1m执行 webpack 失败，退出代码为 1。[0m

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

tns 调试

说明

在连接的设备或本机模拟器上为您的项目启动调试会话。必要时，该命令将在启动调试会话之前准备、构建、部署和启动应用程序。调试时，应用程序的输出会打印在控制台中，并且对代码所做的任何更改都会在所有连接的设备或正在运行的模拟器上同步。

命令

┌─────────┬──────────────────────┐ │ 用法 │ 概要 │ │ 一般│ $ tns debug android │ └──────────┴──────────────────────┘

【参考方案1】：

如果您没有让 Chrome 调试器工作，那么使用 VS Code 将不会获得任何更好的结果，因为它使用相同的协议。

我假设您的 package.json 的“devDependencies”块中包含 nativescript-dev-webpack？

如果没有，npm install --save-dev nativescript-dev-webpack

然后，tns debug android 应该会提示您使用 chrome 调试器连接的 URL，然后您应该能够在代码中的某处设置断点，您的应用程序可以在单击按钮或一些类似的直接用户事件后点击该断点.如果您尝试在应用程序启动的早期设置断点，除非您使用 --debug-brk 标志（请参阅https://docs.nativescript.org/tooling/debugging/debugging#debugger-options），否则它可能不会命中它。最好从应用程序完全启动并运行后可以触发的东西开始。在使用 VS Code 时尤其如此。

一旦您在 Chrome 上取得了如此大的成功，请安装适用于 VS Code 的 Nativescript 扩展 (https://docs.nativescript.org/tooling/visual-studio-code-extension)。 请注意，在 VS Code 中，单击“设置齿轮”图标可以编辑launch.json，它控制调试选项的目标配置。例如，如果您有 $workspaceRoot 以外的根目录，则可能需要在此处对其进行编辑，以便在正确的位置找到您的项目。 当我使用它时，我使用“附加 android”选项，而不是启动，但这主要只是我的偏好。我相信无论哪种方式都有效。我使用tns debug android从命令行启动，然后在VS Code中选择“附加android”，然后等待（很短但看似很长的时间）顶部的“来回”进度指示器停止，控制台输出到说“准备附加调试器”然后我可以选择一个断点并触发应用程序，它会捕获它。确保调试器附件到位可能会令人沮丧，尤其是在触发重新启动的编辑之后，因为延迟。但我将它用于我的 android 调试相当多。无论出于何种原因，当我尝试对 iOS 执行相同操作时，它会反复断开连接，但为此，Chrome 运行良好。

我真正想要的是一个紧凑而干净的 WebStorm 调试器解决方案，这是我选择的 IDE，并且曾经有一个（不再有效）。这就是生活。

【参考方案2】：

你需要 nativescript-dev-webpack@0.19.1 并且需要更新你的 webpack.config 文件

npm i nativescript-dev-webpack@latest --save-dev
./node_modules/.bin/update-ns-webpack --configs

【讨论】：

感谢@Fatme 的回复，我运行了您建议的命令。他们似乎运行成功。但是现在当我在 Android 上单击启动时，我得到了新的错误。在 OP 中添加了我上面的控制台输出。

我还在努力。我正在谷歌搜索并查找有关如何在 VS Code 中进行调试并尝试它们的文章。什么都行不通。我构建并运行该应用程序，但我无法在 VS Code 甚至使用 Chrome 调试器中触发断点。任何地方都没有错误，只会遇到零个断点。事实上，在 VS Code 中，一旦我尝试触发活动断点，它们就会变成空心灰色“非活动”。谁能指出我的解决方案？我非常接近让我的 Nativescript 开发环境完全正常工作。我需要调试：-/