how to debug reflex-dom programs-

So I just discovered this library and thought it might be awesome for building UI's. Here is a small exercise I tried to implement when learning this library. Basically it tries to open a directory on the local file system and displays all the files in this directory. It compiles with no problem but when I open the index.html it just shows a blank page. I have no idea how to debug the program. Here is the code:

{-# LANGUAGE OverloadedStrings #-}
import           Reflex.Dom
import qualified Data.Text as T
import           System.Directory
import           System.FilePath
import           Control.Monad
import           Data.List (map)


main :: IO ()
main = do
  files <- getDirectoryContents "/"
  let names = map (T.pack . show) files
  mainWidget $ body  names

body :: MonadWidget t m => [T.Text] ->  m ()
body files = el "div" $ do
  el "h2" $ text "Reflex File Test"
  el "ul" $ do
    let lables = map text files
    mapM_ (el "li")  lables

Solution

A good first step in debugging ghcjs problems is to check the browser console. In this case you will see : "/: getDirectoryContents: failed (operation unsupported on this platform)" .

This makes sense. The code is running in the browser - not on the server, or directly on the client. So the whole file system concept does not really apply here.