I have a webpack 4 configuration that generates source maps for my app's JavaScript. While debugging my app in Chrome, the source maps get loaded so I can see my unimified code. I'll set a breakpoint in a function and in the Sources tab I'll make edits to the code. I hit CMD+S to save my edits.
Normally, I would expect Chrome to think for a little bit while it processes my edits and then I can continue debugging my session with my code changes.
But that doesn't happen. I get a little yellow icon next to my file in the Sources tab that says "Changes to this file were not saved to the filesystem". And the debugging session continues without my code changes.
I've tried different options like cheap-module-source-map and cheap-module-eval-source-map for the devtools option in my webpack config.
Any suggestions? Thanks!
I got something working!
I ended up posting my same question on reddit and got some help. https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/
You need to add your project's directory to save changes in the source.
Here are the steps:
Open dev tools
Click on the 3 vertical dots on the far-right beside X which brings up a menu. Click on Settings
Click on Workspace
Add your Project's directory
Refresh the page, and you should be able to save your changes now.
Hope this helps.
Oddly enough, I was able to remove my Project's directory from the Workspace and STILL able to make Live Edits to my source maps!