提问者:小点点

ChromeDevTools:WebpackSourceMap中JS文件的本地覆盖


我对coursera上视频播放器的可用性不太满意。org(不是我自己的网站),并希望使用本地覆盖更改某些内容,以方便我自己。

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

问题是什么,如何解决?


共1个答案

匿名用户

我意识到这可能是本地覆盖功能的一个错误:我可以看到对全局JS文件的本地更改,但不能看到Webpack源代码映射(webpack://下的文件)恢复的文件。

这里有一个解决方案:

  1. 首先找到要更改的文件(使用事件监听器断点);
  2. 将断点添加到要更改的位置。我在第24行添加了一个断点,但是创建了更多的断点,我认为这是DevTools中的一个错误。然后检查右边面板中的复选框,您应该会看到原始webpack生成的文件(选项卡中有红叉);在这里输入图像描述
  3. 右键单击选项卡,选择在网络面板中显示;
  4. 右键单击网络调用并选择保存以便覆盖;在这里输入图像描述
  5. 最后,打开保存的文件并进行更改。刷新页面,您应该会看到被重写的更改。

希望这是有帮助的,如果你在一个类似的情况!