chrome devtools调试反应，点击“刷新”，导致调试卡死

如何解决chrome devtools调试反应，点击“刷新”，导致调试卡死

我不使用任何远程调试（webstorm和devtools）

只使用chrome devtools

当调试在devtools中的断点处停止时

按“ ctrl + r”刷新也卡住了（选项卡为空白，调试会话无法重新启动）

<!DOCTYPE html>
<html>
<head>
  <Meta charset="UTF-8"/>
</head>
<body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
  var e = React.createElement

  class App extends React.Component {
    render() {
      return e("div")
    }
  }

  const domContainer = document.querySelector('#root');
  ReactDOM.render(e(App),domContainer);
</script>
</body>
</html>

解决方法

更新：我已将此错误报告给chrome小组，请帮助我投票该问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1134899#c_ts1603534836

旧：我猜这是Chrome漏洞，这是我的tmp解决方案

简而言之，使用chrome扩展api“结束进程”当前选项卡进程，然后重新加载，与手动chrome>任务管理器>结束进程，然后点击重新加载

详细信息：

使用chrome.processes，它需要最新的 chrome dev channel（非Chrome稳定版）

chrome.processes.terminate终止当前的标签页处理

chrome.tabs.onUpdated监听“ ctrl + r”重载事件，当重载“ localhost”开发url时，先“结束进程”，然后重载

以下是我的部分解决方案代码（完整的代码很长，因此我省略了，但是您可以参考自己编写的代码）

/**
 *
 */
import {CrxAsync} from "./node_modules/ro-crx/src/index.js"

class ForceReloadInLocalhost extends CrxAsync {
  constructor() {
    super()

    chrome.processes.onExited.addListener(() => {
      this.startReload()
    })
  }

  start(tab) {
    if (tab == null) {
      this.getCurTab((curTab) => {
        this.start(curTab)
      })
    } else {
      this.tabId = tab.id;
      var tabId = this.tabId
      if (tab.url.match(/localhost/)) {
        this.killProcess(tabId,(status) => {
          if (status == "not_process") {
            this.startReload()
          }
        })
      } else {
        this.startReload()
      }
    }
  }

  startReload() {
    if (this.tabId) {
      this.reload(this.tabId,{},() => {
        this.tabId = null
      })
    }
  }
}

var forceReload = new ForceReloadInLocalhost()

chrome.commands.onCommand.addListener((cmd) => {
  if (cmd == "forceReload") {
    forceReload.start()
  }
})

var isForceReload = true
chrome.tabs.onUpdated.addListener((tabId,changeInfo,tab) => {
  if (tab.url.match(/^https?:\/\/localhost/)) {
    if (changeInfo.url == undefined /* it means is reload,so url doesn't change*/ && changeInfo.status == "loading") {
      if (!isForceReload) {
        isForceReload = true
        forceReload.start(tab);
      } else {
        isForceReload = false
      }
    }
  }
})

我发现 this workaround 有类似的问题：

尝试在隐身模式下打开 devtools
在 devtools 中选择另一个标签
关闭隐身窗口
再次定期尝试开发工具