debugging 如何在VS Code中对SvelteKit的客户端和服务器端代码进行调试?

syqv5f0l  于 2023-03-23  发布在  其他
关注(0)|答案(1)|浏览(198)

如何在服务器端和客户端的VS Code中进行调试(而不是在Chrome调试器中)?我无法在.ts文件中的服务器端代码中找到断点。
我知道Vite和VS Code在服务器端的调试有问题。有什么解决方法吗?

zlhcx6iw

zlhcx6iw1#

实际上,我终于在VS代码中调试了客户端和服务器上的SvelteKit。
这是一种复杂的方式,我不得不去让所有的调试只是工作.我会在这里列出的步骤,以防任何人都需要调试客户端/服务器在VS代码.它实际上工作得非常无缝,在两端有断点,他们都被击中.几乎就像这两个实际上并没有分开.
1.为服务器端创建启动配置。

{
     "type": "node-terminal",
     "name": "Run Script: dev",
     "request": "launch",
     "command": "npm run devv",
     "cwd": "${workspaceFolder}"
}

1.为chrome创建一个启动配置:

{
     "name": "Launch Chrome",
     "request": "launch",
     "type": "chrome",
     "url": "http://localhost:5173",
     "port": 5173,
     "smartStep": true,
     "skipFiles": [
         "<node_internals>/**",
         "node_modules/**",
         "/**/*.js",
         "/**/*.css",
         "/*\\.js"
     ],
     "userDataDir": "${workspaceFolder}/.vscode/chrome"
}

1.我从here那里得到了接下来的步骤服务器端代码调试目前在VS Code中的Vite中不支持。但是有一个解决方案。这将向您展示如何附加到dev服务器,但是它使用生成的vite文件而不是ts源Map。https://app.arcade.software/share/RIrEisEk7V36paQmqtNI
1.要解决无法在实际的.ts文件中放置断点并使其命中的问题,请使用VAVite。
将@vavite/node-loader作为开发依赖项安装。npm install --save-dev @vavite/node-loader
import { nodeLoaderPlugin } from "@vavite/node-loader/plugin"添加到Vite配置
nodeLoaderPlugin()添加到Vite插件

plugins: [
    nodeLoaderPlugin(),
    sveltekit()
]

使用vavite-loader vite dev(或vavite-loader rakkas devvavite-loader astro dev等)运行项目
这里的项目和插件,如果你想了解更多信息。https://github.com/cyco130/vavite/tree/main/packages/node-loader
1.安装了vavite node-loader后,更改package.json以添加一个命令(我将其命名为devv eg:"devv": "vavite-loader vite dev",这样它使用vavite命令来启动服务器。有了这个,你现在可以运行我在调试器中显示的第一个配置,它将启动vavite,vite dev服务器,并附加到它,可以在ts文件中命中断点。
1.一旦调试配置启动,然后从调试下拉列表中选择启动Chrome配置,并运行它。现在Chrome已附加到前端的VS Code。因此,在VS Code内部的.svelte文件和客户端加载函数等中会遇到断点。然后服务器端将从最后一个配置中命中(在VS Code中也是如此)。不再需要为客户端/服务器使用Chrome调试器。
如果有人有一个比这更容易的设置,他们想分享,这将是伟大的!

相关问题