Source maps

DEPRECATION NOTICE: Please do not edit this wiki. Instead submit pull requests to https://github.com/clojure/clojurescript-site

The up to date version of this page can be found at https://clojurescript.org/reference/source-maps

ClojureScript now supports HTML source maps so that you can debug ClojureScript directly in the browser, using the configuration option :source-map.

:source-map can be either a boolean, or if optimizations are enabled, a path to a file for the map.

Using the bin/cljsc script herein, you can run something like the following on the command line, adjusted for your project:

 $ cljsc src '{:optimizations :whitespace :output-dir "out" :output-to "main.js" :source-map "main.js.map"}'

If you are building using leiningen, a similar section in project.clj would look something like:

 :cljsbuild { 
    :builds [{:id "main"
              :source-paths ["src"]
              :compiler {
                :output-to "main.js"
                :output-dir "out"
                :optimizations :none
                :source-map true}}]})

After compilation, you may then open a HTML file linking to the generated js file in Chrome. Make sure that source maps in Chrome are enabled via the Chrome Developer Tools settings.

Source maps also work with :optimizations set to :none. In this case the :source-map value doesn't control file names. So long as the value is truth-y (cf. the leiningen example above), an individual source map file will be generated for every ClojureScript source file.

It's important to note there are some source map option restrictions when using an :optimizations setting other than :none. In these cases :output-to, :output-dir, and :source-map must all share the exact same parent directory. The generated JavaScript file (:output-to) will contain a line at the end linking it to its source map like so:

//# sourceMapping=<sourceMapURL>

The sourceMapURL is the :source-map path, relative to :output-to, since that is how the browser will then resolve it. For example, when given:

{:output-to "resources/public/js/compiled/main.js"
 :output-dir "resources/public/js/compiled"
 :optimizations :simple
 :source-map "resources/public/js/compiled/main.js.map"}

The resulting sourceMapURL will be: main.js.map.

Web Server integration

All source files will get copied into :output-dir so that they can be resolved, however this is not useful in the case where you have a web server. :source-map-path can be used to define an arbitrary path prefix. So instead of source map file references resolving to something like resources/public/js/out you can instead instead specify :source-map-path "js/out".