chrome devtools 调试反应，点击“刷新”导致调试卡住
chi*_*nce 5 javascript google-chrome google-chrome-devtools reactjs
我不使用任何远程调试（webstorm 和 devtools）
只需使用 chrome 开发工具
当调试在 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>
更新：
这是我的解决方案：/sf/answers/4493761961/
更新：我向 chrome 团队报告了这个错误，请帮我投票这个问题：https://bugs.chromium.org/p/chromium/issues/detail ?id=1134899#c_ts1603534836
旧：我猜是这个 chrome bug，所以这是我的 tmp 解决方案
简而言之，使用 chrome 扩展 api“结束进程”当前选项卡进程，然后重新加载，这与手动 chrome > 任务管理器 > 结束进程然后点击重新加载是一样的
详细地：
使用chrome.processes，它需要最新的chrome 开发通道（不是 chrome 稳定版本）
chrome.processes.terminate终止当前选项卡进程
chrome.tabs.onUpdated监听“ctrl+r”重新加载事件，当重新加载“localhost”dev 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
}
}
}
})