1、先决条件设置

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool和cacheBusting 属性。将其更新为:

  1. devtool: 'source-map',
    cacheBusting:false

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性:

  1. module.exports = {
  2. configureWebpack: {
  3. devtool: 'source-map'
  4. }
  5. }

进入Debugger视图,添加Chrome配置,将内容替换成以下内容

  1. {
  2. "version": "0.2.0",
  3. "configurations": [
  4. {
  5. "type": "chrome",
  6. "request": "launch",
  7. "name": "vuejs: chrome",
  8. "url": "http://localhost:8080",
  9. "webRoot": "${workspaceFolder}/src",
  10. "breakOnLoad": true,
  11. "sourceMapPathOverrides": {
  12. "webpack:///./src/*": "${webRoot}/*"
  13. }
  14. },
  15. {
  16. "type": "firefox",
  17. "request": "launch",
  18. "name": "vuejs: firefox",
  19. "url": "http://localhost:8080",
  20. "webRoot": "${workspaceFolder}/src",
  21. "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
  22. }
  23. ]
  24. }

二、添加断点

此处response返回数据

 三、启动调试

在Ctrl+~启动终端使用如下命令开启这个应用

  1. npm start npm run dec

进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 http://localhost:8080,你的断点现在应该被命中了。

官方地址:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

转:https://www.cnblogs.com/xuchangqi1/p/9777088.html

四、VSCode调试vue项目的更多相关文章

  1. VsCode调试vue项目

    VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+ ...

  2. VueJs(15)--- Webstorm+Chrome 调试Vue项目

    Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要 ...

  3. webstrom Debug 调试vue项目

    第一种,使用vue插件 下载插件:https://chrome.google.com/web... 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开 ...

  4. 总结vscode调试vue,nodejs的各种方法

    之前写项目一直都是console.log()来调试的,浪费了很多时间,现在整理一下用vscode对nuxt(vue)前后端进行调试的方法 前端的调试 chrome+launch 使用chrome调试, ...

  5. VSCode搭建Vue项目

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm ...

  6. 团队协作统一vue代码风格,vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  7. 适用于小白:VSCode搭建Vue项目,最详细的搭建步骤哦

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm ...

  8. 如何用VSCode调试Vue.js

    VS Code相关插件:Chinese (Simplified) Language Pack for Visual Studio Code Debugger for Chrome ESLint Vet ...

  9. VSCode 启动 Vue 项目 npm install 报错

    1.  报错后,查看了版本. 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2.  感觉 Augular CLI版本太低,使用以下方 ...

随机推荐

  1. C# 泛型(4) 持续更新

    泛型可以创建独立于被包含类型的类和方法. C++模板与泛型相似. 泛型优点性能 System.Collections 和 System.Collections.Generic 名称空间泛型和非泛型集合 ...

  2. TypeHandler简介及配置(mybatis源码篇)

    作者:南柯梦 Mybatis中的TypeHandler是什么? 无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器 ...

  3. 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数

    需求: 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数 过程: 一些应用软件可以通过点击URL链接启动并执行操作(例如迅雷),这是如何做到的呢? 主要是通过修改注册表,注册U ...

  4. Rendering in UE4(Gnomon School UE4 大师课笔记)

    Rendering in UE4 Presented at the Gnomon School of VFX in January 2018, part two of the class offers ...

  5. hierarchyviewer

    支持的版本更低

  6. KindEditor完全复制word内容

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  7. Hibernate 4 升级到 5 后显示未知实体错误

    提示的错误信息如下: org.hibernate.MappingException: Unknown entity: com.ossez.reoc.common.crm.DoNotCall at or ...

  8. 洛谷 P1355 神秘大三角(计算几何基础)

    P1355 神秘大三角 题目提供者yeszy 标签 福建省历届夏令营 难度 普及/提高- 题目描述 判断一个点与已知三角形的位置关系. 输入输出格式 输入格式: 前三行:每行一个坐标,表示该三角形的三 ...

  9. Codevs 1629 01迷宫

    1629 01迷宫 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 有一个由01组成的n*n格迷宫,若你位于一格0上,那么你可 ...

  10. deepin Linux 日常命令、插件、方法等汇总【更新中】

    查看系统编码: dawn@dawn-PC:~$ locale LANG=zh_CN.UTF- LANGUAGE=zh_CN LC_CTYPE="zh_CN.UTF-8" LC_NU ...