Chrome dev-tools is ignoring breakpoints

user_147562 0
Viewed 1490

Trying to debug with Chrome devtools, but my breakpoints are not working. If I put in a debugger statement, it triggers a breakpoint, but devtools itself doesn't seem to be able to stop at a breakpoint set with the mouse. This seems to be a new "feature" of dev tools because it has worked in the past. Has anyone else successfully fixed chrome in regards to this problem?

I'm building with webpack and the app started as a create-react-app

Debugger Sources view

google-chrome-devtools
2 Answers

Hot code reloading overrides code (sends chunks of new code to override functions you were previously using), so your breakpoints become invalid in that case because they are attached to the 'old' code. I don't think you were doing anything wrong, but most probably it looked like this:

  1. You started create-react-app in the browser.
  2. You inserted a breakpoint manually in the inspector.
  3. You modified the code in your code editor.
  4. create-react-app hot reload sent a new code to the browser, which did override your previous code.
  5. Browser was no longer using the code you set breakpoints in and instead was using your new code.
  6. Debugger statement worked because it was still in the code.
  7. After reloading the page it worked again, because Chrome inspector remembered the position of breakpoints you did set manually and applied them to the new code.
user_10111560

@boatcoder - I had the same problem, again with code running using create-react-app.

I was able to set breakpoints and they would stop execution when hit, but after a dynamic (hot) code change, they no longer worked - only breakpoints in unmodified functions. I found that if I reload the web page (for my app that means logging in again) then the breakpoints work again.

user_148233760
Related