https://github.com/layflags/elm-monitor

Monitor your elm program with redux-devtools
https://github.com/layflags/elm-monitor

debugging elm redux-devtools

Last synced: about 2 months ago
JSON representation

Monitor your elm program with redux-devtools

• Host: GitHub
• URL: https://github.com/layflags/elm-monitor
• Owner: layflags
• License: mit
• Created: 2019-01-24T09:11:59.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-10T15:05:00.000Z (6 months ago)
• Last Synced: 2024-10-12T16:51:29.279Z (2 months ago)
• Topics: debugging, elm, redux-devtools
• Language: Elm
• Size: 1.23 MB
• Stars: 26
• Watchers: 4
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# elm-monitor

Monitor your elm program with [redux-devtools](https://github.com/reduxjs/redux-devtools) during development. It's really just for monitoring and inspecting state and actions. Action replay (time travel) is not supported.

![Screenshot Redux Devtools](devtools.png)

## How to use it?

1. Install the dependency: `$ npm install elm-monitor`

2. Import and initialize `elm-monitor` in your `index.js`:

   ```

   import monitor from 'elm-monitor';

   ...

   monitor();

   ```

3. Copy or symlink `Monitor.elm` into your source folder, via

   e.g. `ln -s ../node_modules/elm-monitor/src/Monitor.elm src`

4. Import `Monitor.elm` into your `Main.elm` with `import Monitor`

5. Replace `Browser.application` with `Monitor.application` in your `Main.elm`

6. Open Redux Devtools in your browser and reload your app.

### Attention!

You should only use this during development. Elm won't build when `Monitor.elm` is used, because it depends on `Debug.log`.

### What if I don't use `Browser.application`?

Besides being able to monitor `Browser.application`, `Monitor.elm` additionally exports:

- `Monitor.worker` - when using `Platform.worker`

- `Monitor.sandbox` - when using `Browser.sandbox`

- `Monitor.element` - when using `Browser.element`

- `Monitor.document` - when using `Browser.document`

## How does it work under the hood?

It's quite simple. `Monitor.elm` just logs the state on `init` as well as every action and resulting state on `update` to the browser console. `monitor.js` connects to redux-devtools, patches `console.log` to extract messages logged by `Monitor.elm`, parses and transforms the log messages using `elm/parser` (thx [@ChristophP](https://github.com/ChristophP)) and passes them over to redux-devtools.

## How does it map Elm to JS data structures?

* Int, Float -> Number

* Char, String -> String

* Unit `()` -> `null`

* List -> Array

* Tuple -> Array

* Type constructor -> Array `[⟨Ctor⟩, param1, param2]` or String `⟨Nothing⟩`