source_map_guide.md

Edit your cljsbuild compiler options and add a source map output location. Wherever you put it, it needs to be accessible by the browser

: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"
                       }}]}

Note that if you use the :source-map key, you cannot use :optimizations :whitespace, you must use :simple or :advanced.

Now run your lein cljsbuild once dev as per normal

Open the generated javascript file, resources/public/js/bin-debug/main.js in this case, and look for the source-map comment at the bottom. It should look like:

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

That path tells the browser where to get the source map for the js file, relative to the js file. That means this path probably won't work, since the resources/public/ is probably just mounted at /. Edit the url as appropriate, e.g. //@ sourceMappingURL=/js/bin-debug/main.js.map.merged

Now you'll need to edit the sources key in main.js.map.merged as well for the same reasons. It'll look something like this:

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

The browser will try to open this file when looking for any symbols originating from flow.cljs. The browser doesn't have access to your file system for source maps though, so you'll have to edit this file as well. Change all of the entries (as appropriate) to something like: "/src/cljs/settings/flow.cljs"

Great, now the browser can read your javascript, find the source map, and map symbols back to their originating file, but it still can't open the files. So you'll have to do one more operating: cp -r src resources/public (obviously, don't do this for production deploys, please).

Now when you load up the browser, you should see source maps in action, and be able to click back to your clojurescript code.