CODEWITHSUNDEEP
elm
jz87
jz87

Reputation: 9627

Does Elm have a debugging function that can print an object to the console?

I would like to be able to examine a runtime javascript object. Can I print an object to the console instead of a string?

Upvotes: 27

Views: 11712

Answers (4)

Brent Rankin
Brent Rankin

Reputation: 21

let
  _= Debug.log "string1" "string2"
in

you can replace either of the "strings" with a variable instead of a string just remove the quotes. both or just one. you can also replace either of the "strings" with a tuple ("string1", "s") it can look like this.

let
  _= Debug.log ("string1", "string2") "string3"
in

so a function would look like this...

adr : Float -> Float -> Float
adr revenue rooms =
    let
        _= Debug.log rooms revenue
    in
    if rooms /= 0 then
        revenue / rooms

    else
        0

This will console 12, $100.00

adr : Float -> Float -> Float
adr revenue rooms =
    let
        _= Debug.log "Rooms" rooms
    in
    if rooms /= 0 then
        revenue / rooms

    else
        0

this will console Rooms, 12

Upvotes: 1

jc00ke
jc00ke

Reputation: 2585

I needed richer logging while working on an encoder, so I ended up writing a port for it. Here's an working example on Ellie and here's the code:

Main.elm

port module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Json.Encode as E exposing (Value, int, object, string)


type alias Model =
    { count : Int
    , name : String
    }


initialModel : Model
initialModel =
    { count = 0
    , name = "Foo"
    }


encodeModel : Model -> Value
encodeModel model =
    object
        [ ( "count", int model.count )
        , ( "name", string model.name )
        ]


port jsonConsole : Value -> Cmd msg


type Msg
    = ConsoleLogJson


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ConsoleLogJson ->
            let
                json =
                    encodeModel model
            in
            ( model, jsonConsole json )


view : Model -> Html Msg
view model =
    div [] [ button [ onClick ConsoleLogJson ] [ text "Log to console" ] ]


subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.batch []


init : () -> ( Model, Cmd msg )
init flags =
    ( initialModel, Cmd.none )


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , subscriptions = subscriptions
        , view = view
        , update = update
        }

index.html

<html>
<head>
  <style>
    /* you can style your program here */
  </style>
</head>
<body>
  <main></main>
  <script>
    var app = Elm.Main.init({ node: document.querySelector('main') })
    app.ports.jsonConsole.subscribe(function(json) {
      console.log(json)
    })
  </script>
</body>
</html>

I'm sure there are improvements that could be made, and I'd love to hear them!

Upvotes: 8

pdamoc
pdamoc

Reputation: 2923

Unfortunately, no. All objects are converted to strings before they are sent to the console when you use Debug.log.

You can however create a function that would output the actual object using the Native layer however, this is an undocumented API and it is advisable to use it only as a last resort.

Upvotes: 8

Tosh
Tosh

Reputation: 36030

You can use Debug.log, for example:

import Html exposing (text)

f x = x * x

main =
  let
    dummy = Debug.log "dump tuple" (33, 55, f)
  in text "Hello, World!"

Upvotes: 23

Related Questions