vscode断点调试vue怎么用(vscode断点调试详解)

 分类:前端开发时间:2022-09-05 07:30:02点击:
vscode断点调试vue怎么用(vscode断点调试详解)网址:

vscode断点调试vue怎么用?一直没搞懂,Vue打包之后,代码被压缩,打包调试好难调试,不知道如何来调试,终于借这个周末来尝试下如何解决这个问题。

  • VSCode安装Debugger for chrome插件

插件市场中有两个,一个是废弃的,需要主要一下

  • 生成lauch.json文件

在左侧的面板中,点击运行和调试时,vscode会提示你生成一个lauch.json文件,按照提示生成即可

  • 修改lauch.json文件

不知道为什么,按照很多教程中的提示,我的vscode并不能产生断点,进入调试状态,直到我添加了下面这两行代码

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8009",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
 }
  }
 ]
}

黄色背景,红色字体,加粗的两行是添加的

  • 修改vue.config.js文件

如果仅仅是上面的这些配置,代码依然是无法调试的,此时,还需要修改vue.config.js文件,在后面添加:

configureWebpack: {
  devtool: 'source-map',
},

此时,再次调试

会发现一切都很美好,代码是未打包的

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: