I am using browserify (13.0.0) with reactjs (0.14.7) and Chrome version 48. Unfortunately my breakpoints are not working in Chrome Dev Tools.
I am passing the --debug option to browserify to provide source maps for debugging purposes. $ browserify static/js/App.js --debug -o static/js/build/bundle.js
I am using watchify for hot reloading: $ watchify static/js/App.js -t babelify -p livereactload -o static/js/build/bundle.js -v
I get source maps but when I try and set a breakpoint the breakpoint will jump to different lines and it will never actually stop?
If I add debugger; to code it does not stop on the debugger line and step-over does not step in right order?
I think the issue is with the source maps, but not sure how to fix?
Note that I am trying to set the breakpoint in componentDidMount and I have a console.log call that is being called. Breakpoints set at any point are not getting executed.
Any insight is appreciated.
UPDATE: Upon more debugging the issue appears to be with watchify. If I do not use hotreloading the debugger stops in the code as expected.
When setting debugger in the code it also does not stop on the right line. You can see in the image below, despite the breakpoint set on line 20 it does not stop there. Also, it does not stop at the debugger statement on line 21. Instead it stops at line 23 and then step over calls behave odd. Note that if debugger statement is not there it will not stop for the set breakpoint via Chrome.
Insight still appreciated.
