# Display full msg in Elm Debugger sidebar

**URL:** <https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578>\
**Category:** Show and Tell\
**Created:** [July 29, 2018, 1:12pm UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578 "2018-07-29T13:12:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![harfangk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/harfangk/32/413_2.png) [@harfangk](https://discourse.elm-lang.org/u/harfangk)\
**Post date:** [July 29, 2018, 1:12pm UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/1 "2018-07-29T13:12:14Z")

</div>

Elm Debugger limits the length of the text it displays. This is especially annoying when I want to examine the entire message that I’ve received.

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/elm_lang/original/2X/1/1c695166e2cb2ef98e6f9ffb446b718fc19bdf6e.png)

I’ve overwritten some code in Debugger to make it display full texts instead of eillipses.

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/elm_lang/original/2X/5/5e0a82ddd834505a83959d5e35b5a5c9129b1222.png)

It’s not the most legible text, but it has all information in there. I did it by replacing the `messageToString` function in `elm-stuff/packages/elm-lang/virtual-dom/2.0.4/src/Native/Debugger.js` with the following code:

```javascript
function messageToString(value) {
	var result = '';
	for (var key in value)
	{
		result = result + ' ' + messageToStringHelper(value[key]);
	}
	return result;
}

function toFlatArray(value, result)
{
	if (value['ctor'] === '[]')
	{
		return result;
	}
	else
	{
		var new_result = [...result, value['_0']];
		return toFlatArray(value['_1'], new_result);
	}
}

function messageToStringHelper(value)
{
	switch (typeof value)
	{
		case 'boolean':
			return value ? 'True' : 'False';
		case 'number':
			return value + '';
		case 'string':
			return addSlashes(value, false);
	}
	if (value instanceof String)
	{
		return '\'' + addSlashes(value, true) + '\'';
	}
	if (typeof value !== 'object' || value === null)
	{
		return '…';
	}
	if (typeof value === 'object' && !('ctor' in value))
	{
		var result = [];
		for (var key in value)
		{
			result.push(key + ': ' + messageToStringHelper(value[key]));
		}
		return '{' + result.join(', ') + '}';
	}
	if (value.ctor.match(/^\_Task/))
	{
		return '…';
	}
	if (value.ctor.match(/^\_Tuple/))
	{
		var tupleResult = [];
		for (var key in value)
		{
			if (key !== 'ctor')
			{
				tupleResult.push(value[key]);
			}
		}
		return '(' + tupleResult.map(messageToStringHelper).join(', ') + ')';
	}
	if (['<decoder>', '_Process', 'Set_elm_builtin', 'RBNode_elm_builtin', 'RBEmpty_elm_builtin'].indexOf(value.ctor) >= 0)
	{
		return '…';
	}
	if (value.ctor === '::')
	{
		var arrayResult = toFlatArray(value, []).map(messageToStringHelper);
		return '[' + arrayResult.join(', ') + ']';
	}
	if (typeof value === 'object')
	{
		var result = '';
		for (var key in value)
		{
			result = result + ' ' + messageToStringHelper(value[key]);
		}
		return result;
	}
}

```

It definitely has a lot of room for improvement, so feel free to modify it! I hope it helps your development process.

---

<div class="post-metadata">

**Author:** ![christian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/christian/32/1384_2.png) [@christian](https://discourse.elm-lang.org/u/christian)\
**Post date:** [July 29, 2018, 9:54pm UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/2 "2018-07-29T21:54:11Z")

</div>

Thanks for sharing. The default behavior certainly has some limits in terms of its utility for inspecting messages. Given that this is merely debugging code, I do not see any issues with this type of hack. As soon as an improved version of the debugger is released, I think anyone using this technique would happily move on.

---

<div class="post-metadata">

**Author:** ![akoppela](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/akoppela/32/250_2.png) [@akoppela](https://discourse.elm-lang.org/u/akoppela)\
**Post date:** [July 30, 2018, 1:39am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/3 "2018-07-30T01:39:05Z")

</div>

It really depends on why would you like to display full messages but there is another simple solution without touching any third-party packages. One can simple add `Debug.log "" msg` to `update` function in a following way to get full messages in the console.

```elm
update: Msg -> Model -> (Model, Cmd Msg)
update msg model =
    let
        _ =
            Debug.log "" msg
    in
    -- UPDATE DETAILS
    ...

```

---

<div class="post-metadata">

**Author:** ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)\
**Post date:** [July 30, 2018, 10:19am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/4 "2018-07-30T10:19:42Z")

</div>

I usually just wrap the msg in the case expression like this:

```
case (Debug.log "msg" msg) of
    — ...

```

Less noisy than the let form in my opinion.

---

<div class="post-metadata">

**Author:** ![akoppela](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/akoppela/32/250_2.png) [@akoppela](https://discourse.elm-lang.org/u/akoppela)\
**Post date:** [August 1, 2018, 6:11am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/5 "2018-08-01T06:11:44Z")

</div>

Yes, the point is still the same. It’s probably unnecessary to patch `VirtualDom` in order to see full messages.

---

<div class="post-metadata">

**Author:** ![ram9cc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ram9cc/32/271_2.png) [@ram9cc](https://discourse.elm-lang.org/u/ram9cc)\
**Post date:** [August 1, 2018, 3:44pm UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/6 "2018-08-01T15:44:07Z")

</div>

I very much want my debugger to be better than a log statement in general as it would rather use a good tool than patch my code on off.

So I appreciate the patch as I was frustrated with this limit of the debugger when I was trying to demo the properties of elm.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [August 1, 2018, 8:18pm UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/7 "2018-08-01T20:18:10Z")

</div>

Have you tried this one?

[http://package.elm-lang.org/packages/jinjor/elm-time-travel/latest](http://package.elm-lang.org/packages/jinjor/elm-time-travel/latest)

---

<div class="post-metadata">

**Author:** ![harfangk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/harfangk/32/413_2.png) [@harfangk](https://discourse.elm-lang.org/u/harfangk)\
**Post date:** [August 2, 2018, 4:18am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/8 "2018-08-02T04:18:25Z")

</div>

I just saw the demo and it has several really neat ideas! I hope it makes it into 0.19!

---

<div class="post-metadata">

**Author:** ![harfangk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/harfangk/32/413_2.png) [@harfangk](https://discourse.elm-lang.org/u/harfangk)\
**Post date:** [August 2, 2018, 4:21am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/9 "2018-08-02T04:21:08Z")

</div>

That’s what I’d been doing, but once my app got complicated enough to get several dozen messages per minute, debugging through console window became too much of a hassle. That’s why I started looking into this alternative approach.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [August 2, 2018, 10:05am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/10 "2018-08-02T10:05:17Z")

</div>

> [@rupert](#):
>
> [elm-time-travel 2.0.0](http://package.elm-lang.org/packages/jinjor/elm-time-travel/latest)

This one is less performant than the built in one. I think being entirely in non-kernel code means it has less opportunity to optimise memory usage - you can really notice this if you are doing animations. However, it is better in how it lets you explore the Msg and Model, and the filtering feature is almost very nice, but often not very useful due to nested Msgs.

---

<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:** [August 12, 2018, 10:05am UTC](https://discourse.elm-lang.org/t/display-full-msg-in-elm-debugger-sidebar/1578/11 "2018-08-12T10:05:31Z")

</div>

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