如何使用nodejs/npm start查看控制台日志输出？

Question

对于React/Node/npm start的使用我还不是很熟悉。用npm start启动服务器后可以成功显示我的React代码，但是我需要进行一些调试。然而，我的控制台日志并没有输出到浏览器控制台上。接下来，我想去检查我的终端（我认为这是Node console.log 输出的地方），但是由于我使用了npm start，因此从中启动应用程序的终端卡在了这个界面上：

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://[ip_address_here]:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

因此，我无法在此屏幕上阅读任何控制台输出。我觉得这应该是一个非常基础的修复程序，我可能只是忽略了一些非常明显的东西，但有人可以帮助我吗？谢谢。

编辑：有人要求我分享一些代码，这里是它：

这是我的App.js文件的片段：

import React from 'react';

//quick class
class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            testRows : null
        }

        this.getTest = this.getTest.bind(this);
    }

    //get some rows from my api using a local database with sqlite3
    async getTest(){
        try{
            console.log("hello?");
            const response = await fetch('http://localhost:3000/api/test');
            if(response.ok){
                const JSONresponse = response.json();
                console.log(JSOnresponse);
                this.setState({testRows : JSONresponse});
            }
            else{
                this.setState({testRows: "test error"});
                console.log('There was an error with the fetch');
            }
        }
        catch(error){
            console.log(error);
        }
    }

    //render some text, a button, and the result
    render(){
        let testResults;
        if(this.state.testRows){
            testResults = Object.keys(this.state.testRows).map((data) => {
                    return <h1>{data.name}</h1>
                }
            )
        }
        else{
            testResults = "null";
        }


        return(
            <div>
                <h2>Some testing going on here</h2>
                <button onClick={this.getTest}>
                    Press me for test!
                </button>
                <h3>{testResults}</h3>
            </div>
        );
    }
}

export default App;

这是我的api.js文件的片段：

apiRouter.get('/test', (req, res, next) => {
    db.get('SELECT * FROM Test', (error, rows) => {
        if(error){
            console.log(error);
        }
        else{
            console.log("got the test");
            console.log(rows);
            res.send(rows);
        }
    })
})

路由器已安装并且代码的其他部分也已就绪，但控制台日志未在任何地方显示（dev工具控制台或终端）。

- wotocem

---

直接从客户端代码中记录日志将会在Chrome DevTools中显示。 - Andrew Li

你在React模块中记录的任何内容都应该显示在浏览器开发工具控制台中。给我们展示一个例子。 - charlietfl

你能给我们展示一下代码吗？特别是你尝试使用console.log的地方。 - Rohit Kashyap

apiRouter 是如何定义的？ - Bergi

不，当我按下按钮时，我看不到testResults，但它不是null，这意味着我的api正在返回一些内容。 apiRouter使用express.Router()定义，并在需要apiRouter的不同文件中挂载。 - wotocem

Answer 1

据我所理解，您有两个运行在不同位置的代码片段。为了执行代码，两者都应该被提供。 App.js 文件似乎是一个 React 应用程序（前端），应该在浏览器上运行。要查看控制台消息，请执行以下操作：

• 打开终端并提供应用程序：npm start
• 打开浏览器
• 访问指定的 URL
• 打开开发人员工具（通常是 F12）

此外，请尝试将日志放置在类声明之后或其他地方以隔离可能存在的其他问题。

另一方面，api.js 是后端代码，因此应将控制台消息记录在运行它的终端中。假设您拥有完整的文件 api.js 而不仅仅是那个片段，则应执行以下操作才能运行服务器并查看日志：

• 在终端上提供 API：node api.js
• 打开浏览器
• 访问指定的 URL
• 消息将显示在终端上

我会提出同样的建议，如果您将日志命令放在脚本开头，消息将显示为服务器启动，无需转到浏览器。隔离问题是解决问题的好方法。

如果您没有完整的api.js，请尝试一个简单的片段：Getting Started。只需在开头或“Hello World”行之后添加console.log('Console says hi!')，如果您想在打开浏览器后查看它，则可以这样做。

最后一点是确保前端和后端不在同一端口（3000）上提供服务。

- diegopso