Skip to content
Transform Elm Debug.log output into nice log object with custom formatter
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
elm-app Fixes #4 and #5 Jun 27, 2019
img Add images to README Jun 10, 2019
src Fixes #4 and #5 Jun 27, 2019
test Fixes #4 and #5 Jun 27, 2019
.babelrc Eject Elm app + add webpack Jun 10, 2019
.gitignore Add yarn-error.lock Jun 10, 2019
.npmignore Add images to README Jun 10, 2019
.prettierrc Fixes #4 and #5 Jun 27, 2019
LICENSE Initial commit Jun 10, 2019
README.md Update usage and installation instructions Jul 6, 2019
package.json Publish version 0.0.7 Jun 27, 2019
webpack.config.js Add minification for output library code Jun 11, 2019

README.md

Elm Debug Transformer

version

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

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

Get it directly from CDN

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

<script src="https://unpkg.com/elm-debug-transformer@<VERSION>/dist/elm-console-debug.js"></script>

<script>ElmConsoleDebug.register()</script>

Usage

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

Register the console debugger in your main JS file before you initialize Elm application:

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

ElmDebugger.register();

// rest of application

Enable custom formatters in Chrome dev tools

Available in Chrome 47 and higher.

The output object is kind of chatty right now (it carries information about parsed type etc. - less verbose version is worked on right now).

If your browser have Chrome dev toools, you can enable custom formatters so you get less noice and nice output.

  • Open DevTools
  • Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > Preferences > Console)
  • Check-in "Enable custom formatters"
  • Close DevTools
  • Open DevTools

Note: You might need to refresh the page first time you open Console panel with existing logs - custom formatters are applied only to newly printed console messages.

Simple object output

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

ElmDebugger.register({simple_mode: true});

If you are not a fan of Chromium based browser you can pass option to the register function.

register({simple_mode: true});

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.

Credits

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

You can’t perform that action at this time.