如何用VSCode调试Vue.js

时间:2023-02-15 13:51:03
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. lodash常用方法1--查询

    1.find var _ = require('lodash'); var user1 = { name: 'zhangsan', height: 180, weight: 120 }; var us ...

  2. VISUAL STUDIO 调试

    调试术语 Visual Studio调试之断点基础篇 Visual Studio调试之断点进阶篇 不能设置断点的检查步骤 Visual Studio调试之断点技巧篇 Visual Studio调试之断 ...

  3. MyEclipse使用经验总结

    0.快捷键 ================================================================================ 编辑: Ctrl+Shif ...

  4. Struts2.5简单使用入门

    今天学了Struts2.5最新版的,老师在黑板上讲的很是简单,也很是容易,简单的就实现了.可是课下让我们自己弄,自己无论如何都无法运行成功,一直提示404.偶然间灵机一动,改了一下那个文件就好了.希望 ...

  5. 字符串和转为Data类型前后几天

    以防忘记:SimpleDateFormat 可以设置字符串的格式 package com.apploft.util.lang;import java.text.SimpleDateFormat;imp ...

  6. qt中的事件机制

    事件 1.QEvent -->类型 -> QKeyEvent QEvent::KeyRelease QEvent::MouseMove -> QMouseEvent 2.事件处理过程 ...

  7. FFMPEG 实现 YUV,RGB各种图像原始数据之间的转换(swscale)

    FFMPEG中的swscale提供了视频原始数据(YUV420,YUV422,YUV444,RGB24...)之间的转换,分辨率变换等操作,使用起来十分方便,在这里记录一下它的用法. swscale主 ...

  8. rman 示例

    背景 rman,听这名字,好像有点真的男人意思.这玩意其实也简单,只是老忘,作为一个oracle dba爱好者,怎么少了rman呢,这个好像是oracle体系的最后一环,把它掌握了,就完成oracle ...

  9. SVN冲突以及解决办法

    1.冲突原因: 假设 A.B 两个用户都在版本号为 100 的时候,更新了 kingtuns.txt 这个文件,A 用户在修改完成之后提交 kingtuns.txt 到服务器, 这个时候提交成功,这个 ...

  10. BiCMOS技术

    BiCMOS技术 编辑 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . 把双极型晶体管(BJT)和CMOS器件同时集成在同一块芯片上的新型的工艺技术,它集中了上述单.双极型器件的优点,两 ...