Skip to content

Instantly share code, notes, and snippets.

@ZeroDragon
Created July 26, 2018 21:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ZeroDragon/6468f18935dbce61c22b28f770ae9c71 to your computer and use it in GitHub Desktop.
Save ZeroDragon/6468f18935dbce61c22b28f770ae9c71 to your computer and use it in GitHub Desktop.
Replace console.log
/* globals ENV */
let environment = 'dev'
if (typeof ENV === 'undefined') environment = 'prod'
const logger = {}
const sty = color => `padding:4px;color:#fff;background-color:${color};`
const loggerTypes = {
debug: sty('green'),
info: sty('blue'),
warn: sty('orange'),
error: sty('red')
}
let innerLogger = () => {}
if (console && console.log) {
innerLogger = console.log
}
Object.keys(loggerTypes).forEach(type => {
const style = loggerTypes[type]
logger[type] = (...params) => {
if (environment === 'dev') {
innerLogger(`%c${type.toUpperCase()}`, style, ...params)
}
}
})
if (console && console.log) {
console.log = logger.info
}
window.logger = logger
@ZeroDragon
Copy link
Author

Este es un mejor logger para frontend, expone en global el objeto logger con los métodos debug, info, warn y error. Alternativamente redirige las llamadas de console.log a logger.info.
Mientras tu ENV variable (global, pasada por webpack u otro lado) sea 'dev', los logs van a salir en la consola. Cuando se hace el build a prod todos los logs desaparecen para quitar basura de la consola

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment