Source map debugging messed up after hot reload
empz opened this issue · 6 comments
If I set a debugger statement, then do yarn start, the browser stops at the proper debugger line and shows the original TS code.
Now, if while the site is running I change some code and add another debugger statement, then the browser doesn't stop there, but at the closing bracket of where the debugger statement is and I can't properly watch the variables. A full page refresh doesn't help, only to stop the dev server and start it again.
Any ideas?
P.S. I'd pay if we could debug directly from VSCode but I've never seen it work with webpack/HMR yet.
There's a problem where chrome would keep the old source-map after HMR. It does work as expected if you use devtool: 'eval' in webpack's config (Home.tsx will be updated in chrome's dev tools every HMR), but you lose source-maps. I tried all the possible devtool options and nothing does the job. However, a full refresh should definitely work.
I tried to get VSCode debugging to work but I also run into problems with HMR. This is one of the reasons why I never use source-maps in my own projects/work. What I do is use target: "es2015" (or es2016 etc.), and with devtool: 'eval' you would get modern JS with HMR that works with source-maps. The only problem there is JSX, but you get used to it.
But using target: "es2015" | "es2016" doesn't really make it compatible with current browsers. I mean, there's people still using IE 10...
Yeah, for production (and testing) I use "es5".
Here's a working project (a little bit old) with chrome debugging working. I've tested it myself and it works. Maybe it can help.
https://github.com/cyclejs-community/typescript-starter-cycle
Also here's a related discussion. Several people were able to make it work.
https://github.com/Microsoft/vscode-chrome-debug/issues/40
Nevermind, that project doesn't use HMR which is what you said is the cause of the chrome debugging not working right?
Yes. Without it the chrome debugging protocol works very well with vscode.