web-dev-qa-db-fra.com

Consignation de la console pour réagir?

Je suis super nouveau pour React et j'essaie de le configurer pour Meteor et de rassembler des éléments d'autres sources. Une de ces sources a configuré la journalisation de la console pour l'application, mais je vais utiliser la méthode ES6/JSX afin que le simple fait d'utiliser leur code ne fonctionne pas pour moi (ou cela ne semble pas être le cas).

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

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

mais je vois cette erreur cannot find module './dumy'

J'ai aussi essayé d'utiliser react-logger et react-console-logger en vain. Voici mon code pour ce dernier, qui, à mon avis, devrait fonctionner.

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

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

picture of code since copy-paste doesn't work

Et this.logger n'est pas défini, même si je le vois être défini ci-dessus?

Est-ce que quelqu'un sait ce que je fais mal? Il me semble que la bibliothèque a tort, mais peut-être que cela a quelque chose à voir avec l'utilisation de fichiers JSX au lieu de js?

javascriptreactjsmeteorloggingjsx
36
adinutzyc21

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.

60
patrick

Voici quelques astuces pour la journalisation de la console:

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.table

console.trace

Affiche la pile d'appels pour accéder à la console.

console.trace

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’);

console.todo

Si vous voulez vraiment passer au niveau supérieur, ne vous limitez pas à la déclaration de la console.

Voici un excellent article sur la manière d’intégrer un débogueur chrome dans votre éditeur de code!

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

48
user1095118

Si vous voulez vous connecter à l'intérieur JSX, vous pouvez créer un composant factice
quels plugs où vous souhaitez vous connecter:

const Console = prop => (
  console[Object.keys(prop)[0]](...Object.values(prop))
  ,null
)

// Some component with JSX and a logger inside
const App = () => 
  <div>
    <p>imagine this is some component</p>
    <Console log='foo' />
    <p>imagine another component</p>
    <Console warn='bar' />
  </div>

// Render 
ReactDOM.render(
  <App />,
  document.getElementById("react")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
0
vsync