常用开发调试技巧
线上即时修改
- 调出控制台，依次点击
Source、Overrides、Select folder for overrides这三个按钮，并选择一个本地的空文件夹目录。 - 允许浏览器访问该目录。
- 在pages中修改代码，修改完成后可以使用
Ctrl + s进行保存。此处，我将橙色的Hello World改为了天蓝色。 - 点击蓝色框中的三个点，找到
Changes选项，就可以看到所有的更改了。 - 更改后的文件所在位置，即第一步中选择的空文件夹目录。
source map
我们可以使用webpack生成source map文件，webpack.config.js内容如下：
const path = require('path')
const HTMLWebapckPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, './dist')
},
// 产生source-map文件
devtool: 'source-map',
// 代码自动压缩和丑化
mode: 'production',
// 把生成地js代码插入到html文件中，方便浏览器调试
plugins: [new HTMLWebapckPlugin({
template: './src/index.html'
})]
}
index.js文件地内容如下：
const add = (x, y) => x + y;
console.log(add)
运行生成地html文件（在dist文件夹中），可以在控制台中看到以下压缩后的输出：
在控制台的source部分中，原始的文件也显示的是压缩后的js代码。
由于我们使用了webpack的
devtool: 'source-map'配置生成了source map文件，因此会有一个在线的source map映射，我们就可以看到压缩前的源代码了。
但是我们不可能在已经部署的项目中提供source map文件，因此，我们会在webpack中使用
devtool: 'hidden-source-map'配置，生成单独的 source-map, 不在打包好的 js 尾部内添加 source-map 指向的 url。然后把这文件单独保存，需要使用的时候，通过手动指定source map文件进行调试。
那么，如何在线上的项目中使用本地的source map文件呢？使用devtool: 'hidden-source-map'配置后，我们是看不到原始代码的。
我们可以在
index.js文件内容的空白区域，右键选择Add source map
点击后，会弹出一个框，让你输入URL。注意，这个默认是相对服务器中当前文件的路径，想要使用我们本地的文件，需要以
file:///开头，我放在了桌面上，使用的路径是file:///C:/Users/mengsong/Desktop/index.js.map。
然后，我们就可以看到源代码了。
小黄鸭调试大法
在传说中，程序大师会随身携带一只小黄鸭，在调试代码的时候会在桌子上放这只小黄鸭，并详细地对鸭子解释每行代码，最后很快就能将问题定位修复了。
