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
into this nice collapsable output right in your console
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.
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.
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?
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.
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.
!