Nicer Debug.log console output

The format of Debug.log can get unreadable for complex or big datastructure and sometimes you can’t use the Elm Debugger so all you can count in is Debug.log.

Meet elm-debug-transformer - https://github.com/kraklin/elm-debug-transformer
It parses Debug.log console messages and returns complex object that can be transformed into nice “Elm Debugger like” structure right in your console. It replaces your console.log() and when it can parse the message (it is in format that Debug.log outputs) it transforms it form this

05

into this nice collapsable output right in your console

17

What’s planned:

  • more colours for types like string number etc.
  • simpler object output so you can use it even with non-Chrome browsers

Ideas, issues, enhancements and PR’s are welcomed.

48 Likes

Nothing to add but that is awesome!

2 Likes

Thank you. I hope it would be helpful for you :slight_smile:

1 Like

Thank you for sharing this! I’m sure I’ll come back to this very soon! :slight_smile:

1 Like

This is great, thanks, will definitely improve my dev experience.

1 Like

image

1 Like

Hi, thanks for doing this.

In my case, I would prefer to use this as an browser extension rather than installing another npm package into my app.

1 Like

thanks a lot - seemed to install and work flawlessly. Unlike ondrej I’d rather you kept it as a npm install.

1 Like

@simonh1000 - both has valid use cases.

I have not thought about that browser extension and I like the idea. It can be useful e.g. when I’m switching through several Elm codebases and don’t want or can’t add this to codebase (PR’s of elm projects etc.) or with the team where there not all of colleagues have Chrome or having it in codebase doesn’t make sense.

Once this one is finished, it would be nice spin-off. Thanks for the idea @ondrej.

1 Like

But on the other hand it’s not super important as I’m working on one app at the moment.

btw: I’m using FF :slight_smile:

1 Like

Cool @ondrej , are you satisfied with the output in form of plain JS object (aka simple_mode: true option)?
Is it even helpful? Any idea how to change the structure to be more helpful?

1 Like

Most of the time, I don’t use logging as tests + elm type system catches almost everything. Default Elm logging is hard to grasp in case you have a list with 1000+ items. This is definitely an improvement, even with in simple mode.

Ideally, this nice logging output would be baked in Elm by default. Maybe in some future version.

1 Like

Thank you for the feedback.

Yes, ideally it would be part of Elm, but until then (in the words of JS ecosystem): “There is a package for it”

1 Like

Pst… :wink: !

There is a elm-debug-transformer@beta available on npm. I’d like to hear your feedback on colours used (they will probably change to be more readable) and experience of the usage. Thank you for inspiring me to move this a bit further.

7 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.