React应用和Chrome DevTools本地覆盖不起作用？

Question

6

我正在尝试使用Chrome开发者工具本地覆盖（https://developers.google.com/web/updates/2018/01/devtools#overrides）来调试一个CSR React应用程序中的一段js代码。我在源代码选项卡中更改文件并将它们保存为本地覆盖。

每个启用的本地覆盖更改都会在刷新后在Chrome开发者工具覆盖选项卡中显示。但是，这些本地更改不适用于我所看到的React应用程序。经过每次重新加载后，我看到的React应用程序与没有任何更改/覆盖的应用程序相同。

我已尝试通过Chrome开发人员工具在其他非React网站上进行本地覆盖，并成功了。

我是否遗漏了什么，或者CSR React应用程序不支持本地Chrome开发人员工具覆盖？

编辑：请注意，我正在尝试将Chrome开发人员工具覆盖应用于已部署的生产CSR React应用程序。

- anvin

我认为这是一个应该由谷歌修复的错误。如果更改不被考虑，那么让用户修改和保存文件就没有意义。 - serge

2个回答

8

如果网站使用Service Workers，您可能会遇到这个问题。

为了解决它，请转到应用程序选项卡并勾选绕过网络。

- Roman Roman

1

我真的没想到这会起作用，因为它听起来很随机，但是没错，就像魔术一样！Chrome 的用户体验太差了。 - Radon Rosborough

开发者工具 -> 应用程序 -> 服务工作者 -> 网络绕过（勾选） - Andrei

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- anvin · Accepted Answer

我自己想出了解决方法。

如果有其他人也遇到这个问题：

在React应用中，您需要查看Chrome开发工具的网络选项卡，并在源选项卡中打开块脚本。然后，您可以将其添加到覆盖项并修改文件。