How to access Observable Standard Library development code when debugging?

Community Help
1

I would like to explore the (development version of) source code of Observable Standard Library during debugging. However, the approach I use below can only get me to the production code or minified code, not the development one. How can I get around this? Thanks

My approach

  1. in a cell of a new notebook, type the following
{
  debugger;
  html`<canvas width=60 height=50>`
}
  1. cmd + option + j to open the debugger
  2. run the cell to trigger the debugger
  3. cmd + ; to step into the standard library function I want to explore
  4. then I get into the minified version (but I want to explore development version) of standard library
1 Like
2

Hi @EmbraceLife,

We don’t ship the development version of the standard library in production, but you can explore it to your heart’s desire in the open source repository, here:

For example, here’s the underlying source of the built-in html function:

1 Like
3

@jashkenas Thanks a lot for your reply!

Yes, you are right that we can read the source code from the repo, but it feels so convenient to be able to see the source from the devtool when we debug it.

Maybe, I could make a development version for my own use by copying and pasting the std source code into a notebook and import needed functions in other notebooks?

By the way, I really really appreciate the creation of Observable notebook, it is truly magic and wonderful! Thank you all so much!

4

I agree that a compiled but unminified variant that can be required/imported separately would be nice, especially in more complex areas like Generators. Many packages, among them d3, offer both variants.

2 Likes