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:

How do I debug ClojureScript?

So here is the problem:

1. I write my *.cjs files
2. I run cljsc/build ...
3. I load up my webpage.
4. Something bad happens.
5. I open up the firefox console.
6. I get a line in the generated js, which I find incomprehensible, and I have no idea which line of the original cljs file it came from.

My question:

What is the right way to develop ClojureScript applications?

PS I've looked at ClojureScriptOne -- what I don't like about it is that it strings together a bunch of technology all at once; and I'd prefer to understand how to use each individual piece on its own before chaining it all together.

I'm comfortable with ring + moustache + compojure, [mainly because I can use my standard Clojure debugging techniques] but ClojureScript is another beast.

UPDATE: Things have changed quite a bit since this question was first asked. The proper way to debug ClojureScript applications these days is to enable source maps - http://github.com/clojure/clojurescript/wiki/Source-maps

Answer 1

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 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

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.

Answer 4

ClojureScript debugging best practices (example project & tutorial):

https://github.com/shaunlebron/How-To-Debug-CLJS

The ecosystem is still in flux, so I'm hoping to keep this updated with community input to ease the process for newcomers. It currently hits on four of the traditional methods of debugging:

• Logging - easily and descriptively log your application state
• Testing - quickly test your code without opening a web browser
• Interacting - play with your code while it's running on your web page
• Tracing - pause and step through code

Answer 5

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 6

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!")