javascript - tab - ¿Consola de registro para reaccionar?

title html

Question

Soy súper nuevo en React y estoy tratando de configurarlo para Meteor y armar cosas de otras fuentes también. Una de estas otras fuentes configura el registro de la consola para la aplicación, pero voy por el camino de ES6 / JSX, por lo que el uso de su código no funcionaría para mí (o no parece que así sea).

Algún código que encontré para el registro es

import Logger from ''simple-console-logger'';
Logger.configure({level: ''debug''});

pero estoy viendo este error

También intenté usar react-logger y react-console-logger sin éxito. Aquí está mi código para este último, que creo que debería funcionar.

import {Logger, ConsoleLogger} from ''react-console-logger'';
const myLogger = new Logger();
export default class App extends Component {
    render() {
        myLogger.info(''something witty'');
    }
}

Sin embargo, myLogger.info(''...'') realiza una llamada a node_modules/react-console-logger/lib/Logger.js que se define como

¿Y este this.logger no está definido, aunque lo veo definido arriba?

¿Alguien sabe lo que estoy haciendo mal? A mi me parece que la biblioteca lo tiene mal, pero tal vez tiene algo que ver conmigo usando archivos JSX en lugar de js?

Answer 1

Aquí hay algunos consejos más para el registro de la consola:

mesa de consola

var animals = [
    { animal: ''Horse'', name: ''Henry'', age: 43 },
    { animal: ''Dog'', name: ''Fred'', age: 13 },
    { animal: ''Cat'', name: ''Frodo'', age: 18 }
];

console.table(animals);

console.trace

Te muestra la pila de llamadas para acceder a la consola.

Incluso puedes personalizar tus consolas para resaltarlas.

console.todo = function(msg) {
    console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
    console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

Si realmente quieres subir de nivel, no te limites a la declaración de la consola.

¡Aquí hay una excelente publicación sobre cómo puede integrar un depurador de Chrome directamente en su editor de código!

https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037

Answer 2

Si solo está después del registro de la consola, esto es lo que haría:

export default class App extends Component {
  componentDidMount() {
    console.log(''I was triggered during componentDidMount'')
  }

  render() {
    console.log(''I was triggered during render'')
    return ( 
      <div> I am the App component </div>
    )
  }
}

No debería haber ninguna necesidad de esos paquetes solo para hacer el registro de la consola.