SAFE-Stack
Client side F# debugging in VS Code
According to the docs you can add breakpoints to the generated *.fs.js files, but is it also possible to hit breakpoints in client side F# code?
What would be the right launch.json and or tasks.json to do so?
Yes, it's possible. You need to enable the source maps generation option in the fable command.
If you're following the debug recipe for using VS Code it's fairly simple. You basically just need to add -s to the dotnet fable command. There are some sticking points; see discussion here https://github.com/SAFE-Stack/docs/pull/223#discussion_r656189211
I haven't tried it with VS and I'm not sure if the recipe has even been updated to work with Visual Studio.
After adding -s to the fable command and making a change to the Index.fs a index.fs.js.map will be created.
However any breakpoint I add to the Index.fs is unbound.
Do I need to make changes to the default Chrome: Attach configuration to get things to work?
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
Hmm I just tried it with a fresh template and got the same thing as you, all the breakpoints set are grey. I then tried downgrading back to v3.0.0-beta004 and doing the same thing and with that it works, so something must've changed.
There are a number of differences but I'm not sure what's changed that made it stop working. It doesn't seem to be to do with the fable version and no other changes between 3.0.0-beta004 and 3.0.1 look that relavent to debugging.
Any chance you could try seeing if it works for you with a 3.0.0-beta004 version of the template?
Debugging works great with 3.0.0-beta004.
I played around with the webpack.config.js and as soon as I remove babel-loader debugging no longer works.
3.0.1 no longer uses babel-loader so this is probably the culprit.
Nice find! Good to know it's got something to do with the webpack config.
In this comment https://github.com/SAFE-Stack/docs/pull/223#discussion_r655083871 Alfonso mentions needing the source-maps-loader, which I found not to be necessary after all. Maybe it is actually needed but babel-loader was loading source maps itself or putting them inline or something. Just speculating, IDK how it works. But it seems like adding source-maps-loader would probably be a good thing to try.
Adding source-maps-loader 1.1.3 (newer version require webpack 5) did the trick, debugging now works. 🙂
I just updated the client debugging guide in this PR.
@isaacabraham I think this issue can be closed off now?
