Chrome DevTools：来自 Webpack Source Map 的 JS 文件的本地覆盖

Question

我对 coursera.org（不是我自己的网站）上视频播放器的可用性并不完全满意，并希望使用本地覆盖来更改某些内容以方便我自己。

我成功找到了要更改的 JS 文件并启用了本地覆盖。但是在我保存更改后，网站仍然使用从服务器获取的文件，而不是包含我的更改的本地副本。

这是什么问题以及如何解决这个问题？

Answer 1

我意识到这可能是本地覆盖功能的一个错误：我可以看到对全局 JS 文件所做的本地更改，但看不到 Webpack 源映射恢复的文件（webpack:// 下的文件）。

这是一个解决方法：

1. 首先找到要更改的文件（使用事件侦听器断点）；
2. 在要更改的位置添加断点。我在第 24 行添加了一个断点，但创建了更多断点，我认为这是 DevTools 中的一个错误。然后选中右侧面板中的复选框，您应该会看到原始的 webpack 生成的文件（选项卡中带有红叉）；
3. 右键单击该选项卡，选择“在网络面板中显示”；
4. 右键单击网络调用并选择“保存以覆盖”；
5. 最后，打开保存的文件并进行更改。刷新页面，您应该会看到覆盖的更改。

如果您遇到类似情况，希望这对您有所帮助！