vscode调试Vue

1、参考在 VS Code 中调试 — Vue.js

2、安装Debugger for Chrome

3、vue.config.js

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

4、launch.json

端口与vue.config.js中的port一致

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "vuejs: chrome","url": "http://localhost:9001","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}}]
}

5、运行

npm run dev

6、下断点，并启动调试

7、命中断点

vscode调试Vue相关推荐

利用vscode调试vue代码
利用vscode调试代码,实测非常好用注意:现在只支持vue2.x. 1.配置launch.json {// 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述.// 欲 ...
使用Vscode调试vue代码
如何在 VS Code 中调试浏览器中运行的通过 Vue CLI 生成的 Vue.js 应用程序官网解释先决条件安装了 VS Code 安装扩展 Debugger for Chrome Debug ...
使用VSCode调试vue
前置条件在VSCode中安装Debugger for Chrome插件实现步骤在vue.config.js中加入configureWebpack module.exports = {config ...
用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
vscode 开发vue必备插件_vsCode开发vue项目必备插件
VSCode 开发Vue必备插件对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
vsvue文件css提示插件,VSCode 开发Vue必备插件
VSCode 开发Vue必备插件对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
使用vscode运行vue项目
!!学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目.!! 文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0 ...
使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
使用 vscode 调试前端代码
使用 vscode 调试前端代码今天我们以webpack项目为基础讲解配置复制代码 1. 安装插件 Debugger for Chrome 2. 修改 config/index.js 将devto ...

vscode调试Vue

vscode调试Vue相关推荐

最新文章

热门文章