Tips for Debugging Ember CLI

This will likely be a living document, but I thought I'd dump this out for the benefit of others.

Ember CLI Notes

Broccoli Visualizations

Generate a visual view of your broccoli build tree.

BROCCOLI_VIZ=true ember build dot -Tpng -o graph.0.png

Broccoli stew debug

broccoli-stew - use `debug` to leave around tree folders in various steps/hooks of build see:

const debug = require('broccoli-stew').debug;  
commonLess = debug(commonLess, {name: 'commonLess'});  

Running with debug statements printing to console

DEBUG=\* ember s

Node Built-in Debugger

node debug node_modules/ember-cli/bin/ember <command>

  • c: continue
  • s: step in
  • o: step out
  • n: next

Node Inspector

You can debug ember-cli using the chrome debugger via node inspector. (uses chrome)

npm -g install node-inspector

node-debug node_modules/ember-cli/bin/ember <command>

edit: node now has first class support for node inspector so you can just run:

node --inspect --debug-brk node_modules/ember-cli/bin/ember <command>


Debugging Phantom

testem.js: phantomjs_debug_port: 9234

http://localhost:9234 will stop at debugger; statements