关键词：
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为：
devtool: ‘source-map‘,
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：
module.exports = configureWebpack: devtool: ‘source-map‘
进入Debugger视图，添加Chrome配置，将内容替换成以下内容
"version": "0.2.0", "configurations": [ "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "$workspaceFolder/src", "breakOnLoad": true, "sourceMapPathOverrides": "webpack:///src/*": "$webRoot/*" ]
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
npm start
进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 http://localhost:8080，你的断点现在应该被命中了。
更多内容请参考官方文档:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
vue提供的三种调试方式(代码片段)
Vue提供的三种调试方式一、在VSCode中配置调试二、debugger语句三、VueDevtools一、在VSCode中配置调试使用VueCLI2搭建项目时：更新config/index.js内的devtoolproperty：devtool:'source-map',点击在ActivityBar里的Debugger图标来到Debug视图&... 查看详情
使用vscode调试vue项目
参考技术Alaunch.json:vue.config.js:按F5启动chrome开始调试 查看详情
vscode调试vue项目
参考技术A先决条件你必须安装好Chrome和VSCode。同时请确保自己在VSCode中安装了DebuggerforChrome扩展的最新版本。在可以从VSCode调试你的Vue组件之前，你需要更新webpack配置以构建sourcemap。做了这件事之后，我们的调试器就有机会将... 查看详情
json在vscode中配置文件调试器vue.js应用程序(代码片段)
在vscode中调试vue项目
参考技术A1.VSCode中安装DebuggerforChrome扩展的最新版本：2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下... 查看详情
用vscode调试scala(代码片段)
用vscode调试scalahelloakka示例代码下载环境准备(win10)JavaSE-11sbt-1.5.5vscode安装如下扩展（已安装JavaExtensionPack）:ScalaSyntax(official)Scala(sbt)ScalaExtensionPackVSCodeextentionstoboostScaladevelopers注：只有安装了ScalaExtensionPack,才能在VSCode... 查看详情
用vscode调试scala(代码片段)
用vscode调试scalahelloakka示例代码下载环境准备(win10)JavaSE-11sbt-1.5.5vscode安装如下扩展（已安装JavaExtensionPack）:ScalaSyntax(official)Scala(sbt)ScalaExtensionPackVSCodeextentionstoboostScaladevelopers注：只有安装了ScalaExtensionPack,才能在VSCode... 查看详情
使用vscode配置简单的vue项目(代码片段)
...文档做了一些简单的练习。今天技术主管说让大家熟悉下VSCode开发vue，所以自己摸索了好久，才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记，所以写下来也供有需要的人一起学... 查看详情
vscode开发vue项目，关闭eslint代码检查，以及相关配置(代码片段)
刚开始打开vue项目的时候会发现vue代码报红，解决方式如下 首先安装Vetur和ESLint 打开文件》首选项》设置，配置如下代码"explorer.confirmDelete":false,"vetur.validation.template":false,"eslint.autoFixOnSave":true,"files.autoSave":" 查看详情
vscode工具开发vue项目必装插件(代码片段)
VsCode工具开发vue项目必装插件目录VsCode工具开发vue项目必装插件1.概述2.VsCode插件清单2.1.Vetur插件让vue文件代码高亮2.2.VueVSCodeSnippets自动生成vue模板内容插件1.安装插件2.使用插件生成vue模板代码2.3.LiveServer实时刷新网页1.安装LiveSe... 查看详情
vscode断点调试(代码片段)
一、Extensions面板中搜索并安装DebuggerforChrome插件二、Debug面板中，下拉框选择AddConfiguration，出现launch.json，里面配置chrome信息"type":"chrome","request":"launch","name":"LaunchChromeagainstlocalhost","url":"http://localhost:8080","webRoot":"$workspaceFolder",三... 查看详情
基于vue来开发一个仿饿了么的外卖商城(代码片段)
...（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.项目结构：4.项目结构分析： 5.图 查看详情
项目经验vscode添加vue前端注释模板(代码片段)
...码补注释，为了能够更加高效的写注释，所以在Vscode里配置了模板。个人感觉使用感觉不错，所以将过程记录下来分享给大家。（并非权威，如有错漏，欢迎指正！不胜感激！）【内容】注... 查看详情
基于vscode开发vue项目的详细步骤教程(代码片段)
...测有效)2安装与创建默认项目_水w的博客-CSDN博客目录五、vscode集成npm开发vue项目1、vscode安装所需要的插件：2、搭建一个vue小页面(入门vue)3、大致理解Vue设计思想4、简单上手【1】组件如果新建，以及如何使用组件？... 查看详情
vue项目中遇到的问题总结(代码片段)
1 vue:无法加载文件C:\\ProgramFiles\\nodejs\\vue.ps1因为被系统禁止了。需要以管理员的身份运行vscode，再在vscode终端写上set-executionpolicyremotesigned 查看详情
基于vscode开发vue3项目的详细步骤教程3前端路由vue-router(代码片段)
...测有效)2安装与创建默认项目_水w的博客-CSDN博客3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客4、基于vscode开发vue项目的详细步骤教程2第三方图标库FontAwesome_水w的博客-CSDN博客5、基于vscode创建SpringBoot项目，连接p... 查看详情
团队协作统一vue代码风格，vscode做vue项目时的一些配置(代码片段)
1.安装Vetur扩展主要是用于让vscode能识别vue文件，对vue代码进行高丽处理，并且它内置了一些代码格式化的设置2.安装ESLint如果你的项目已经开启了eslint规范,再有多余的空格,或者空行，会有红色波浪线提示。但是光有提示还不够... 查看详情
项目经验vscode添加vue前端注释模板(代码片段)
...码补注释，为了能够更加高效的写注释，所以在Vscode里配置了模板。个人感觉使用感觉不错，所以将过程记录下来分享给大家。（并非权威，如有错漏，欢迎指正！不胜感激！）【内容】注... 查看详情