javascript - Where to view console.log output using nodejsnpm start? - Stack Overflow

admin管理员组

文章数量:1316974

very new to react/node/using npm start to start a server. Using npm start to start the server works and displays my react code, but I need to do some debugging. However, my console.logs aren't outputting to the browser console. After that, I thought to check my terminal (which i think is where node console.log outputs to), but since I used npm start, the terminal that I launched the application from is stuck on this screen:

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.

And therefore, I cannot read any console output on this screen. I feel like this should be a super basic fix and I'm probably just overlooking something extremely obvious, but could somebody help me out here? Thanks.

EDIT: I was asked to share some code, here it is:

Here is a snippet of my App.js file:

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;

Here is a snippet of my api.js file:

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

The router is mounted and everything else in other parts of the code, but the console.logs there don't show up anywhere (dev tools console or terminal) either.

very new to react/node/using npm start to start a server. Using npm start to start the server works and displays my react code, but I need to do some debugging. However, my console.logs aren't outputting to the browser console. After that, I thought to check my terminal (which i think is where node console.log outputs to), but since I used npm start, the terminal that I launched the application from is stuck on this screen:

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.

And therefore, I cannot read any console output on this screen. I feel like this should be a super basic fix and I'm probably just overlooking something extremely obvious, but could somebody help me out here? Thanks.

EDIT: I was asked to share some code, here it is:

Here is a snippet of my App.js file:

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;

Here is a snippet of my api.js file:

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

The router is mounted and everything else in other parts of the code, but the console.logs there don't show up anywhere (dev tools console or terminal) either.

• javascript
• node.js
• reactjs
• npm
• console

Share Improve this question Follow edited Jul 13, 2019 at 19:23 wotocem asked Jul 13, 2019 at 17:29 wotocemwotocem 15111 gold badge11 silver badge66 bronze badges 7

• 2 logging from directly inside your clientside code would go to Chrome DevTools – Andrew Li Commented Jul 13, 2019 at 17:31
• 1 Anything you log in your react modules should show in browser dev tools console. Show us an example – charlietfl Commented Jul 13, 2019 at 17:35
• Can you show us the code? Particularly, where you are trying to console.log. – Rohit Kashyap Commented Jul 13, 2019 at 17:38
• how is apiRouter defined? – Bergi Commented Jul 13, 2019 at 19:33
• Can you see the testResults at the page? – onuriltan Commented Jul 13, 2019 at 19:39

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 1 +50

From what I understood you have two pieces of code running in different places. Both should be served in order to execute the code.

The App.js file seems to be a React App (frontend) that should run on the browser. To see the console messages you should:

• Open the terminal and serve the App: npm start
• Open the browser
• Visit the URL indicated
• Open the Developer Tools (usually F12)

Also, try to place the log right after the class declaration or somewhere else to isolate possible other problems.

The api.js on the other hand is a backend code, so the console messages should be logged in the terminal where it is running. Assuming you have the plete file api.js and not just that snippet, to run the server and see the logs you should:

• On the terminal and serve the API: node api.js
• Open the browser
• Visit the URL indicated
• The message will show up on the terminal

I will do the same remendation, if you place the log mand at the beginning of the script the message will be shown as the server start, without the need to go to the browser. Isolating problems is a good way to tackle them.

If you don't have the full api.js, try a simple snippet: Getting Started. Just add the console.log('Console says hi!') at the beginning, or after the "Hello World" line if you want to see it after opening the browser.

A final remark would be to make sure front and back are not being served on the same port (3000).

本文标签： javascriptWhere to view consolelog output using nodejsnpm startStack Overflow