Access content property in the debugger - ember.js

Question

how can i access the content property of a controller within the chrome debugger.
I really try to find a way to debug my application. So far i can't find a way to do that.
Thank you
Alex

Answer 1

add the statement
debugger;
in the method you want to debug,
Open Google Chrome, CTRL+SHIFT+i
Hit the URL of your application, navigate to the state where you think the code would run
Google Chrome automatically stops at the debugger; statement and focuses you to the sources/scripts tab as you can see in the picture
Inside the Watch expression tab click on the "+" too evaluate code in your case it would be
this.get("content");
As long as you have this breakpoint you can switch to the console panel and execute the code in that context, whenever you are done you can either close the panel by clicking CTRL+SHIFT+I or the close button down there, you can add breakpoints manually by clicking on the line number as well , Hope this helps
For more info

Answer 2

I'm using Ember Extentions which is not ready yet but certainly usable.

Answer 3

There are 2 possibilities
Use the Ember Inspector Tool for Chrome: It is not officially released yet, but from what i have heard it seems usable. I had no time to try it myself yet, but here is an article telling you how to install and use it.
Get access to your controller in the console of your browser. And then examine it as you like. Here is the code to get access to your controller.I use it myself in my app for debugging:
// i assume that your Ember.Application is stored in the global var App
var App = Ember.Application.create({
getController : function(name){
return this.__container__.lookup("controller:" + name);
}
});
// now you can use it like this. To get the users controller (App.UsersController) just use this in the console:
App.getController("users")