Consignation de la console pour réagir?

Question

Je suis super nouvelle pour Réagir et je suis en train de le configurer pour Meteor et assembler des trucs ensemble à partir d'autres sources aussi. L'un de ces autres sources de configurer la journalisation de la console pour l'application, mais je vais l'ES6/JSX manière juste en utilisant leur code ne fonctionne pas pour moi (ou il ne semble pas comme il le fait).

Un peu de code que j'ai trouvé pour la journalisation est

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

mais je vois cette erreur

J'ai aussi essayé d'utiliser react-logger et react-console-logger , en vain. Voici mon code pour la dernière, qui je crois devrait fonctionner.

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

Toutefois, myLogger.info('...') est un appel à l' node_modules/react-console-logger/lib/Logger.js qui l'a défini comme

Et this.logger n'est pas défini, bien que je le vois être définis ci-dessus?

Personne ne sait ce que je fais mal? Il me semble que la bibliothèque a tort, mais peut-être qu'il a quelque chose à voir avec moi à l'aide de JSX fichiers au lieu de js?

Answer 1

Si vous êtes juste après l'enregistrement de la console, voici ce que je ferais:

 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>
    )
  }
}
 

Ces paquets ne devraient pas être utilisés uniquement pour la journalisation de la console.

Answer 2

Voici un peu plus de journalisation de la console "conseils de pro":

console.table

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

Vous montre la pile d'appel pour les menant jusqu'à la console.

Vous pouvez même personnaliser vos consoles pour les faire ressortir

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 vous voulez vraiment monter de niveau, ne limitez pas votre auto à l'instruction de console.

Voici un excellent billet sur comment vous pouvez intégrer un chrome débogueur à droite dans votre éditeur de code!

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