Chrome Devtools Debug React, Hit "refresh" Cause Debug Stuck

I don't use any remote debug(webstorm and devtools) just use chrome devtools when debug stop in breakpoint in devtools hit 'ctrl+r' refresh also stuck(tab blank, debug session cann

Solution 1:

update:

here is my solution: https://stackoverflow.com/a/64196599/6011193

update: I report this bug to chrome team, please help me vote this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1134899#c_ts1603534836

old: I guess this chrome bug, so here is my tmp solution

in short, use chrome extension api "end process" current tab process and then reload, it's same manually chrome > task manager > end process and then hit reload

in detail:

use chrome.processes, it require latest chrome dev channel(not chrome stable version)

chrome.processes.terminate to terminate current tab process

chrome.tabs.onUpdated listen "ctrl+r" reload event, when reload "localhost" dev url, first "end process" and then reload

following is my part solution code(full code is very long so I omit it, but you can refer to make yourself code)

/**
 *
 */import {CrxAsync} from"./node_modules/ro-crx/src/index.js"classForceReloadInLocalhostextendsCrxAsync {
  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.tabIdif (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 = newForceReloadInLocalhost()

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

Solution 2:

I found this workaround for a similar issue:

1. Try to open devtools in incognito mode
2. choose another tab in devtools
3. close incognito window
4. try dev tools on regular one again