

This gives the same experience, letting you easily set breakpoints and watches, inspect variables and all of your other important debugging tasks. There may be a more complete implentation is you dig through the documentation, but I found that, with a few tweaks to the Chrome profiles, you can launch Chredge and attach the debugger to VS Code.

The Debugger for Edge extension by Microsoft has actually been around for a while, but it has been updated to support Chredge. It turns out, you can! Enter Debugging for Edge (Chredge)

Over the last year, I have slowly shifted my primary browser to the new Chromium version of Edge (I like the nickname “Edgium,” but it looks like “Chredge” has become the more popular nickname.) So I recently decided to see if it was possible to use Edge as my debugging browser for SPFx debugging. I have used Chrome as my primary browser for years, in large part because of the debugging tools built into the browser.

That said, the Debugger for Chrome is one of the first extensions I add to any new VS Code install. He has updated it to include debugging profiles for other SPFX scenarios, so it’s still worth installing. While Elio’s extension allows you to add SPFx debugging profiles to any project, I rarely use it these days as Microsoft included the debugging profiles as part of the Yeoman scaffolding for SPFx. SPFx Debug Configuration by Elio Struyf.The two that have been around for a while are I have a long list of extensions that I regularly use in VS Code, but I use a few extensions daily that help with debugging SharePoint Framework(SPFx) webparts and extensions. As long as it’s open, I apply the latest updates and close it back down.) BLAH BLAH BLAH! Just take me to the code! (Honestly, when I open Visual Studio these days, it’s because the icon is next to VS Code in my taskbar and I accidentally click the wrong one. Back in the early days of VS Code, I missed the rich toolset of Visual Studio, but as I became more comfortable with the combination of command line and graphical interfaces in VS Code, as well as the explosion of awesome extensions for VS Code, I found myself opening Visual Studio less and less. As the development pendulum has swung back to the “front end,” I find a majority of my time in VS Code.
