How to enable source-map in PCF projects – for easier debugging

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:

What is a source map? “A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. To enable the debugger to work with a source map, you must: generate the source map.” source, The firefox docs

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 const oobConfig.

Below “watchOptions” add a line with devtool: "source-map",

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.

Resources

• Webpack sourcemaps (webpack docs)
• Debugging code components (Microsoft docs)

---

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!

/Eli