Debugging local projects with nerd.vision

Steve

September 13, 2019

Debugging local projects with nerd.vision

I’ve come across an issue in my application where the subtract functionality is giving me the wrong result. Let’s use the nerd.vision debugger with the project on my computer to see what could be wrong.


What this article covers:

  • Why you would use a local project in nerd.vision
  • Loading a local project into the nerd.vision debugger
  • Firing a breakpoint on this project
  • Fixing the issue and seeing the corrected data


Why you would use a local project in nerd.vision

nerd.vision is great for debugging issues in applications that have been pushed to git, but what about when you’re developing on your machine? With the newly released Local code source, using nerd.vision while developing is super simple.


  • Using nerd.vision with a local project lets you easily set breakpoints on your code without having to repeatedly commit it to git, all you have to do is refresh
  • It also allows you to try out the debugger without connecting nerd.vision to Gitlab/GitHub/Bitbucket
  • The code itself never leaves your computer, it’s loaded directly into your browser

Loading a local project

1. First I’ll jump onto debugger.nerd.vision and hit the ‘Create new workspace’ button. From here, I can choose my code source to be ‘Local’

Code source selection

2. Now I’ll select the application by hitting the ‘Browse’ button and finding the root of my project. This then loads directly into the browser

Browse for a project

3. After that I’ll Save, then I can see my project appear in the tree on the left

The loaded file tree

4. Now lets see the issue in my application: if I subtract two numbers, I’m getting the wrong result

The application showing an incorrect result of 9 - 6 = -3

5. My application already has the nerd.vision agent installed, so I’ll add a breakpoint in nerd.vision on the subtract route, and then try another subtraction to see what the data is

Setting a breakpoint in the subtract route

6. The input looks fine, but the result seems to be wrong, so the problem must be in the calculator.subtract function

The output from the breakpoint

It looks like the variables are being subtracted in reverse. Let’s fix that and try it again to see the new results.

The issue in the source code

7. We can hit the refresh button to reload the project in the browser to see the code changes

Refresh the tree

8. I’ll click on the disabled breakpoint to re-enable it, then I’ll try subtracting again

Turning the breakpoint back on

9. That’s what we expect! Our problem is now fixed and we can continue developing

The new output from the breakpoint, showing the fixed issue


Conclusion

Adding a local project to the nerd.vision debugger and seeing data from it was a simple task. Developing using the debugger removes the need to trawl through logs to find an issue, and gives you the exact data you need.


Steve

Steve

I'm a Software Engineer on the nerd.vision team. My skills mostly lie in the UI/Node area, but I also work with the backend services.