This extension allows you to view server-side console.log() outputs directly in the browser's DevTools (Console tab), making debugging for Next.js projects (below version 15) more efficient and seamless.
Features
Automatically adds the use client directive in Server Components when console.log() is used, enabling browser-side logging.
Easily track logs in DevTools' Console tab without additional configuration.
Setup & Usage
Open Visual Studio Code (VSC).
Press Cmd + Shift + P to open the command palette.
Search for "Console Now" and select the command.
Open any Server Component in your Next.js project.
Add a console.log() and save the file. The use client directive will appear at the top of the file automatically.
Save the file again, and then open the DevTools Console tab in your browser to view the console.log() output.
To remove the console log, delete it from the file and save again. The use client directive will automatically be removed.
