Debugging SPFx Solutions in VS Code – Engineerer
176
post-template-default,single,single-post,postid-176,single-format-standard,wp-custom-logo,bridge-core-3.1.2,qode-page-transition-enabled,ajax_fade,page_not_loaded,,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-30.1,qode-theme-bridge,qode_header_in_grid,elementor-default,elementor-template-full-width,elementor-kit-641,elementor-page-1064
macro insect

Debugging SPFx Solutions in VS Code

I was debugging happely a SPFx solution with Visual Studio Code, when suddenly a wild “I don’t want to hit breakpoints anymore” appeared. I was hitting breakpoints before, but not anymore. What happend?

Setting up Debugging in Visual Studio Code

I followed this guide to configure Visual Studio Code and the Debugger for Chrome extension. I was able to hit breakpoints in Visual Studio Code.

Folder structure of my solution

I discovered that I hit breakpoints in “HelloWorldWebPart.ts” that lies higher and didn’t hit breakpoints in “HelloWorld.tsx” that lies deeper in the folder hierachy.

How to hit breakpoints again

I edited my “launch.json” under ./.vscode. In there are the “sourceMapPathOverride”s defined. And those are not generic. They can’t handle every amount of deepness in the folder structure.

Means: “HelloWorld.tsx” is not hit with Debugger for Chrome because it is in a folder too deep.

launch.json with SourceMapPathOverrides

I then added two additional lines and started hitting my breakpoints again. One line for the current issue and another to prevent future issues. If you want to go deeper… you just add more lines with more dots and slashes and stuff.

launch.json with more SourceMapPathOverrides