Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Ink and yarn
  • Contact
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:

  • Twitter
  • Facebook

Post navigation

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

Leave a Reply Cancel 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

  • 5 tips for nailing your first Microsoft certification exam
  • My top 5 most read blogposts in 2022
  • How to solve the ‘Could not find the task func: host start’ error in VS Code when working with Azure functions
  • Use your coding skills to extend Microsoft Teams
  • How to enable source-map in PCF projects – for easier debugging

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
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

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