Toriyama avatar image
0 Votes"
Toriyama asked RaytheonXie-MSFT commented

Why can't I debug my SharePoint Framework solution in production?

Since the last production deployment I can no longer find the JS files to debug in production.
In dev with VS Code running I can and the files exist in webpack:///src/webparts/WEBPART/WP.ts
In dev I can get both the localhost workbench and the workbench inside a SharePoint Online site.
In dev there is webpack:///src/webparts/ but in production and I think it existed until this last deploy.

One detail is that before I was working with the published solution and pointing to dev (Without --ship).

What can it be?

In production it should show webpack:///src/, right?


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

RaytheonXie-MSFT avatar image
1 Vote"
RaytheonXie-MSFT answered RaytheonXie-MSFT commented

Hi @Toriyama ,
Debugging the production version of your SharePoint Framework solution requires two steps: generating the source map for your optimized code, and loading the source map in the browser. If you ever debugged production versions of .NET code using PDBs, it's very much alike.
By default, the SharePoint Framework toolchain builds source maps only in debug mode. With a small change to the build process, you can have it build source maps for the production version of your solution too.
Here is the nice article I have found for you to debug production build of a SharePoint Framework solution

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Ray.

I'm not sure, but I think before I was able to debug the solution in production and now it seems I can't anymore.
What are the chances of being ok before and not now?

I had seen this article but found it a bit complicated. I'll see how I act.

0 Votes 0 ·

Hi @Toriyama ,
When you package your SharePoint Framework solution, spfx build pipeline minimizes and optimizes all your TypeScript code. It's not a problem for development, because in "serve" mode spfx build pipeline generates source maps for you. Source maps allow you to open original TypeScript source files in browser developer tools with full debugging experience.

This is something not possible for "ship" or "production" mode of SharePoint Framework solution. When you run bundle and package-solution with "--ship" flag, spfx pipeline doesn't generate any source maps for you. Instead, you have minified and performance optimized javascript code without any notion of source maps.

1 Vote 1 ·