`--debug` expand contract arrows appear as: 'â–¾' when html header doesn't include meta 'charset="UTF-8"'

NickAger commented 7 years ago

Tested in 0.18 on Safari 10.0.1 and Chrome 54.0.2840.98

In an empty folder create a modified version of http://elm-lang.org/examples/buttons as Main.elm as:

module Main exposing (..)

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)

main =
    beginnerProgram { model = { value = 0 }, view = view, update = update }

type alias Model =
    { value : Int
    }

view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (toString model.value) ]
        , button [ onClick Increment ] [ text "+" ]
        ]

type Msg
    = Increment
    | Decrement

update msg model =
    case msg of
        Increment ->
            Model (model.value + 1)

        Decrement ->
            Model (model.value - 1)

generate elm.js with: elm make Main.elm --output elm.js --debug

embed in an minimal html page:

<html>
<head>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="elm.js"></script>
<script type="text/javascript">
    var mainDiv = document.getElementById('main');
    Elm.Main.embed(mainDiv);
</script>
</body>
</html>

Open the above html in a browser
Open the debugger - Explore History
Notice the debugger window shows:
```
â–¾{
value = 0
}
```

rather than:

▾{
value = 0
}

adding the meta tag to the html <head>:

<meta charset="UTF-8">

causes the correct expand/contract arrows to be show.

Perhaps <meta charset="UTF-8"> is a documented requirement that I've missed?
Could the debugger window include <meta charset="UTF-8"> in its <head>?
If <meta charset="UTF-8"> should be added to the debugger window html, I'm happy to look into this.

process-bot commented 7 years ago

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

evancz commented 7 years ago

Duplicate of https://github.com/elm-lang/virtual-dom/issues/52

elm-lang / elm-make

`--debug` expand contract arrows appear as: 'â–¾' when html header doesn't include meta 'charset="UTF-8"' #131