【问题标题】：Chrome DevTools: local overrides for JS files from Webpack Source MapChrome DevTools：来自 Webpack Source Map 的 JS 文件的本地覆盖
【发布时间】：2020-10-06 16:58:46
【问题描述】：
我对 coursera.org（不是我自己的网站）上的视频播放器的可用性并不完全满意，并且为了我自己的方便，我想使用本地覆盖来更改某些内容。
我成功找到了要更改的 JS 文件并启用了本地覆盖。但在我保存更改后，网站仍然使用从服务器获取的文件，而不是包含我的更改的本地副本。
问题是什么以及如何解决？
【问题讨论】：
标签：
webpack
overriding
google-chrome-devtools
source-maps
【解决方案1】：
我意识到这可能是本地覆盖功能的错误：我可以看到对全局 JS 文件所做的本地更改，但看不到由 Webpack 源映射恢复的文件（webpack:// 下的文件）。
这里有一个解决方法：
- 首先找到要更改的文件（using event listener breakpoints）；
- 在要更改的位置添加断点。我在第 24 行添加了一个断点，但创建了更多断点，我认为这是 DevTools 中的一个错误。然后选中右侧面板中的复选框，您应该会看到原始 webpack 生成的文件（选项卡中带有红色叉号）；
- 右键单击选项卡，选择“在网络面板中显示”；
- 右键单击网络调用并选择“保存为覆盖”；
- 最后，打开保存的文件并进行更改。刷新页面，您应该会看到被覆盖的更改。
如果您遇到类似情况，希望这对您有所帮助！