Electron-vue开发实战（四）| VSCODE调试主进程

package.json查看配置⁍

事实上，因为安装的时候什么都选了，所以在package.json里有dev的配置

可以先点击调试按钮，选择Run Script:dev

但是一开始我没调出来（可能是要先添加source-map？），先用^[1]的方法配置lauch.json折腾了一番

后来发现根本不需要配？【知识增加.jpg】

source-map⁍

参考的文章中还写了要在webpack.main.config.js里添加

1	`devtool : 'source-map'`

我照做了，不然好像打不了断点

什么是source-map⁍

source-map也是一种针对JavaScript的debug工具^[2]

为什么用source-map⁍

JavaScript 脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。

常见的源码转换，主要是以下三种情况：

压缩，减小体积
多个文件合并，减少 HTTP 请求数
其他语言编译成 JavaScript

这三种情况，都使得实际运行的代码不同于开发代码，除错（ debug ）变得困难重重，所以才需要 Source Map 。结合上面的例子，即使打包过后的代码，也可以找到具体的报错位置，这使得我们 debug 代码变得轻松简单，这就是 Source Map 想要解决的问题。

如何生成 Source Map⁍

各种主流前端任务管理工具，打包工具都支持生成 Source Map 。^[2:1] 中提到了各种各样的包，包括了安装环境时常见的gulp。

Webpack 是前端打包工具（本文案例都会使用该打包工具）。在其配置文件 webpack.config.js 中设置**devtool[13]**即可生成 Source Map 文件：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: "source-map"
};

devtool有 20 多种不同取值，分别生成不同类型的Source Map，可以根据需要进行配置。下文会详细介绍，这里不再赘述。

（这就是为什么要在webpack.main.config.js添加它的原因）

source-map大致原理⁍

打开了souce-map后调试，会在dist/electron底下生成.map文件

执行打包后，生成 dist/electron 文件夹，打开 dist/main.js

正是因为这句注释，标记了该文件的 Source Map 地址，浏览器才可以正确的找到源代码的位置。sourceMappingURL 指向 Source Map 文件的 URL 。

main.js.map里 mappings 属性的值是：AAAA; AACA, c ，它的组成结构分成三层：

第一层是行对应，以分号（;）分隔，分号间的内容对应一行线上代码。例如我们上面的例子里，没有分号（可以认为是省略了末尾的分号），则是因为线上代码被压缩成了一行。

第二层是位置对应，以逗号（,）分隔，逗号间的内容对应该行线上代码的某个位置。

第三层是位置映射，以VLQ编码表示，代表该位置对应的源代码位置。

通过进一步的解析，AAAA 和 AAcA 以及 c 都是代表了位置，正常来说，每个位置最多由 5 个字母组成，5 个字母的含义分别是：