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 graph.0.dot -o graph.0.png

Broccoli stew debug

broccoli-stew - https://github.com/stefanpenner/broccoli-stew use `debug` to leave around tree folders in various steps/hooks of build see: https://dockyard.com/blog/2015/02/02/debugging-a-broccoli-tree

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

https://spin.atomicobject.com/2015/09/25/debug-node-js/

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>

see: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

Debugging Phantom

testem.js: phantomjs_debug_port: 9234

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

https://github.com/testem/testem/blob/master/README.md#phantomjs