Debugging SPFx web parts

I have been spending some time recently working with SPFx web parts and extensions doing some training to get up to speed but also as part of my most recently project. It has taken some time but I think I’m finally starting to get used to the various components and technologies involved.

One of the most basic things I’ve found frustrating was debugging the code as previously I was trying to add debug points in developer tools or adding ‘debugger’ points in the actual code. The debugger points worked well but it meant every time I wanted to debug I would have to add the debugger line and wait while the changes were saved and compiled.

Today I was working on a complicated project and I got tired of adding debugger points in the code so after a quick Google I found an article on sp dev docs. My project was created using a previous version of the yeoman template so I had to manually create the launch.json file and copy the sample settings in from the article.

When I first debugged after following the article I was able to debug the root web part ts file, see figure 1, but I wasn’t able to debug any other component, see figure 2.

LoadedBreakpoint

Figure 1 (Debug point loaded)

NotLoaded

Figure 2 (Debug point not loaded)

In my project I had the web part file but I also had a sub folder, see figure 3, for other nested components and it was in these sub components I wasn’t able to debug.

ComponentStructure

Figure 3 (Nested component structure)

After reviewing the settings and testing I was getting a message saying there was no source loaded. Looking at the launch.json file the most obvious settings were the ‘sourceMapPathOverrides’ properties, see figure 4. I haven’t done much with using the new web stack technologies but I figured the path reflected the folder structure in the project so I added additional paths to reflect the nested component structure, see figure 5.

defaultDebuggingSettings

Figure 4 (Default debugging settings)

updatedDebuggingSettings

Figure 5 (Updated debugging settings)

After I changed these I was then able to debug at the lower level components. As with everything and the ever changing technology stack its important to try and keep up-to-date with changes and methodologies but the problem is trying to find out the required information.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: