vscode 使用JavsScript debugger 插件调试Vue+vite项目,JavsScript debugger
插件是vscode
自带的,我用的vscode 版本Version: 1.88.1
![](https://file.jishuzhan.net/article/1786218118058610689/c60a9d3e4be7eba92f85b5ff1e557d4c.webp)
插件有了,试着点击vscode
运行和调试按钮
![](https://file.jishuzhan.net/article/1786218118058610689/33671ef84e2a9a0545366293516d3e54.webp)
![](https://file.jishuzhan.net/article/1786218118058610689/a40172eaa715277df1c330bb8da5eeef.webp)
选择Web App(Chrome)
![](https://file.jishuzhan.net/article/1786218118058610689/0dfcbe82b36d76dc8f1e283d23a9fae4.webp)
出现Launch Chrome against
点击运行
启动了Chrome,项目启动失败,因为端口改为了8080 并且自动生成了launch.json文件
需要先启动项目
npm run dev
或者yarn dev
, 把launch.json
端口改成项目的端口,关掉先前调试的浏览器窗口,重新开始运行调试。
kotlin
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173", // 换成项目的端口
"webRoot": "${workspaceFolder}"
}
]
}
![](https://file.jishuzhan.net/article/1786218118058610689/a2ae3d4aeebb415c99b4fba397112c4e.webp)
进入断点了,但是另一个文件断点却是没生效,unbound
,因为项目还没执行到没生效的那个文件,执行到这个文件,就生效了,如下图
![](https://file.jishuzhan.net/article/1786218118058610689/455356b1a476601f1055116affe782df.webp)
也可以新建js debug terminal 运行项目打开调试断点
![](https://file.jishuzhan.net/article/1786218118058610689/9ff569485c72f74f66d3d5ca7e8a8185.webp)
想要在vite.config.ts
打断点,需要新建js debug terminal
,运行项目,断点自动执行
![](https://file.jishuzhan.net/article/1786218118058610689/bafac0d099245dc7e60bec9a75aa808f.webp)