How To Debug Or Run Spfx Code Into Live SharePoint Site

In this blog, we will learn how to debug or run the SharePoint SPFX solution running in the local environment into the SharePoint site.

We all know, that SharePoint default open up the Workbench.aspx page when we run gulp serve command. The Workbench.aspx page is the development page, not the production runtime page. So how one can see the complete webpart in the Production environment, before deploying into App Catalog and then Installing it into the Site.

When we run the above command gulp serve a below window is shown. with debugManifestFile as "debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js".

Now, Open the site where you want to run the current webpart code and append debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js" to the site URL.

Example

1) I have the webpart HelloWorld already running on Site HRConstruction, So my site URL will be 

https://contoso.sharepoint.com/sites/{SiteName}/SitePages/{PageName.aspx}?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

2) If you don't have webpart already added to the sitepage you have to manually add the webpart by following.

Click on Edit Page => Add Webpart => Save as Draft or Republish

Note
If you want to see the changes of your code, just refresh the page after saving the code in Visual Studio code.

*Important

It will not install or deploy your new code it will only run in your machine. You have to follow all the necessary steps for installation and deployment no changes to that.