Newbie: How to extend console.log functionalities the Ember way?

Design
1

Hi everybody

I am new to Ember and Javascript (I do have a C++, Java, Rails background)

I often use console.log() from my code (route, component, controller JS files) to post helpful messages to Chrome console.

After finding out that I can use custom console stylesheets in Chrome to improve readability of my messages (see here) I now often log like this:

// inside my-component.js console.log(‘%cMy function is called’, ‘color: green; font-size: large’);

What I am after, is to make a simple JS class (or any other appropriate JS entity for that matter) with logging functions (log, info, error etc) which apply the styles automatically.

Ideally, I would like to log like this:

// inside my-component.js
// somehow import my pretty-logging code
myConsole.log('My function is called); // this should print the message in chrome console in green and with large font

So here is my JS and Ember question wrapup:

  1. Should I somehow extend the built-in console ember object with functions like console.mylog, console.myInfo etc?
  2. Would it be a better idea to somehow override the built-in Ember console functions and add styles of my own?
  3. WHERE should I put the new code/overrides? Where does Ember expect my code and how do I import it to the rest of my code?
  4. Will logging from .hbs files be possible by the way you might suggest?

I know these questions are a bit generic, however please note that my purpose here is NOT to get a snippet or a quick hack to solve the problem at hand. What I would rather know is the best approach for adding custom code to my Ember JS project the-Ember-way thus making me a better Ember programmer.

many thanks in advance

George

1 Like
2

Ember already provides loggers for that Ember - 4.6 - Ember API Documentation

3

Thanks for your quick reply. Not sure if I am missing something, but following the link you provided I read:

EMBER.LOGGER CLASS

Inside Ember-Metal, simply uses the methods from imports.console. Override this to provide more robust logging functionality.

Well my question has to do with how to override the current logger (e.g. where ember expects me to place my code, how to import it to other ember js files etc). You can check again my numbered points if you like.

thanks again!