joshbolduc/vscode-story-explorer

Console.log output?

kfinley opened this issue · 3 comments

kfinley commented

I've enjoyed using the story explorer plugin but I would like to be able to see console.log messages that components output. I would expect these to show up in the Story Explorer output. Is this something that could be added? Or is there somewhere these logs are going that I haven't found yet?

joshbolduc commented

Thanks for the feedback!

Console output is available via using the "Developer: Open Webview Developer Tools" command, though it's not a terribly good experience.

I think it would be viable to intercept calls to console.log and pipe the messages somewhere else. Then the question is where to send them:

  • The output panel could work, but it's limited to string content. (I would probably create a separate output channel rather than reuse the existing one, just to avoid noise.)
  • I could see possibly adding a separate webview or an overlay to the existing webview with a more interactive view, but that would be somewhat more involved. I'd also have to think about how to expose it so that it was accessible enough if you wanted it, but not in the way if you didn't.
  • I think pretty much no matter what we could only support serializable messages.

To be honest, most of the time when I'm looking to debug component behavior, I find it's just easier to do it in a browser with full access to developer tools. (It would be interesting if you could use VSCode's own debugger to attach to the webview, but I'm not aware of a way to do that.)

kfinley commented

This is exactly what I wanted. I totally forgot about the Webview Dev Tools. I haven't dabbled in VSCode extension development in a few years....

It would be cool to attach the debugger to the Storybook webview but I don't think it's really needed. I spent a little bit of time yesterday trying to do that and I think it could be doable. Honestly though using the Webview Dev Tools works as you'd expect once you find the storybook-iframe and your code's source. Just drop a breakpoint and debug as usual.

Feel free to close unless you want to explore the idea of attaching VSCode's debugger to the webview.

joshbolduc commented

Cool, glad that works for you! I'm going to close this out and save the debugger research for another day.