Have you ever had difficulties debugging your PCF component in the browser because your breakpoints doesn’t seem to work as expected? Or maybe when you try to inspect the code all you get is bundlet source code that is unreadable? In this blogpost I will show you how to enable source-map in PCF projects to make the debugging experience much better.
If you have been working with other types of web projects you are probably familiar with source maps, but if your are not this it how Firefox docs defines it:
In other words its a tool to make debugging in the browser easier. And also – source maps needs to be generated. When using webpack this is quite easy – just a setting in the config file. But when you generate a PCF component project the webpack config file is hidden away so you might not even realise that webpack is beeing used.
Note, its not recommended to have source-maps as a part of your production build. You can read more about different builds for different environments in this blogpost about working with PCF components and dataverse solutions.
Adding source map to webpack config
To locate the webpack file that is being used you have to go into the node_modules folder, and locate the folder “pcf-scripts”. Inside this folder you will find a webpackConfig.js file.
Inside this file locate the section that defines
Below “watchOptions” add a line with
And thats it. You have to rebuild your code for the source-maps to be generated.
Source maps with TypeScript
If you are using typescript in your project you also have to add a line in your tsconfig.json file.
This file is found in the root of your project.
Open the file and add the line
"sourceMap": true under compilerOptions.
Did you find this article usefull? Follow me on twitter to be notified when I publish something new!
If you are interested in Microsoft 365 Development you might also like my other blogposts in this category.
Also, if you have any feedback or questions, please let me know in the comments below. 🙂
Thank you for reading, and happy coding!