Tuesday, July 18, 2017

Debugging SPFx using VSCode - multiple projects in sub folders

I've been quite happy with Chrome TS debugging capabilities, honestly, so I never really cared to try VSCode debugging until now.

Thing is, I've been working on my "SPFx from an ISV point of view" session and wanted to cover all options in my presentation, so I thought I should probably set it up and write about it.

Finding the instructions was simple enough, and the guys @msft did a good job detailing how its done here.

However, in my situation (for reasons I will share later on) we have decided to create a root SPFx folder and place our projects as sub folders under that root folder. So, when I open my VSCode, the root folder is not my SPFx project root.

That folder structure broke the debugging configuration file and it couldn't find any maps files.

I could not find any documentation on the different properties in the JSON config file, but it was simple enough to understand.

After playing around with it for a bit, I figured the debugger used the "webRoot" property to find the source files inside VSCode.

All I needed to do is change:

"webRoot": "${workspaceRoot}"


"webRoot": "${workspaceRoot}/DVP"

and my debugger connected correctly and started working.

Why do I use sub folders? That - I will explain in a later post, or in my talk at the end of the month @SPSNYC.

No comments: