When generating source-map JS.debugger is not shown stopped at the right place in the F# file. It seems to be at the beginning of the current scope

[7sharp9]

Description

Breakpoints are not working

Repro code

I have a repo here

https://github.com/7sharp9/fable-vscode-twitch-chatbot Set breakpoints on any line, none of them work.

Expected and actual results

Breakpoints work

Related information

• Fable version: 2.4.22
• Operating system MacOS

[7sharp9]

[7sharp9]

Previously I noticed that breakpoints were out by ~20 lines but this seems to have stopped and they no longer work at all as seen in the above repo. The debugger() entry on line 83 just jumps into js code:

[MangelMaxime]

Hello @7sharp9,

when debugging your extension for VSCode, you should see a message telling you that you can set breakpoints in your fs files because source maps were not found.

In order, to be able to debug from an .fs file you need to activate the source map generation in your babel config.

const path = require("path");

function resolve(relativePath) {
  return path.join(__dirname, relativePath);
}

module.exports = {
  entry: resolve("src/FableVscodeExtention.fsproj"),
  outDir: resolve("out"),
  babel: {
    plugins: ["@babel/plugin-transform-modules-commonjs"],
+    sourceMaps: true,
  },
  allFiles: true
};

If I add the JS.debugger() instruction it also captures it but the stop in the JavaScript file is messed up. I created an issue in order to track the work on the source-maps #2013

[7sharp9]

I think you were there on the stream when I was debugging and between then and when I logged the issue nothing had changed and they stopped working. I know nothing about the source maps but Im happy to help out if you can suggest anything for me to look into :-)

[MangelMaxime]

Are you trying to debug the code from the *.fs files? Or are you debugging from the generated JavaScript file?

If that's the first option, then you need the source-maps which is a file generated to make the link between F# code and JavaScript code.

If that's the second option, then no changes are needed in your repo.

For me debugging is working on your project.

[7sharp9]

The *.fs files, if I add breakpoints then nothing happens unless I add debugger() even then the source lines don't match.

On Sun, 12 Apr 2020 at 09:19, Maxime Mangel notifications@github.com wrote:

Are you trying to debug the code from the *.fs files? Or are you debugging from the generated JavaScript file?

If that's the first option, then you need the source-maps which is a file generated to make the link between F# code and JavaScript code.

If that's the second option, then no changes are needed in your repo.

For me debugging is working on your project.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fable-compiler/Fable/issues/2012#issuecomment-612580763, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEPXSTUCIN7IJLIGZLJLATRMF2QVANCNFSM4MEURRKA .

[MangelMaxime]

You need to have source maps files in order to debug a from *.fs files.

VSCode tooltip is explicit about that.

I send a PR to your project: https://github.com/7sharp9/fable-vscode-twitch-chatbot/pull/3

[7sharp9]

Even when I do that the first entry point with a debugger() on line 82:

    let client = tmi.client options
    debugger()
    client.connect() |> ignore

Is here:

[MangelMaxime]

This is probably a problem related to the source map. If you don't generate the source maps then VSCode stops at the right line in the JavaScript files.

This is not the case when I activate the source-maps. However, if you activate the source map you can directly set the breakpoint from VSCode interface and that's stopping at the right location.

I need to learn how source-maps work in Fable first, in order to try to fix that issue. Because the generated JavaScript seems normal

[7sharp9]

To be explicit, this happens with source maps enabled.