使用 nodejs/npm start 在哪里查看 console.log 输出？答案

【问题标题】：Where to view console.log output using nodejs/npm start?使用 nodejs/npm start 在哪里查看 console.log 输出？
【发布时间】：2019-11-23 01:46:59
【问题描述】：

反应/节点/使用 npm start 启动服务器非常新。使用 npm start 启动服务器工作并显示我的反应代码，但我需要做一些调试。但是，我的 console.logs 没有输出到浏览器控制台。之后，我想检查我的终端（我认为这是 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 文件的 sn-p：


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 文件的 sn-p：


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

路由器已安装，其他所有代码都在代码的其他部分中，但那里的 console.logs 也没有显示在任何地方（开发工具控制台或终端）。

【问题讨论】：

直接从您的客户端代码内部记录将转到 Chrome DevTools
您在反应模块中登录的任何内容都应显示在浏览器开发工具控制台中。给我们看一个例子
你能给我们看看代码吗？特别是，在您尝试 console.log 的地方。
apiRouter 是如何定义的？
你能在页面上看到 testResults 吗？

标签： javascript node.js reactjs npm console

【解决方案1】：

据我了解，您有两段代码在不同的地方运行。为了执行代码，两者都应该被提供。

App.js 文件似乎是应该在浏览器上运行的 React 应用程序（前端）。要查看控制台消息，您应该：

打开终端并服务应用程序：npm start
打开浏览器
访问指定的 URL
打开开发者工具（通常是 F12）

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

另一方面，api.js 是后端代码，因此控制台消息应该记录在运行它的终端中。假设你有完整的文件api.js 而不仅仅是那个 sn-p，来运行服务器并查看你应该看到的日志：

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

我会做同样的建议，如果您将 log 命令放在脚本的开头，则消息将在服务器启动时显示，而无需转到浏览器。孤立问题是解决问题的好方法。

如果您没有完整的api.js，请尝试简单的 sn-p：Getting Started。只需在开头添加console.log('Console says hi!')，如果您想在打开浏览器后看到它，也可以在“Hello World”行之后添加。

最后一点是确保前后不在同一个端口 (3000) 上提供服务。

【讨论】：