Bàn điều khiển ghi nhật ký để phản ứng?

Question

Tôi là siêu mới đối với React và tôi đang cố gắng thiết lập nó cho Meteor và ghép các thứ lại với nhau từ các nguồn khác. Một trong những nguồn khác đã thiết lập ghi nhật ký cho ứng dụng, nhưng tôi sẽ sử dụng phương pháp ES6/JSX để chỉ sử dụng mã của chúng sẽ không hoạt động đối với tôi (hoặc nó không giống như nó).

Một số mã tôi tìm thấy cho khai thác gỗ là

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

nhưng tôi nhìn thấy lỗi này

Tôi cũng đã cố gắng sử dụng react-logger và react-console-logger vô ích. Đây là mã của tôi cho thứ hai, mà tôi tin rằng nên làm việc.

import {Logger, ConsoleLogger} from 'react-console-logger'; 
const myLogger = new Logger(); 
export default class App extends Component { 
    render() { 
     myLogger.info('something witty'); 
    } 
} 

Tuy nhiên, myLogger.info('...') đang thực hiện một cuộc gọi đến node_modules/react-console-logger/lib/Logger.js đã định nghĩa là nó

Và this.logger được xác định, mặc dù tôi nhìn thấy nó được định nghĩa ở trên không?

Có ai biết tôi đang làm gì sai không? Dường như với tôi như thư viện đã sai, nhưng có lẽ nó có liên quan đến tôi bằng cách sử dụng các tệp JSX thay vì js?

Answer 1

Nếu bạn ngay sau khi giao diện điều khiển khai thác gỗ ở đây là những gì tôi muốn làm:

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

không nên có bất kỳ nhu cầu đối với những gói chỉ để làm giao diện điều khiển khai thác gỗ.

Answer 2

Dưới đây là một số giao diện điều khiển hơn đăng nhập "mẹo pro":

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

truyền cho bạn những cuộc gọi stack để dẫn đến bảng điều khiển.

Bạn thậm chí có thể tùy chỉnh console của bạn để làm cho họ nổi bật

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

Nếu bạn thực sự muốn lên cấp không giới hạn tự của bạn để báo cáo kết quả giao diện điều khiển.

Đây là bài đăng tuyệt vời về cách bạn có thể tích hợp trình gỡ lỗi chrome ngay vào trình chỉnh sửa mã của bạn!

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