VS Code相关插件:
Chinese (Simplified) Language Pack for Visual Studio Code
Debugger for Chrome
ESLint
Vetur
 
一 安装:安装VS Code插件  Debugger for Chrome
二 配置:config下index.js
cacheBusting  由  true 改为 false
//cacheBusting: true,
   cacheBusting:false,
devtool 由 cheap-module-eval-source-map 改为 source-map
 //devtool: 'cheap-module-eval-source-map',
    devtool: 'source-map',
三 配置:launch.json 文件配置
{
    "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}/*"
        }
      }
    ]
  }
四 启动调试

如何用VSCode调试Vue.js的更多相关文章

  1. vscode 调试vue.js程序

    npm install -g vue-cli                //安装vue-clivue init webpack projectName  //创建项目 1.Ctrl+~ 打开命令行 ...

  2. VsCode调试vue项目

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

  3. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  4. centos 下使用vscode 调试egg.js 注意事项

    这两天在centos下,直接用vscode运行egg.js的例子.遇到个问题就是当安装了vscode-egg插件,会遇到一个现象.就是同样的代码,Windows下调试可以顺利进行,但是centos有时 ...

  5. vscode 调试node.js

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...

  6. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

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

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

  8. 四、VSCode调试vue项目

    1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...

  9. vscode实现vue.js项目的过程

    https://blog.csdn.net/weixin_37567150/article/details/81291433 https://blog.csdn.net/ywl570717586/ar ...

随机推荐

  1. maven与eclipse连接的配置

    1.修改本地仓库位置 maven从中心仓库下载的文件一般默认放在本地用户文件加下的.m2/repository文件夹中,修改则需要找到所下载的maven文件夹下的conf文件夹下的setting.xm ...

  2. Hanlp学习笔记

    一.首先要引入mawen依赖包: <dependency> <groupId>com.hankcs</groupId> <artifactId>hanl ...

  3. vs2017 EFCore 迁移数据库命令

    项目结构: 首先引用 Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.Design 增加类DesignTimeDbC ...

  4. C++多态及其实现原理

    1.    多态的定义:多态含义为一个事物有多种形态.在C ++程序设计中,多态性是指具有不同功能的函数可以用同一个函数名,这样就可以用一个函数名调用不同内容的函数,主要分为静态多态和动态多态: 静态 ...

  5. PLS:利用PLS(两个主成分的贡献率就可达100%)提高测试集辛烷值含量预测准确度并《测试集辛烷值含量预测结果对比》—Jason niu

    load spectra; temp = randperm(size(NIR, 1)); P_train = NIR(temp(1:50),:); T_train = octane(temp(1:50 ...

  6. 基本排序算法(Java)

    基本排序算法 (Java) 经过几次笔试,发现自己的Java基础有些薄弱,基本的排序算法掌握的还不够熟练,需要多加学习总结. 1. 选择排序 思想: 给定一个整数数组,例 int[] a ={38,6 ...

  7. webstorm2018.2.3激活

    一,简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编 ...

  8. CentOS7 VMware-Tools安装与共享文件夹设置

    一. VMware-Tools安装 1.加载VMware Tools的光驱:点击"虚拟机"->"安装VMware Tools".这里,由于我已经安装了,所 ...

  9. Linux指令集

    最近在学习Linux虚拟机,下面是我在学习虚拟机的过程中使用过的一些指令,及其作用. pwd-> 列出当前目录路径 ls-> 列出当前目录列表 cd-> 改变目录 mkdir-> ...

  10. php一些高级函数方法

    PHP高级函数 1.call_user_func (http://php.net/manual/zh/function.call-user-func.php) 2.get_class (http:// ...