How to Debug Sharepoint SPFx Code with Just One Click (No More Browser Hassles!)

One day, Bandhu(my sprint animal) came to me, frustrated😩, and asked, ‘Why doesn’t Microsoft keep things simple?’ I asked him what had happened, He told me that he had to run his SPFx code twice to debug the code. It’s like Microsoft’s way of saying, ‘Here’s a little extra exercise for you before the real magic happens! 😃. So, I decided to help him out😂.

Long gone are the days when developers had to inspect elements in browser and debug Javascript platform based code. For instance, when SPFx first emerged, debugging typically involved working directly in the browser. Now that’s not the case.

Now, we can debug SPFx code directly in VS Code with ease. All it takes is setting up just one or two configuration files. In this article, we will explore how to achieve seamless debugging in just one click.

This article has below assumptions

1. You have VScode in your system.

2. A SPFx solution handy for which we can implement this article and learn.

So close the door, grab a coffee☕ and lets start.

I understand that I’m not the first person to write about this topic. Microsoft has even published an official guide on debugging SPFx in VS Code.