# Nicer Debug.log console output

**URL:** <https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780>\
**Category:** Show and Tell\
**Created:** [June 10, 2019, 6:18pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780 "2019-06-10T18:18:27Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 10, 2019, 6:18pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/1 "2019-06-10T18:18:27Z")

</div>

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](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](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/5/58fbf17d074ac8d4ff2c4e8c74073f418a6c31ba.png)

into this nice collapsable output right in your console

![17](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/f/fc8a78756e9b511acf3a23feeb65399ffbd9e58c.png)

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.

---

<div class="post-metadata">

**Author:** ![antew](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/antew/32/2102_2.png) [@antew](https://discourse.elm-lang.org/u/antew)\
**Post date:** [June 10, 2019, 7:24pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/2 "2019-06-10T19:24:04Z")

</div>

Nothing to add but that is awesome!

---

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 10, 2019, 7:36pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/3 "2019-06-10T19:36:27Z")

</div>

Thank you. I hope it would be helpful for you 🙂

---

<div class="post-metadata">

**Author:** ![mywzQxMJ76](https://avatars.discourse-cdn.com/v4/letter/m/898d66/32.png) [@mywzQxMJ76](https://discourse.elm-lang.org/u/mywzQxMJ76)\
**Post date:** [June 11, 2019, 8:18pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/4 "2019-06-11T20:18:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sebastian/32/98_2.png) [@Sebastian](https://discourse.elm-lang.org/u/Sebastian)\
**Post date:** [June 12, 2019, 12:06am UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/5 "2019-06-12T00:06:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zimmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/zimmy/32/2271_2.png) [@zimmy](https://discourse.elm-lang.org/u/zimmy)\
**Post date:** [June 14, 2019, 1:35pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/6 "2019-06-14T13:35:36Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/74b996f271b14bf9dd5a793e8a80ac12c0685236.gif)

---

<div class="post-metadata">

**Author:** ![ondrej](https://avatars.discourse-cdn.com/v4/letter/o/df705f/32.png) [@ondrej](https://discourse.elm-lang.org/u/ondrej)\
**Post date:** [June 18, 2019, 6:02pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/7 "2019-06-18T18:02:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [June 19, 2019, 4:51pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/8 "2019-06-19T16:51:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 20, 2019, 8:22am UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/9 "2019-06-20T08:22:24Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![ondrej](https://avatars.discourse-cdn.com/v4/letter/o/df705f/32.png) [@ondrej](https://discourse.elm-lang.org/u/ondrej)\
**Post date:** [June 20, 2019, 9:40am UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/10 "2019-06-20T09:40:15Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 20, 2019, 9:58am UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/11 "2019-06-20T09:58:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ondrej](https://avatars.discourse-cdn.com/v4/letter/o/df705f/32.png) [@ondrej](https://discourse.elm-lang.org/u/ondrej)\
**Post date:** [June 20, 2019, 3:42pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/12 "2019-06-20T15:42:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 20, 2019, 3:58pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/13 "2019-06-20T15:58:29Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![kraklin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kraklin/32/385_2.png) [@kraklin](https://discourse.elm-lang.org/u/kraklin)\
**Post date:** [June 28, 2019, 2:43pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/14 "2019-06-28T14:43:36Z")

</div>

Pst… 😉 !

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.

 ![nice_output](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/45ce366ea5b53f75e7b0f684d17b717bb1d4d116.png)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [July 8, 2019, 2:43pm UTC](https://discourse.elm-lang.org/t/nicer-debug-log-console-output/3780/15 "2019-07-08T14:43:37Z")

</div>

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