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 就是我们要映射的地址,查看其规律可知,第三条我们应当如何映射