Hello Fellow Devs , I am a full stack web developer at Intermediate stage . While making projects and learning new topics I encounter various issues and unknown / less known topics on which very few articles or solutions are available but they are very important . To fix it I started this blog . In this I will be sharing stuff related to web development . You can help me by sharing articles you like and let me know an article , topic , problem / issue or question through comment section . Happy Learning !
Introduction
In NextJs , debugging is tricky . You can either do it in browser developer tools or inside VsCode . The official docs shows both ways but it is outdated for VsCode and doesn't help anymore . So after encountering the same problem and going through a bunch of articles and stackoverflow questions I finally found the correct configuration . So I am sharing the same with you all .
The Steps are pretty straight forward , So let''s get into it :
Step 1
Add the inspect option in package.json file . To allow server side debugging , we have to add this into our dev command , like this :-
Step 2
Inside your VsCode project create a file inside .vscode dir ( if you don't have then create one in root folder of your project ) with name launch.json . Now simply add this same configuration in it and save it :-
Step 3
After doing above steps we are ready to debug the app , stop your app terminal and go to the "debug and run" option in VsCode sidebar ( or use F5 key ) , select the "Next.js: debug full stack" option from dropdown and hit run . Now you can see the debugger getting attached to your terminal and done . You are ready to debug your app !
Conclusion
With this you can debug your both client and server side code . I am using NextJs v15.2.3 App router , it should work for Pages Router too . I created this because I couldn't found any helpful updated article or answer for myself . If you like this do share with other devs also . Happy Coding !
Comments
Post a Comment