Beandipper.github.io

Testing out source-maps with clojurescript

So I heard about getting source maps working with clojurescript and after asking around on #clojure seangrove was nice enough to help me out. I'm basically hijacking the gist that @sgrove sent me so all credit is to him. This will get you up and running with clojurescript source-maps, but it is still a work in progress so don't expect it to be perfect. I believe the correct line reference may be off by one for example.

Using lein cljsbuild, lein will create a .map file which can be used after enabling source-map debugging in browsers. Here is a good intro if you aren't really sure what source maps are about.. Now to get started:

1. Setup your project.clj

Basically what you have to do here is to add the location where a source map is located with the option :source-map. You also need the :output-dir and :id options as well. Notice that the :optimizations are set to :simple as only works tested with :simple or :advanced compilation. Do not use :optimizations :whitespace.

:cljsbuild {:test-commands {"unit-tests" ["runners/phantomjs.js"
                                        "resources/public/js/vendor/handlebars-1.0.rc.1.min.js"
                                        "resources/private/js/unit-test.js"]}
          :builds
          [{:source-paths ["src/cljs"],
            :id "dev",
            :compiler {:pretty-print true,
                       :output-dir "resources/public/js/bin-debug",
                       :output-to "resources/public/js/bin-debug/main.js",
                       :externs ["externs/jquery.js"
                                 "resources/externs/stripe.js"
                                 "resources/externs/handlebars.js"
                                 "resources/externs/misc.js"],
                       :optimizations :simple
                       :source-map "resources/public/js/bin-debug/main.js.map"
                       }}]}

Now run lein cljsbuild once dev and lein lein should produce your map where you specified.

2. Edit generated javascript file

Note: all files specified need to be available from the server

If lein compiled everything you should have the map(here: main.js.map) and an outputted javascript file(:output-to option from above). For now this file has to be edited by hand, changing the line at the bottom of the file to an address relative to the outputted js file like so:

//@ sourceMappingURL=/js/bin-debug/main.js.map.merged

This has to be done because resources/public/ is probably mounted at /

3. Edit the generated map file

The addresses in the main.js.map.merged file need to be changed similarly to the previous step so a relative path available on the server.

{"version":3,
 "file":"resources/public/js/bin-debug/main.js.map",
 "sources":
 ["/Users/sgrove/src/example_clojure_app/src/cljs/settings/flow.cljs",...]

Open the file up and change the absolute paths to relative paths available from the front-end. If there are other paths pointing to jar files for example in maven repositories, you can ignore them.

4. copy over clojurescript directories

Finally, because the clojurescript files aren't available by the browser front-end we have to additionally copy them over to a public directory to make them publicly available like the previous steps. _Note: Do not do this for production as anybody can see your source! Do a simple copy of your clojurescript directory structure like so:

cp -r src resources/public

Now after enabling source-map debugging in your browser(see link in beginning) you should see be able to debug and set breakpoints in your clojurescript code from the browsers debugger.

Once again thanks to Sean Grove!.