[OTHER] Support for debugging LinkFree

[raviraj-github]

What would you like to share?

During my analysis of the LinkFree issue here, I noticed that we currently lack any configuration for debugging purposes.

Although debugging locally in VSCode can be a bit challenging, it is still achievable. Unfortunately, I couldn't provide a solution for this matter due to personal laptop issues, as my laptop is broken, and my office laptop has several restrictions in place.

My Analysis:

During my analysis, I discovered that this issue can be resolved by adding a configuration to the project. Please refer to the screenshot below:

For more detailed information, you can visit the following link: Debugging in Next.js

Proposed Actions:

1. I kindly request someone to try implementing this solution and, if everything works properly, push it to the repository. Also, consider adding it as a candidate for the .gitignore file.
2. It would be beneficial to create documentation that provides a comprehensive guide on debugging for LinkFree.

Additional information

No response

[github-actions[bot]]

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/LinkFree/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/LinkFree/blob/main/CONTRIBUTING.md

[eddiejaoude]

This is a great idea @raviraj-github , thank you 👍

[yashpandey002]

Hey @raviraj-github, I implemented the solution in my local environment and got the following results. Can you guide me on how to ensure everything is working fine?

[raviraj-github]

Steps to debug:

1. To begin the debugging process, kindly set a breakpoint at the desired location. In my case, I have added it in the event.js file for testing server-side JavaScript.
2. Please observe the highlighted breakpoint, marked with number 2.
3. Proceed by starting your application with the server-side profile. We have configured three profiles: Server Side, Client Side, and Full Stack. Please select the profile that best suits your use case.
4. As part of the process, please check the terminal to ensure that your VS Code IDE is successfully connected to the debug port. This is indicated with number 4.
5. Once the application is up and running, kindly log in and navigate to the desired flow that requires testing. In my case, it involves checking events in the graphical user interface and debugging them. Upon clicking on that specific flow, you will notice that the debug pointer stops at the first breakpoint. Now, you are ready to proceed with your debugging journey. If you are new to debugging, I recommend searching for YouTube videos on debugging Next.js apps in VS Code. You will find valuable resources to assist you.

If, by any chance, your debugger is not functioning properly, I suggest referring to this link(Debugging in Next.js) for additional details. You may need to make some adjustments to your configuration. Rest assured, with a little tweaking, it will certainly work.

Once you have finished working on the task locally, please don't hesitate to request that this issue be assigned to your name. Alternatively, you may also ask to have this task assigned to your name initially, which would be beneficial for tracking purposes. Once the assignment is confirmed, you can proceed with pushing the code.

We greatly appreciate that you have begun working on it. We have full confidence in you and rely on your expertise. Thank you sincerely for your efforts!

Happy Coding!

[SaraJaoude]

@yashpandey002 I have assigned this to you but if you do not want this issue then please unassign yourself.

[yashpandey002]

Thanks @SaraJaoude for considering me for this issue, although I am not a pro and have some doubts related to the issue but I will do my best to resolve it by seeking help from other contributors🙌

[yashpandey002]

client-side.webm

@raviraj-github, I think it is working fine. I have checked all three profiles and didn't find any issue while debugging, is there any thing missing?

[raviraj-github]

I find the proposed changes satisfactory. Please proceed with committing your changes.

If you're interested in exploring further in this domain, you may consider researching how to enable remote debugging for the application. This can serve as an excellent opportunity to enhance your understanding of application debugging, as well as a valuable feature for future use. Maybe once you are done you can raise an issue and ask us to assign.

Thanks for your effort!

[yashpandey002]

Hey @raviraj-github, I am having some doubts regarding committing the changes, actually the .vscode folder is added in gitignore file so when I am trying to commit my changes git is not tracking the .vscode folder.

Should I remove .vscode from gitignore and then make a PR?

[SaraJaoude]

Unassigned as PR closed for lack of activity (see: https://github.com/EddieHubCommunity/LinkFree/pull/7694)

[raviraj-github]

Apologies for the delayed response regarding this matter. I was preoccupied with personal matters and office-related tasks.

I believe it would be beneficial to include detailed documentation for debugging instead of adding the .vscode folder directly to the project. This way, anyone in need of debugging our application can simply copy the provided configuration locally and initiate the debugging process.

Currently, I am working on issue #7065. Once I have completed that task, I will take care of this one unless someone else has already taken it up by then.

[ArthVhanesa]

I believe it would be beneficial to include detailed documentation for debugging instead of adding the .vscode folder directly to the project. This way, anyone in need of debugging our application can simply copy the provided configuration locally and initiate the debugging process.

or else we can comment out .vscode from .gitignore locally and add only .vscode folder in a commit, then uncomment .vscode from .gitignore. It will add only .vscode folder in a commit without changing .gitignore file.

I think this way anyone can debug without adding any additional files locally as well as .vscode won't get unnecessary changes when someone does commit as we have .vscode in .gitignore.

Open for discussion. I would like to work on this issue. Please assign this to me.

[SaraJaoude]

@ArthVhanesa I have assigned this to you

[ArthVhanesa]

As this change also requires updating the docs, should I add docs at this route LinkFree/pages/docs/contributing as debugging(dot)mdx? If No, then where else should I add the docs?

[SaraJaoude]

@ArthVhanesa yes, but probably best to use the file for the new docs pages/docs/contributing/debugging.mdx