Testing SPFx Web Part Project

Once the “gulp serve” is successful, gulp compiles and opens local workbench.

To preview the web part(s) on the browser, use the following commands

• gulp trust-dev-cert
• gulp serve

This will install a certificate and compile, build and run the application.

Once the “gulp serve” is successful, gulp compiles and opens local workbench.

SPFx Web part -Debugging – Logic

In SharePoint workbench, you can try to understand and debug the web part in the browser developer tool.

When gulp is running, and any change is saved in the project, gulp automatically compiles and builds the new code.

Once it is compiled, the latest code is available in the browser workbench developer tools window.

Classic SharePoint page

Alternatively, we can also debug/execute our local solution in SharePoint existing pages/web parts by appending the below query string onto the page URL in browser.

?loadSPFX=true&debug=true&enableconsolelog=true&forceAssembly=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

It will open the “Allow Debug Manifests?" window. Click on “Load debug scripts” to run local solution.