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. cookie记录横向滚动条位置

    一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...

  2. Hive 2.1.1 学习笔记

    1.修改conf下的配置文件cp -a hive-default.xml.template hive-site.xml2.进入bin目录启动hive./hive 报错Exception in thre ...

  3. OPPO F9 Pro在哪里打开usb调试模式的完美方法

    经常我们使用pc通过数据线连接到安卓手机的时候,如果手机没有开启USB调试模式,pc则没能够成功读到我们的手机,此情况我们需要找处理方法将手机的USB调试模式开启,今天我们介绍OPPO F9 Pro如 ...

  4. git ignore 总结

    git ignore 总结 忽略和 ! 不忽略的先后顺序 gitignore的规则是有从上到下的顺序的,所以当我们使用 ! 不忽略的时候,这个顺序会对结果产生影响 例如: # 忽略所有 folder ...

  5. Jfianl框架定时器使用配置

    Jfianl 自2.3版本后就整合了定时器到框架中,赞一个: 下面我来总结下自己使用cron4j到达定时效果的经验,不足之处还请见谅: Cron4jPlugin是作为JFinal的Plugin而存在的 ...

  6. mybatis中有趣的符号#与$

    ${ }是字符串替换,相当于直接显示数据,#{ }是预编译处理,相当于对数据加上双引号 即#是将传入的值当做字符串的形式,先替换为?号,然后调用PreparedStatement的set方法来赋值,而 ...

  7. Jmeter中主要管理器功用

    不管是在使用jmeter进行性能测试还是接口自动化测试时经常用到各种管理器进行对参数的处理,但是有时候分不清几种管理器的具体用法,所以做个笔记,列一下吧(所列内容基于版本为3.2) 主要内容包含以下: ...

  8. [OC] UIcollectionView 与 UIcollectionViewCell 的使用

    UICollectionView    @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSou ...

  9. QEMU, a Fast and Portable Dynamic Translator-Fabrice Bellard-翻译

    Abstract We present the internals of QEMU, a fast machine emulator using an original portable dynami ...

  10. 解决win10搜索框不能使用的问题

    1.首先,打开管理员命令窗口,win+x,可以看到弹出一个窗口,打开windows Powershell(管理员) 2,输入 Get-AppXPackage -Name Microsoft.Windo ...