在React中进行控制台日志记录

Question

我对React非常新，我正在尝试为Meteor设置它，并从其他来源拼凑代码。

其中一种其他来源为应用程序设置了控制台日志记录，但我正在使用ES6/JSX的方式，所以仅使用他们的代码对我来说行不通（或者看起来是这样）。

我找到的一些日志记录代码如下：

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

但是我看到了这个错误：

我还尝试使用react-logger和react-console-logger，但都没有成功。这是我对后者的代码，我相信它应该可以工作。

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

然而，myLogger.info('...')正在调用node_modules/react-console-logger/lib/Logger.js，其中定义了它。

而且 this.logger 未定义，尽管我看到它在上面被定义了?

我做错了什么？在我看来，这个库有问题，但也许与我使用JSX文件而不是JavaScript有关吗？

- adinutzyc21

---

你是需要记录日志来帮助调试/编写你的代码，还是这更像一个永久性的部分？ - patrick

只是为了帮助调试。我可以不用它，但如果连控制台日志记录都无法正常工作，我不确定我能让任何东西正常工作... - adinutzyc21

不需要重新发明轮子。这是解释一切的最佳链接。https://codeburst.io/react-native-debugging-tools-3a24e4e40e4 - HIRA THAKUR

请查看*为什么在提问时不上传代码/错误的图片？（例如，"图片应该只用于说明无法以其他方式清楚表达的问题，比如提供用户界面的截图。"*）和做正确的事情（它也涵盖了回答）。提前感谢您。 - Peter Mortensen

Answer 1

如果你只是想在控制台打印日志，这是我会做的：

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

不应该需要这些软件包仅仅为了进行控制台日志记录。

- patrick

---

你甚至可以为你的console.log信息添加样式。尝试这个console.log（'%c color message'，'color：＃f0c002'）。 - kkkkkkk

@adi 这很可能是由 ESLint 引起的 - http://eslint.org/docs/rules/no-console - patrick

我担心在我的应用程序中无处不用console.log。我更愿意使用类似于@adinutzyc21尝试使用的东西，因为使用一些日志记录组件来控制应用程序的日志级别通常是一个好习惯。对于我的项目，我使用了 watson/console-log-level ，并且使用它时没有遇到任何问题。 - Rafał Nowosielski

通常我只在调试特定问题时使用 console.log，然后再将它们删除。ESLint 还有一条规则强制要求删除它们。如果需要额外的日志记录/监控，则肯定会推荐其他方式。 - patrick

补充一下Rafals的评论，我能够像下面这样使用Watson的console-log-level组件： `import Logger from 'console-log-level';let log = Logger({level: 'trace'}); ` 请参阅https://github.com/watson/console-log-level - Eric

Answer 2

以下是一些关于控制台日志记录的“专业技巧”：

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

如果你真的想提升自己，请不要将自己局限于控制台语句。

这篇文章介绍了如何在代码编辑器中集成 Chrome 调试器，非常值得一读！

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

- user1095118

---

简单的脚本可以自动化精美的控制台：console-colors。 - vsync

不要忘记使用console.dir()来查看数组和对象！ - kmiklas

Answer 3

如果你想在JSX中记录日志, 你可以创建一个假组件，将其插入到你希望记录的地方:

// Some component with JSX and a logger inside
const App = () =>
  <ul>
    {[...Array(4)].map((v, i) => (
      console.log(i), <li key={i}>{i+1}</li>
      )
    )}
    {console.log(123)}
  </ul>

// Render
ReactDOM.render(<App />, root)

<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="root"></div>

或者只是为了好玩，作为一个组件：

const Console = prop => (
  console[Object.keys(prop)[0]](...Object.values(prop))
  ,null // ➜ React components must return something
)

// 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>

- vsync