29

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

dnolen
  • 18,496
  • 4
  • 62
  • 71
user1383359
  • 2,673
  • 2
  • 25
  • 32

5 Answers5

26

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.

dnolen
  • 18,496
  • 4
  • 62
  • 71
19

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 - https://clojurescript.org/reference/source-maps

Lucio Assis
  • 403
  • 1
  • 5
  • 14
Hendekagon
  • 4,565
  • 2
  • 28
  • 43
6

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.

leontalbot
  • 2,513
  • 1
  • 23
  • 32
6

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

StackExchange What The Heck
  • 2,656
  • 7
  • 39
  • 51
film42
  • 1,095
  • 12
  • 22
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!")

ktsujister
  • 471
  • 5
  • 12