Console logging on ember js

Question

I would just like to ask why is it that when you print out on the console on ember it gives you a string? but if you typeof on it, it gives you a function?

ex. sample = Ember.Route.extend();

console.log(sample); // prints (subclass of Ember.Route)

console.log(typeof sample); // function

Can someone explain this please? Aside with their documentation that is hard to grasp. It's really hard to debug on ember, even with ember inspector. Is there any tool or way to properly debug ember.

Answer 1

In terms of Ember debugging, you probably already read this: https://guides.emberjs.com/release/configuring-ember/debugging/

There is a couple of great feature, what you can turn on during development, to get more information, what's happening under the hood.

You can insert in your app.js:

var App = Ember.Application.extend({
  LOG_TRANSITIONS_INTERNAL:  true,
  LOG_ACTIVE_GENERATION:     true,
  LOG_VIEW_LOOKUPS:          true,
  LOG_RESOLVER:              true,
});

Ember.run.backburner.DEBUG            = true;
Ember.ENV.RAISE_ON_DEPRECATION        = true;
Ember.LOG_STACKTRACE_ON_DEPRECATION   = true;
Ember.LOG_BINDINGS                    = true;
Ember.RSVP.on('error', function(error) {
  Ember.Logger.assert(false, error);
});

You can stop your code if you write debugger in your code. I use it quite often to figure out what's happening there.

In terms of your question, if you extend an Ember class it basically create a new function, but behave as a subclass of extended class. You can check what's happening there: https://github.com/emberjs/ember.js/blob/v1.7.0/packages/ember-runtime/lib/system/core_object.js#L536-L556

When you run your Ember app, your app gonna be wrapped in a container, so if you need access to properties or variables, you have to use this - assume your app name is 'App':

App.__container__.lookup("controller:application").get("currentRouteName")
App.__container__.lookup("controller:application").get("currentPath")
App.__container__.lookup("controller:application").get("model")

It is take a while to understand how could you debug your ember app, but worth to learn and invest more time in it, because will be quite handy later.

If you have any question, don't hesitate to comment and we can solve it.

About debugger;

It is like a breakpoint, you can stop the code. "Inspect element"/"Developer Tool" have to be open in Chrome. Little example here: http://jsbin.com/cugetoxoyira/45

Source code: http://jsbin.com/cugetoxoyira/45/edit In Line 18, there is a debugger; , so you can check in your console what is in controller or in model params. You have to type in only controller in your Console in Developer Tool of Chrome.