用于react的控制台日志记录？

IT技术 javascript reactjs meteor logging jsx
2021-03-26 22:53:49

我是 React 的新手，我正在尝试为 Meteor 设置它，并将其他来源的东西拼凑在一起。这些其他来源之一为应用程序设置了控制台日志记录，但我将采用 ES6/JSX 方式，因此仅使用他们的代码对我不起作用（或者它看起来不像）。

我发现的一些用于日志记录的代码是

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

但我看到了这个错误 找不到module“./dumy”

我也尝试使用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 文件而不是 js 有关系？

3个回答

如果您只是在控制台登录之后，我会这样做：

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

不需要这些包只是为了进行控制台日志记录。

@RafałNowosielski 通常我只console.log在调试特定问题时使用，然后将它们删除。ESLint 也有一个强制删除它们的规则。如果需要额外的日志记录/监控，那么肯定会推荐其他方式。
2021-06-01 22:53:49
您甚至可以向 console.log 消息添加样式。试试这个console.log('%c color message', 'color: #f0c002')
2021-06-02 22:53:49
要添加到 Rafals 评论，我可以使用 watson 控制台日志级组件，如下所示：import Logger from 'console-log-level'; let log = Logger({level: 'trace'}); 请参阅github.com/watson/console-log-level
2021-06-07 22:53:49
我会担心在我的应用程序中使用 console.log。我宁愿使用类似于@adinutzyc21 尝试使用的东西，因为使用一些允许控制应用程序日志级别的日志记录组件通常是一种很好的做法。对于我的项目，我使用了watson/console-log-level，使用它我没有遇到任何问题。
2021-06-13 22:53:49
@adi 可能是由 ESLint 引起的 - eslint.org/docs/rules/no-console
2021-06-17 22:53:49

以下是更多控制台日志记录“专业提示”：

控制台表

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

控制台.todo

如果您真的想升级，请不要将自己限制在控制台语句中。

这是一篇关于如何将 chrome 调试器直接集成到代码编辑器中的好文章！

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

自动化花哨控制台的小脚本：console-colors
2021-05-26 22:53:49
不要忘记console.dir()数组和对象！
2021-06-09 22:53:49

如果你想在JSX 中登录，你可以创建一个虚拟组件
来插入你想登录的地方：

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>

其它你可能感兴趣的问题
上一篇材质 UI 和网格系统 下一篇调试时，我可以从浏览器控制台访问 Redux 商店吗？