私はReactが初めてであり、Meteor向けにセットアップして、他のソースからのものをつなぎ合わせようとしています。これらの他のソースの1つは、アプリのコンソールロギングを設定しますが、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
は未定義ですが、上記で定義されていると思いますか?
誰かが私が間違っていることを知っていますか?ライブラリには間違っているように見えますが、jsではなくJSXファイルを使用していることに関係があるのでしょうか。
コンソールログの直後にいる場合は、次のようにします。
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.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
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>