vs code 在调试项目代码时实现 代码行设置断点调试,经实践做以下设置后能命中断点,实现调试功能:
一、安装 Chrome Debug 插件
二、 安装 open in browser 插件
三、设置默认浏览器
修改默认浏览器:选择文件—首选项—设置,在搜索栏输入open-in-browser.default,出现以下在编辑框中编辑输入:Chrome
四、 设置 launch.json 配置文件代码
将 launch.json 中的全部代码替换成如下代码
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9528", //注意:URL中的端口号要跟WEBPACK配置的启动端口号一致
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://?app/*": "${webRoot}/*"
}
}
]
}
五、 配置 vue.config.js 文件夹
在 configureWebpack: 中添加如下一行代码
source-map :这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件,
并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿
六、 开启调试
1. ”终端“窗口中输入 npm run dev 命令,启动程序
2. 按”F5" 开启调试模式,Chrome 浏览器自动启动打开站点,运行到 “中断”代码行就会命中
如图所示