web-dev-qa-db-ja.com

反応のコンソールロギング？

私はReactが初めてであり、Meteor向けにセットアップして、他のソースからのものをつなぎ合わせようとしています。これらの他のソースの1つは、アプリのコンソールロギングを設定しますが、ES6/JSXの方法を使用しているので、それらのコードを使用するだけでは機能しません（または機能しないようです）。

ロギング用に見つけたコードは

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

しかし、私はこのエラーを見ています cannot find 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を呼び出しています

picture of code since copy-paste doesn't work

そして、this.loggerは未定義ですが、上記で定義されていると思いますか？

誰かが私が間違っていることを知っていますか？ライブラリには間違っているように見えますが、jsではなくJSXファイルを使用していることに関係があるのでしょうか。

javascriptreactjsmeteorloggingjsx
36
adinutzyc21

コンソールログの直後にいる場合は、次のようにします。

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

コンソールロギングを行うためだけにこれらのパッケージが必要になるべきではありません。

60
patrick

コンソールロギングの「プロのヒント」を次に示します。

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

コンソールに至るまでの呼び出しスタックを表示します。

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

console.todo

本当にレベルアップしたいのなら、自分をコンソールステートメントに制限しないでください。

コードエディターにchromeデバッガーを直接統合する方法についての素晴らしい投稿です。

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

48
user1095118

inside JSXをログに記録する場合は、ダミーコンポーネントを作成できます
ログを記録したい場所にプラグインします：

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