Javascript chrome devtools调试反应，点击；刷新“；导致调试被卡住_Javascript_Reactjs_Google Chrome_Google Chrome Devtools

Javascript chrome devtools调试反应，点击；刷新“；导致调试被卡住

javascript reactjs google-chrome google-chrome-devtools

Javascript chrome devtools调试反应，点击；刷新“；导致调试被卡住,javascript,reactjs,google-chrome,google-chrome-devtools,Javascript,Reactjs,Google Chrome,Google Chrome Devtools,我不使用任何远程调试（webstorm和devtools）只需使用chrome开发工具调试在devtools中的断点处停止时点击“ctrl+r”刷新也被卡住（选项卡为空，调试会话无法重新启动） var e=React.createElement 类应用程序扩展了React.Component{ render（）{ 返回e（“div”） } } const domContainer=document.querySelector（'#root'）； render（e（App），domCon

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

只需使用chrome开发工具

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

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


var e=React.createElement
类应用程序扩展了React.Component{
render（）{
返回e（“div”）
}
}
const domContainer=document.querySelector（'#root'）；
render（e（App），domContainer）；

更新：我向chrome团队报告此错误，请帮我投票：

旧的：我猜这是chrome的错误，这是我的tmp解决方案

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

详细内容：

使用时，需要最新的（非chrome稳定版）

chrome.processs.terminate

终止当前选项卡进程

chrome.tabs.onUpdated

在重新加载“localhost”dev url时，先“结束进程”，然后重新加载“ctrl+r”重新加载事件

下面是我的部分解决方案代码（完整代码很长，所以我省略了它，但您可以参考makeyourself代码）

可能是devtools中的一个bug。我通常先按F8键（取消暂停），然后按Ctrl-R或F5键。

<!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>

/**
 *
 */
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
      }
    }
  }
})