![]() 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. ![]() Configure VS Code to actually start your Next.js application for you and connect to its debugger.All of that is explained in VS Code gigantic Node.js debugging documentation page. There are multiple ways to connect the VS Code inspector to your Next.js application running in debug mode. You can also skip to the chosen solution. This is a convoluted title but it just means connecting either VS Code debugging feature or Chrome DevTools to your Next.js application. Step four: connect your debugging inspector You can skip to step two if you already have a Next.js applicationĮnter fullscreen mode Exit fullscreen mode Step one: create your Next.js debugging demo application I will be using a fresh create-next-app example to demonstrate how it works. Now after using VS Code to debug both my React and Node.js code I really think it's way more powerful than a regular console.log(obj) > reload page > switch to a terminal (□ repeat with console.log(obj.property.) flow. ![]() The whole debugging experience was painful and you spent more time switching windows than anything else. ![]() In the browser at least it was working but then Node.js came and it was again very hard to debug it nicely. The reason for this habit I believe is that JavaScript debugging tools were always kind of working but not really. I always thought that I don't need a debugger in JavaScript: I can just console.log my way out most of the time. ![]()
0 Comments
Leave a Reply. |