How to Debug ClojureScript

Question

I apologize for this seemingly stupid question, but I\'ve been playing with ClojureScript on and off for a few weeks now, and I can\'t figure out this one simple question:

Answer 1

If you want to use Chrome Debugger, you can use the following...

(defn debugger []
  (js/eval "debugger"))

(debugger)

this is very much a hack, but it will active chrome's debug mode.

Remember though, Clojure Script uses namespaces, which means if you created some variable thing, then it will be found in my.namespace.thing in chrome console (as expected).

Answer 2

UPDATED: Using the compiler directly is now straightforward. But lein-cljsbuild is still very useful.

Use lein-cljsbuild. You can write different builds (testing, development, release). You can auto-watch files so they recompile quickly as you change them. You can easily use browser repl to evaluate code directly in the browser. You can manage dependencies.

Specifically related to your question - lein-cljsbuild also passes along sensible warning defaults to the compiler so that you get verbose and accurate warnings before you actually run the code in the browser.

Answer 3

UPDATE: I've taken the liberty to change the original answer since it is so woefully out of date and I cannot unmark this answer and mark a new one.

To debug ClojureScript use source maps - http://github.com/clojure/clojurescript/wiki/Source-maps

Answer 4

I'm using piggieback and connect my brepl(browser repl) to my nrepl.

This way, you can test your cljs code on your nrepl instance to get quicker feedback. You can even execute some cljs scripts within nrepl that makes changes to dom. As for state of variables, I use (js/console.log variable) like Hendekagon mentioned. Also, as dnolen has pointed out, if you compile with debug mode (:optimization :whitespace), then generated javascript becomes easier to understand, so I do breakpoints on chrome js environment.

[added:2013-07-18] adding brief steps to setup nrepl-brepl

1. I setup brepl environment with help of below tutorial. https://github.com/magomimmo/modern-cljs/blob/master/doc/tutorial-02.md

   in short, you'll need below snippet somewhere in your clojurescript code.

   (repl/connect "http://localhost:9000/repl")
   

2. then open nrepl in emacs(I'm using M-x nrepl-jack-in)

3. Enter below in your nrepl

   (do
    (require 'cljs.repl.browser)
    (cemerick.piggieback/cljs-repl
      :repl-env
      (doto (cljs.repl.browser/repl-env :port 9000)
        cljs.repl/-setup)))
   

4. You need to show the page that has your cljs running on your browser.

5. test if your nrepl is working correctly by executing below on nrepl. (js/alert "I'm ready!")

Answer 5

Recently (Oct. 27 2013) David Nolen released a blog post suggesting a great setup for a tight feedback loop and a good debugging experience with ClojureScript.

http://swannodette.github.io/2013/10/27/the-essence-of-clojurescript/

"This short post will get you from zero to developing source mapped ClojureScript with instant recompiles on file save."

Hope that could also help.