Elm Debug Transformer

Transform Elm Debug.log output into nice log object with custom formatters

The standard Elm Debug.log console output:

!Elm Debug.log in console without formatter

and the same output with this package

!Elm Debug.log with this package and custom formatter enabled in Chrome

The main module exposes register() function that replaces your console.log() and try to parse each incoming message with Elm parser. If it fails, it would pass the original message.

Limitations

Right now you can insert only alphabet characters and spaces as a Debug.log tag.
``
-- this would parse successfuly
Debug.log "Some tag string" thingToPrintToConsole


-- this would NOT BE PARSED
Debug.log "Some String (with non [a-zA-Z] chars or numbers in it) " thingToPrintToConsole
`

This limitation is due to the problem recognizing arbitrary tag text from the rest of the types. I'm aware of that limitation and it is something that would be addressed in the upcoming versions. Thanks for understanding.

Installation

Just install this module with Yarn:

`
yarn add -D elm-debug-transformer
`

or NPM:

`
npm install elm-debug-transformer
`

$3

Roman Potashow pointed out on Elm Slack that you can use the NPM package directly without the need of installing it.

`



`

Usage

There is a nice summary of the usage in Alex Korban's article Get improved Debug.log output in the browser console

$3

`
import * as ElmDebugger from 'elm-debug-transformer';

ElmDebugger.register();

// rest of application
`

Here's a sample HTML for your reference:
`html










`
import {parse} ElmDebugger from 'elm-debug-transformer';

const parsedValue = parse("debug tag: [1,2,3]");
`

$3

That way the Debug.log would output simpler JS object without type information. Tuple, Set, Array and List would become arrays and Dict would become JS object with keys and values.

$3

`
import * as ElmDebugger from 'elm-debug-transformer';

ElmDebugger.register({simple_mode: true, debug: false, limit: 10000});
`

| parameter | type | description | default value |
|---------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------|----------------:|
| limit | number | number of message characters after which the parser won't parse the message. (Helpful for bypass the parsing of large datastructures) | 1 000 000 |
| debug | boolean | include original message and parser error with the message | false |
| simple_mode | boolean | force output to be in simple object format | false` |

Credits

This would probably not see the light of the day without Matt Zeunert and his blogpost about writing custom formatters. Thank you!