2

I am trying to debug my client side renderings using Console.log() (If there is an easy way to use the debug tool, do tell) but I can only view server rendered conole.logs().

I am trying to see the flow of information for this handler:

const statusHandler = async () => {
   console.log("TRYING TO SEE STUFF HERE BUT UNABLE TO")
    try {call an API
    .....
      });
    } catch (err) {
      console.log(err);
    }

This function statusHandler is called from a react component.

The page does have getServerSideProps() to initially render the page with database information.

edit

I have tried using the browser developer tools but pages refresh and I can't track the flow of information.

Please help. Thank you:)

UberNoob
  • 41
  • 1
  • 4
  • You can enable the `Preserve Logs` option in the dev tools console's settings (https://stackoverflow.com/a/50977830/1870780). This will preserve logs even after a page reload. Alternatively, you can setup debugging in your editor, see https://nextjs.org/docs/advanced-features/debugging. – juliomalves Aug 18 '22 at 08:26

1 Answers1

5

You can view you console.log() in CSR(Client Side Rendering) in Browser press F12 or RightClick and click on inspect and check in console tab.

For SSR(Server Side Rendering) you can check in terminal

Shubham Jasani
  • 147
  • 4