VSCode调试Vue代码
1.安装扩展2.创建launch.js会在当前项目下生成文件夹和配置文件3.配置launch.js字段说明:字段含义...
·
1.安装扩展
Debugger for Chrome
2.创建launch.js
会在当前项目下生成文件夹和配置文件
3.编辑launch.js
{
// 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:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
字段说明:
字段 | 含义 |
---|---|
version | 定义这个配置文件的版本,生成的时候默认是0.2.0 |
configurations | 配置域 |
name | 配置文件的名字,可以自定义 |
type | 调试的类型,node是vscode本身就支持,其他就需要下载插件了 |
request | 配置文件的请求类型,有launch和attach两种,launch是需要服务器的需要配置url |
url | 指定访问的链接 |
webRoot | 指定根目录或者执行文件 |
sourceMaps | 默认是启用的,对于打包的调试 |
userDataDir | 临时目录,专门保存调试过程产生的东西,这个字段是为了重新打开一个浏览器窗口,不会强制关闭已经打开的浏览器 |
预定变量 | 含义 |
---|---|
${workspaceRoot} | VSCode中打开文件夹的路径 |
${workspaceRootFolderName} | VSCode中打开文件夹的路径, 但不包含"/" |
${file} | 当前打开的文件 |
${relativeFile} | 当前打开的文件,相对于workspaceRoot |
${fileBasename} | 当前打开文件的文件名, 不含扩展名 |
${fileDirname} | 当前打开文件的目录名 |
${fileExtname} | 当前打开文件的扩展名 |
${cwd} | 当前启动时的工作目录 |
4.配置项目vue.config.js
module.exports = {
productionSourceMap: false,
configureWebpack: {
devtool: 'source-map'
}
//或者下面这种方式
//configureWebpack: config => {
// config.devtool = 'source-map';
//}
};
5.配置项目babel.config.js
module.exports = {
env: {
debug: {
sourceMap: true,
retainLines: true
}
},
//presets: ['@vue/app'] //@vue/cli-plugin-babel 3.x版本
presets: ['@vue/cli-plugin-babel/preset'] //@vue/cli-plugin-babel 4.x版本
};
6.在项目js文件或vue文件左侧序号行打好断点
7.启动vue项目
服务端运行的地址和端口必须与launch.js中保持一致
8.按F5或点击绿色小三角启动调试
默认会出现调试工具条,并自动打开一个Chrome窗口
9.自动进入设置的断点
按F5:继续下一个断点
按F10:下一步
按F11:进入详细步骤(比如函数体内)
按Shift+F11:跳出详细步骤
注意点:
1.这个创建的文件夹必须在项目根目录下,否则断点无法激活
2.launch.js、vue.config.js、babel.config.js配置文件在不同版本上会有差异,根据自己的版本来配置
3.修改launch.js、vue.config.js、babel.config.js这些配置文件后,手动npm run serve
重启下项目
更多推荐
已为社区贡献24条内容
所有评论(0)