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

Posted 2023-02-22

【中文标题】Chrome DevTools：来自 Webpack Source Map 的 JS 文件的本地覆盖

【英文标题】：Chrome DevTools: local overrides for JS files from Webpack Source Map

【发布时间】：2020-10-06 16:58:46

【问题描述】：

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

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

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

【参考方案1】：

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

这里有一个解决方法：

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

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