logo标签列表

Chrome DevTools：Webpack源映射文件的本地覆盖（Local Overrides）

webpackoverridinggoogle-chrome-devtoolssource-maps
11

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

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

问题出在哪里，如何解决？

1个回答
8
我意识到这可能是本地重写功能的一个错误：我可以看到对全局JS文件所做的本地更改，但对于Webpack源映射恢复的文件（webpack://下的文件）却不行。
以下是解决方法：
  1. 首先定位要更改的文件（使用事件监听器断点）；
  2. 在您想要更改的位置添加断点。我在第24行添加了一个断点，但会创建更多断点，这可能是DevTools中的一个错误。然后在右侧面板中勾选复选框，您应该会看到原始的webpack生成的文件（带有红色叉号的标签）; enter image description here
  3. 右键单击该标签，选择“在网络面板中显示”; enter image description here
  4. 右键单击网络调用并选择“保存以进行覆盖”; enter image description here
  5. 最后，打开保存的文件并进行更改。刷新页面，您应该会看到被覆盖的更改。
希望这对于你们处于类似情况的人有所帮助！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接