配置VS Code 使其支持vue项目断点调试
已于 2024-01-20 21:49:25 修改
阅读量9.6k
收藏
18
点赞数
6
具体说明请参考 Webpack 官方文档。
方式一：使用debugger
介绍：js自带的方法
优点：简单好用，不需要额外的配置
注意：生产环境下需要去掉
方式二：使用vsCode插件断点
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "针对 localhost 启动 Chrome",
"url": "http://localhost:8099", // 替换成自己项目的路径
"webRoot": "${workspaceFolder}", //新版vscode webRoot默认为src目录 所以不需要再添加/src
"smartStep":true, //自动跳过未映射的代码
"sourceMapPathOverrides": { //源映射路径覆盖
"webpack:///src/*": "${webRoot}/*" //新版本vscode 中webRoot默认src目录，需要这一步
//"webpack:///src/*": "${webRoot}/*",
"webpack:///src/views/*": "${webRoot}/src/views/*",
"webpack:///./src/*": "${webRoot}/src/*",
},
"skipFiles": [
"<node_internals>/**/*.js", //跳过node核心模块代码
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/src/node_modules/**/*.js",
"${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
] //跳过文件
}
]
}const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
lintOnSave: false, // 修改成false 就是不检查了
productionSourceMap: false,
//devtool: "cheap-module-source-map",
//"devtool": "source-map",
configureWebpack: config => {
//console.log(workspaceFolder)
if (debug) { // 开发环境配置
config.devtool = 'source-map'
}
},
}config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
// config => config.devtool('cheap-source-map') // 公司项目一开始的配置，一开始源码映射调试是没问题的，不知从什么时候起就失效了 // 亲测无效
// config => config.devtool('eval-source-map') // 亲测可用
// config => config.devtool('source-map') // 亲测可用
// config => config.devtool('cheap-module-source-map') // 亲测可用
config => config.devtool('cheap-module-eval-source-map') // 亲测可用（荐）
)
起因
每个应用，不论大小，都需要理解程序是如何运行失败的。当我们写的程序没有按照自己写的逻辑走的时候，我们就会逐步一一排查问题。在平常开发过程中我们可能会借助 console.log 来排查,但是现在我们可以借助 VS Code 断点来调试项目。
前置条件
- 浏览器：Chrome
- 编辑器：VS Code
- vscode扩展插件：Debugger for Chrome
- 项目搭建：Vue CLI 3
vue项目断点调试主要有两种方式：
一：浏览器断点调试
在可以从 Chrome 浏览器调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的浏览器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系
source map可以生成一个源代码的映射文件.map文件，可以让你打包压缩的代码指向回源代码。
vue-cli3设置source map
使用vue-cli3搭建项目，在项目根目录vue.config.js文件配置相对应的devtool,集体devtool配置详情介绍可以参考我之前写的webpack文章 Devtool | webpack
//vue.config.js
module.exports = {
...
configureWebpack: {
devtool: 'source-map'
}
}
npm跑起项目后，在Chrome浏览器F12在控制台就可以进行相对应的断点调试了
注：devtool 设置成eval-cheap-module-source-map打包编译速度会比source-map更快，所以建议在开发环境设置成eval-cheap-module-source-map,生成环境设置成cheap-module-source-map,更多配置可以查看webpack 文档
二、VS Code断点调试
步骤一：安装Debugger for Chrome插件
步骤二：配置launch.json文件
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "针对 localhost 启动 Chrome",
"breakOnLoad": true,
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"<node_internals>/**/*.js", //跳过node核心模块代码
"${workspaceFolder}/node_modules/**",
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/src/node_modules/**/*.js",
"${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
],
"sourceMapPathOverrides": { //指定生成的sourceMap途径，参看浏览器生成的 .目录和src目录
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
可能遇到的问题
问题一：没有办法在async await 所在行打断点
这个问题其实是 sourcemap 的问题。因为vue 一般开发都是用es6或者tpyescript 写的代码。然后使用babeljs 翻译成一般浏览器都能运行的es5。这样的结果是浏览器上运行的代码和我们开发写的代码是不一样的。这个时候就需要一个叫 sourcemap 的东西来标记浏览器上哪行代码对应工程中的哪行代码。
所以不能打断点应该就是vscode 和 chrome 找不到对应代码的位置。
上面的126行 var res = await ...... 就不能设置断点。vscode 会提示你 unverified breakpoint 。
解决办法要从 babel 的配置文件下手。在项目的根目录创建一个 babel.config.js 文件。然后配置如下：
重新编译运行一次。也就是重新运行 npm run serve 。再试试在刚才的地方打断点。成功了。重点其实是配置文件的第五行。
问题二：没有办法在自己写的js 或者模块里面打断点
要解决这个问题我们先来做个实验。我们在根目录的 ./src/rpc 文件夹下有一个自己写的js文件 rpc_user.js
在第一个问题的 126行打个断点，然后 stepin 无数次之后最终会到达 我们 rpc_user.js 那个loginWithName 函数。但是，这个时候vscode 打开的文件名后面一般会跟 “readonly - inlined context source map” 之类的提示。我们先叫他 readonly_rpc_user.js 。 有趣的是如果在这个文件里面打断点是能成功的。但回到原本的 rpc_user.js 却不能打断点。什么问题呢？我们来看看 chrome 浏览器上的状态。
发现问题了没有。Login.vue 文件在 webpack:///src/views/ 里面。而 rpc_user.js 却在 webpack:///./src/rpc/ 里面。就那么一点点差异。另外，如果直接在chrome 的rpc_user.js 里面打断点是没有问题的。也就是说vscode 并不能在本地项目找到 webpack 上对应的文件。知道了问题就好解决了。就是要告诉vscode 什么文件在什么文件夹。
下面我们重新配置一下项目根目录下 .vscode/launch.json 文件：
vscode 默认生成的 launch.json 是没有第 13行的。通过修改配置让vscode 知道 webpack 调试的文件对应项目的本地文件。问题解决。
问题三：如果 vue 文件中不能加断点，是由于 vscode 配置问题导致
如下修改：首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug：Allow Breakpoints Everywhere
1、使用插件调试：Microsoft Edge Tools for VS Code
（1）、在是VSCode中下载"Microsoft Edge Tools for VS Code"插件：
（2）、使用"Microsoft Edge Tools for VS Code"插件做调试：
a、点击侧边栏上的"Microsoft Edge Tools for VS Code"插件图标，会提示你在"launch.json"中生成相关的调试配置信息，生成这个文件之后，可以添加其他的调试配置信息，但是请不要删除任何东西，否则插件启动调试的时候就会提示你重新生成与它相关的配置信息。
{
"configurations": [
{
"type": "pwa-msedge",
"name": "Launch Microsoft Edge",
"request": "launch",
"runtimeArgs": [
"--remote-debugging-port=9222"
],
"url": "/home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html", // Provide your project's url to finish configuring
"presentation": {
"hidden": true
}
},
{
"type": "pwa-msedge",
"name": "Launch Microsoft Edge in headless mode",
"request": "launch",
"runtimeArgs": [
"--headless",
"--remote-debugging-port=9222"
],
"url": "/home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html", // Provide your project's url to finish configuring
"presentation": {
"hidden": true
}
},
{
"type": "vscode-edge-devtools.debug",
"name": "Open Edge DevTools",
"request": "attach",
"url": "/home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html", // Provide your project's url to finish configuring
"presentation": {
"hidden": true
}
}
],
"compounds": [
{
"name": "Launch Edge Headless and attach DevTools",
"configurations": [
"Launch Microsoft Edge in headless mode",
"Open Edge DevTools"
]
},
{
"name": "Launch Edge and attach DevTools",
"configurations": [
"Launch Microsoft Edge",
"Open Edge DevTools"
]
}
]
}
b、配置vue项目的vue.config.js配置的文件，3.x版本以上的VUE-CLI就用以下配置：
module.exports = {
configureWebpack: {
devtool: "source-map",
},
};
c、启动项目之后，对"launch.json"做如下修改，即可启用插件像IDEA一样调试项目。一定要在原来的基础上增加，主要是增加"url": "http://localhost:8080",``"webRoot": "${workspaceFolder}"这两个配置：
"url": "http://localhost:8080"：这个就是启动项目后，自己的项目访问路劲。
"webRoot": "${workspaceFolder}"：这个是项目源码位置，注意，新版的VsCode中${workspaceFolder}已经包含了src目录，这里直接写${workspaceFolder}就可以，如果启动调试的时候提示无法 连接连接到目标，那么试着改成${workspaceFolder}/src。
{
"configurations": [
{
"type": "pwa-msedge",
"name": "Launch Microsoft Edge",
"request": "launch",
"runtimeArgs": [
"--remote-debugging-port=9222"
],
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"presentation": {
"hidden": true
},
"smartStep": true, //自动跳过未映射的代码
"skipFiles": [
"<node_internals>/**/*.js", //跳过node核心模块代码
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/src/node_modules/**/*.js",
"${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
] //跳过文件
},
{
"type": "pwa-msedge",
"name": "Launch Microsoft Edge in headless mode",
"request": "launch",
"runtimeArgs": [
"--headless",
"--remote-debugging-port=9222"
],
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"presentation": {
"hidden": true
},
"smartStep": true, //自动跳过未映射的代码
"skipFiles": [
"<node_internals>/**/*.js", //跳过node核心模块代码
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/src/node_modules/**/*.js",
"${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
] //跳过文件
},
{
"type": "vscode-edge-devtools.debug",
"name": "Open Edge DevTools",
"request": "attach",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"presentation": {
"hidden": true
},
"smartStep": true, //自动跳过未映射的代码
"skipFiles": [
"<node_internals>/**/*.js", //跳过node核心模块代码
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/src/node_modules/**/*.js",
"${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
] //跳过文件
}
],
"compounds": [
{
"name": "Launch Edge Headless and attach DevTools",
"configurations": [
"Launch Microsoft Edge in headless mode",
"Open Edge DevTools"
]
},
{
"name": "Launch Edge and attach DevTools",
"configurations": [
"Launch Microsoft Edge",
"Open Edge DevTools"
]
}
]
}
d、点击"Microsoft Edge Tools for VS Code"插件Launch Project按钮，开始代码调试
2、使用VSCode自带调试功能做调试
配置vue项目的vue.config.js配置的文件，3.x版本以上的VUE-CLI就用以下配置：
module.exports = {
configureWebpack: {
devtool: "source-map",
devtool: 'cheap-module-source-map',
},
};
// const webpack = require("webpack");
//const {defineConfig} = require('@vue/cli-service')
// module.exports = defineConfig({
// // mode: 'development',
// configureWebpack: config => {
// config.devtool = 'source-map';
// if (process.env.NODE_ENV === 'production') {
// // 为生产环境修改配置...
// } else {
// // 为开发环境修改配置...
// config.devtool = 'eval-source-map'
// }
// console.log(config.devtool, "rrrr")
// }
// }
// )
module.exports = {
productionSourceMap: false,
lintOnSave: false,//关闭语法检查
devServer: {
port: 9990,
overlay: {
warning: false,
errors: false
}
},
css: {
//查看CSS属于哪个css文件
sourceMap: true
},
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
},
]
},
devtool: 'cheap-module-source-map',
},
//https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html
chainWebpack: (config) => {
// 移除 prefetch 插件
config.plugins.delete('prefetch');
//自下定义title
config.plugin('html').tap((args) => {
args[0].title = 'vol开发框架';
return args;
});
// 或者
// 修改它的选项：
// config.plugin('prefetch').tap(options => {
// options[0].fileBlacklist = options[0].fileBlacklist || []
// options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
// return options
// })
}
// configureWebpack: {
// plugins: [
// new webpack.optimize.MinChunkSizePlugin({
// minChunkSize: 100000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上
// })
// ]
// }
};
（2）、启动项目后，点击侧边栏中的调试按钮，会提示你生成"launch.json"文件，对"launch.json"做如下修改，即可启用插件像IDEA一样调试项目。
注意经过个人验证：使用VSCode自带的调试功能的时候，"webRoot"需要配置成 "${workspaceFolder}/src"这样才行，否则就是报错不能连接到目标的错误而无法启动调试。
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src"
}
]
}
3）、接下来开始调试项目，其他和插件使用一样，唯一的区别在于：插件将浏览器集成在VSCode中，而VSCode自带的调试功能如果不下载Chrome插件，那么就只能调起外部浏览器调试。
1. 快捷键
ctrl + f5——浏览器强制刷新
f5或浏览器最上面的小圆圈按钮——浏览器刷新
英文+tab —— 快捷生成一对标签 （eg: p + tab键 => <p></p>）
! + enter、! + tab、htm:5—— 快捷生成html结构
ctrl + /—— 注释快捷键
alt按住 鼠标点击每段文字前+ ctrl &shift &→ —— 选中 批量 复制粘贴，具体步骤见下图
div.类名 相当于 <div class="类名"></div>
div#id名 相当于 <div id="id名"></div>
p.类名#id名 相当于<p class="类名" id="id名"></p>
.father>.son 相当于<div class="father"> <div class="son"></div> </div>
div{我是内容} 相当于<div>我是内容</div>
ul>li*3 相当于<ul> <li></li> <li></li> <li></li> </ul>
div*3{$} 相当于<div>1</div><div>2</div><div>3</div>
代码第一行单击一下，按住shift单击代码最后一行可以直接复制整段代码
css快捷键：
w100 + tab 相当于 width: 100px;
ti2em + tab 相当于 text-indent: 2em;
扫一扫
6558
到【灌水乐园】发言
gunsand: vscode 是什么版本呢？ "webpack:///src/*": "${webRoot}/*", "webpack:///./src/*": "${webRoot}/*" 这两行好像不能同时起作用，配置了.src可以调试main.js,配置src可以调试*.vue .... why?
gqk01: 好，有空更下
huachuang2665: 您好有部分图片一直显示上传失败，看着有点吃力
Heavenflier785: 大神，求后面内容~~
编号004: 朋友可以分享吗？