반응용 콘솔 로깅?

반응용 콘솔 로깅?

리액트는 처음이라서 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가 아닌 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.테이블

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

console.displaces

콘솔로 연결되는 콜스택을 표시합니다.

콘솔을 커스터마이즈하여 돋보이게 할 수도 있습니다.

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

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>

언급URL : https://stackoverflow.com/questions/40647361/console-logging-for-react