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. Step five: actually debug your application.Step four: connect your debugging inspector.Step two: configure Next.js to start in debug mode.Step one: create your Next.js debugging demo application.Mandatory introduction: why even bother?.When you'll be finished, you'll get this experience (VS Code, React): Then your favorite debugger will pop out whenever your code encounters your breakpoints. When fully setup, you'll be able to put breakpoints in both frontend (React) and backend code (Node.js, API routes). Since Next.js is a Node.js application, what's provided here as guidance will also work for any Node.js program. □ Hi there, this article explains how to setup your developer environment so you can debug your Next.js application using Visual Studio Code debugger or Chrome DevTools. Apupdate: This article is now part of the Next.js documentation:
0 Comments
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |