vscode中调试vue程序

vscode调试vue需要设置两个位置,第一个位置位于babel.config.js内,第二个则是由vscode生成的调试配置文件launch.json

1.babelconfig.js的设置

const plugins = [
  'babel-plugin-transform-es2015-arrow-functions',
]
module.exports = {
  env: {
    development: {
      sourceMaps: true,
      retainLines: true,
    },
  },
  presets: [
    [
      '@vue/app', {
        useBuiltIns: 'entry',
      },
    ],
  ],
  plugins: plugins,
}

添加对sourceMaps的支持,同时保留了行.

2.vue.config.js文件设置

module.exports = {
  publicPath: './', 
  outputDir: 'dist', 
  lintOnSave: true,
  productionSourceMap: true, // 这里设置为true 可以让醉成生成的生产环境增加sourcemap 可以远程调试
  filenameHashing: true,
  devServer: { 
    open: true,
    port: 9000,
  },
configureWebpack: { // webpack 配置
  devtool: 'source-map',
    },

productionSourceMap 为true可以在上传到xavier上时远程调试软件(vscode连接也能调试),通常默认为false,这里设为true用于下面远程调试:“Launch Chrome 电力远程”
devtool:‘source-map’ 是为了本地非生产环境调试使用

3.launch.json的配置

{

  "version": "0.2.0",
  "configurations": [
  {
      "type": "msedge",
      "request": "launch",
      "sourceMaps": true,
      "name": "Launch Chrome 远程",
      "url": "http://10.7.5.103:80",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///./src/*.js": "${webRoot}/src/*.js",
        "webpack:///node_modules/*": "${webRoot}/node_modules/*",
        "webpack:///./node_modules/*.js": "${webRoot}/node_modules/*.js",
      }
    },
    {
      "type": "msedge",
      "request": "launch",
      "sourceMaps": true,
      "name": "Launch Chrome ",
      "url": "http://localhost:8888",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///./src/*.js": "${webRoot}/src/*.js",
        "webpack:///node_modules/*": "${webRoot}/node_modules/*",
        "webpack:///./node_modules/*.js": "${webRoot}/node_modules/*.js",
      }
    },
  ]
}

主要也是添加了对sourcemaps的支持.并且使用sourceMapPathOverrides来把文件映射到我们的vscode工作区.

4.执行并设断点

首先使用 npm run dev 运行程序,然后点击ctrl+shift+d 或者软件右侧的小爬虫开始调试就可以了

5如何在sourceMapPathOverrides做映射

我们找映射一般通过vue 生成的.map文件查看 如下所示

{"version":3,"sources":["webpack:///./node_modules/xlsx/xlsx.mjs","webpack:///./node_modules/@kc/robot-ui/src/vendor/Export2Excel.js"],"names":["$cptable","XLSX","current_codepage","current_ansi","VALID_ANSI","CS2CP","0","1","2","77","128","129","130","134","136","161","162","163","177","178","186","204","222","238","255","69","set_ansi","cp","indexOf","reset_ansi","set_cp","reset_cp","char_codes","data","o","i","len","length","charCodeAt","utf16leread","String","fromCharCode","join","utf16beread","debom","c1","c2","slice","_getchar","x","_getansi","set_cptable","cptable","utils","decode","cpdoit","DENSE","DIF_XL","Base64_map","Base64_encode","input","c3","e1","e2","e3","e4","isNaN","charAt","Base64_encode_pass","Base64_decode","replace","has_buf","Buffer","process","versions","node","Buffer_from","nbfs","from","e","buf","enc","bind","buf_utf16le","toString","new_raw_buf","alloc","Uint8Array","Array","new_unsafe_buf","allocUnsafe","s2a","s","split","map","s2ab","ArrayBuffer","view","a2s","isArray","c","a2u","Error","ab2a","bconcat","bufs","concat","isBuffer","maxlen","set","apply","call","utf8decode","content","out","widx","L","ridx","d","push","chr0","chr1","_strrev","pad0","v","t","fill","pad_","rpad_","pad0r1","Math","round","pad0r2","p2_32","pow","pad0r","SSF_isgeneral","days","months","SSF_init_table","table_fmt","3","4","9","10","11","12","13","14","15","16","17","18","19","20","21","22","37","38","39","40","45","46","47","48","49","56","SSF_default_map","5","6","7","8","23","24","25","26","27","28","29","30","31","50","51","52","53","54","55","57","58","59","60","61","62","67","68","70","71","72","73","74","75","76","78","79","80","81","82","SSF_default_str","63","64","65","66","41","42","43","44","SSF_frac","D","mixed","sgn","B","P_2","P_1","P","Q_2","Q_1","Q","A","floor","q","SSF_parse_date_code","opts","b2","date","time","dow","dout","T","u","y","m","H","M","S","abs","date1904","Date","setDate","getDate","getFullYear",

webpack:///./node_modules/xlsx/xlsx.mjs 就是我们要映射的地址,查看其规律可知,第三条我们应当如何映射