This is the package.json after npx create-next-app: Get Started with Debugging JavaScript in Chrome DevToolsĭid you enjoy this post? Any advice as for Next.js or Node.js debugging? Add a thank you note or advice in the comments and I'll reply :).How to use VS Code or Chrome debugging tools is better explained by their own docs: Whenever you do so and the underlying code runs (page load, page click, api call.) then a debugging UI will popup. Either by adding the debugger keyword anywhere in your code or by clicking on the left of a line to turn it into a breakpoint in VS Code editor or Chrome. Now all you have to do is setup breakpoints in your application. Step five: actually debug your application If you prefer to debug your Next.js application using the regular Chrome DevTools, all you have to do now is open a new tab in Chrome with the url being: chrome://inspect.Ĭlick on "inspect" and the Chrome DevTools are now connected to your Next.js application. vscode/launch.json at the root of your project: Configure VS Code so that it connects to your already started Next.js application.Same as 1., I don't use the internal VS Code terminal, I have a side terminal already. Start your Next.js application from within the internal terminal of VS Code so it detects it. Frankly, this is not my favorite solution because usually all developer environments are already using some sort of process manager like node-foreman, ❤️ overmind, docker-compose, heroku local, nodemon.
0 Comments
Leave a Reply. |