Hey there. I’m loving Observable, the UI is great and it’s fun to mess around and create things. One thing I’ve started doing, especially for library-type notebooks that produce visual output, is to write visual “tests” by creating examples at the end of the notebook that call whatever function I’m testing in various ways, with various arguments or whatever. Oftentimes, a bug pops and in order to debug it I will log certain values to the console. I find that it’s easier to see what’s up if I disable all but one of the examples, that way the log is less noisy. However, there’s not a great way to do this — I have to go back up and comment out the code in the cells that produces those examples, then when I’m done debugging I will uncomment them. Is there a better way to do this? I’m wondering if it would make sense to add an option to the cell menu so you can disable that cell. Bonus if there’s a keyboard shortcut!
One way to handle this would be to add a checkbox through which you can toggle your debug mode:
viewof DEBUG = html`<input type=checkbox>`
Then in your cells you can test for the value:
{
if(!DEBUG) return;
// do stuff
}
That could work, except that if I want to change up which cells are disabled, I would have to add or remove the if statement from each cell. That would be a good way to toggle console.log statements though.
I just stick some invalid syntax into the cell so it errors out instead of executing.
E.g. I change
foo = { .... } to
x foo = { .... }
Fantastic question.
Disabling specific cells is one thing — but what we’re really talking about here is reactive, visual testing of notebooks.
And in that department, although it’s not quite at the top of the list, there’s a lot of fertile ground to cover. I’d love to have a first-class notion of a test in Observable notebooks … where they could run reactively (only tests affected by a change need to be re-run) , stay out of your way in the UI, and have a miniature summary of success/failure in a little indicator at the top.
Anyhow, in the meantime, check out console.group() and console.groupCollapsed()…
If someone comes up with some best practices for writing tests in notebooks, that would be great. I have only experimented very slightly with it.
Assuming that the core request is “delay cell execution until a condition is met”, I’d like to throw in another use case: Wizard style notebook execution, where a user has to interact at certain steps before the next set of cells become visible. I believe that notebooks can often be overwhelming, especially when there are animated outputs. Hiding cells until a user performed an action might help to guide through taxing topics.