Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Contact
  • Books and ink
A cup of dev

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

By Eli H. Schei on Monday, 8 August 2022, 6:59Monday, 8 August 2022, 6:59

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.

Screenshot of where to find webpack config

Inside this file locate the section that defines const oobConfig.

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

Screenshot of the source-map in PCF enabled in the webpackConfig

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

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Post navigation

My top 5 uses for Microsoft 365 CLI
Use your coding skills to extend Microsoft Teams

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context
  • Building a ‘My Tools’ Web Part for SharePoint: Using SPfx and PnPjs
  • My top 3 most read blogpost of 2023

Categories

  • Azure
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com