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!