For a long time I have been developing and testing my SPFx web part on workbench.aspx, which is a terrible option considering you only have limited screen space and you don’t get to see how your web part will look like once it is added to the page. Well, there is a way to test and debug your web part on Modern page.
First, lets create sppkg package to deploy. For that, run the below commands.
gulp cleangulp bundlegulp package-solution
Note that I am not using the --ship option while running the bundle and package-solution tasks. This will give you a warning – [package-solution] This is not a production build (--ship or --production), therefore the "includeClientSideAssets" setting will be ignored. That’s what we want.
Second, deploy your generated sppkg package to App Catalog and add web part to your page. When you load the page it will give error.
This is because our code was not added to sppkg package as we did not use the --ship option.
Third and final step, run gulp serve command and view the page. You can now test and debug the web part on the page.