控制台记录反应？
adi*_*c21 43 javascript logging jsx meteor reactjs
我是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文件而不是js有关？
pat*_*ick 67
如果你刚刚在控制台记录之后这就是我要做的事情:
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>
)
}
}
不应该只需要那些包进行控制台日志记录.
- 您甚至可以在console.log消息中添加样式.试试这个`console.log('%c color message','color:#f0c002')` (5认同)
- 我会担心在我的应用程序中使用console.log.我宁愿使用类似于@ adinutzyc21尝试使用的东西,因为使用一些允许控制应用程序日志级别的日志记录组件通常是一种很好的做法.对于我的项目,我使用了[watson/console-log-level](https://github.com/watson/console-log-level)并且我没有遇到任何使用它的问题. (3认同)
- 可能由ESLint引起的@adi - http://eslint.org/docs/rules/no-console (2认同)
- @RafałNowosielski通常，我在调试特定问题时只使用`console.log`，然后将其删除。ESLint还具有强制删除它们的规则。如果需要其他日志记录/监视，那么绝对建议使用其他方法。 (2认同)
- 要添加到Rafals注释,我能够使用watson console-log-level组件,如下所示:`import logger from'console-log-level'; let log = Logger({level:'trace'}); `参见https://github.com/watson/console-log-level (2认同)
use*_*118 55
这里有一些更多的控制台记录"专业提示":
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
显示通向控制台的调用堆栈.
您甚至可以自定义控制台以使其脱颖而出
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
- 不要忘记数组和对象的 ``console.dir()`` ！ (3认同)
vsy*_*ync 12
如果你想在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>