What is the best practice to debug and learn about the library code?

[yoshikiohshima]

Hi,

I am interested in, say, how the translated JS code looks. I'd put a break point in, say, src/javascript/parse.ts or src/javascript/transpile.ts and check how nodes and resulting text are transformed. I simply tried to put debugger at the top of a function in parse.ts but it does not hit in the browser. I put console.log() and the output goes to the command line.

How do people do this kind of exploration?

[spandl]

Me too, I would like to step through JS/TS code, but in markdown files, this doesn't seem to be possible and I haven't managed either in stepping through JS/TS modules.

[mbostock]

You can put a debugger statement in JS code blocks or in JS components. For example:

```js
debugger;
display(Plot.plot({…}));
```

But, stepping through the client-side is different than what @yoshikiohshima asked for, which is stepping through Framework’s server-side transpilation. For that you would need to use node --inspect.

If you just want to see how the translated JS code, there is very little difference, but you can view source on the preview server and you will see it in the HTML, or you can run the build command and look at the generated HTML.

[yoshikiohshima]

Thanks for the reply! I'll try that next time. I figured out the translation scheme more or less by copying the transpiler part to my own and then started modifying it (The result is here https://github.com/yoshikiohshima/renkon), and as the transpilation happens in the browser for me it is okay for now.

Thanks again.

[spandl]

OK, I see, sorry for hijacking the issue 😅.

I knew about the debugger method, but I'd have preferred setting the debugger points in VS.
Will try to get used to it... Thanks.

[mbostock]

You can also use your browser’s developer tools to set breakpoints (without needing a debugger statement). For example in Chrome, open the Developer Tools with Option-Command-I (⌥⌘I), then find the current page under Sources, then click on the desired line number to set a breakpoint.

[spandl]

💪 will try that tomorrow!

[qd-danh]

Jumping on this thread as it somewhat asks my same question.

I haven't found a way to debug a framework app from within VS code. @mbostock you show the debugger; statement in a js code block. I'm not sure what is supposed to do? I'm guessing dump me in the browser debugger but it's not happening.

I have debugged via the browser dev tools which works, just clunky. I am missing a "real" debugging experience in VS Code. F5 from there tries to debug markdown via an extension (marketplace search doesn't show anything obvious).

So is debugging really only in the browser (at least for now)?

...and I also want intellisense but see there are some topics to try those ideas out (local packages).

Thank you for any further thoughts! I ❤️ framework (but even more if I can debug it)

[spandl]

Here is how I do it at the moment:

• Regular setup for debugging in VS Code using a launch file
• Then I set a debugger statement

I can now step through the code in VS, but this is still not what I want:

• the debugger opens a new file, which is a compiled .js version, not the .ts original file
• You can set breakpoints in this new file, but with each change the URL will change (the hash code) and you will need to set the breakpoints again.

I'm no expert in this, but it would be interesting to know how this could be tweaked. Setting breakpoints in the original file would be great.