Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React app debugging, hot reload and paused in debugger issues

I have this very annoying behavior and I don’t know how to fix it. I am using React and Visual Studio Code. When I set breakpoints and debug in Edge everything works fine for a while. I hot reload changes, refresh, test but at some point it hits a breakpoint in a file like MyReactComponent.someNumbers.hot-update.js and after it does this, on the browser it starts to say "Paused on debugger" on and off without hitting any breakpoints. This is annoying as it happens a few times in a row, generating screen flicker because paused on debugger adds an semi transparent layer over the page. After this, it keeps hitting the breakpoint from the *hot-update.js file. Sometimes I get this with chunk files also.

How to disable this behavior?

Tags:

2

Answers


  1. 0

    You might have breakpoints enabled for events.

    Here is a listing of possible triggers and how to enable/disabled for edge
    https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/breakpoints#overview-of-when-to-use-each-breakpoint-type

    Login or Signup to reply.
  2. 0

    This issue occur with Visual Studio Code with Edge, Sometimes it closes all the visual studio programs.

    You can check the if the source maps are correctly configured in your webpack.config.js

    devtool: 'source-map',

    Another way is you can change the configurations to skip files in launch.json

    this way you can skip unnecessary files

    "skipFiles": [
        "node_modules/**/*.js",
        "<node_internals>/**/*.js",
        "webpack/**/*.js", 
        "**/hot-update.js"
      ]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search