Skip to content
Dave FisherAug 03, 20172 min read

SPFx Field Customizers will not debug or load


Field Customizers are the latest and greatest feature to be provide within the new SharePoint Framework. If you are like me, you immediately opened up command prompt and VS Code, grabbed the new Yeoman template and started testing them out!

The logical starting place would be going to the MS Docs for SPFx Field Customizers. If you go through the tutorial, it's pretty straight forward. However, unlike SPFx webparts, you cannot debug these field customizers locally. You actually have to create a site and pass a url similar to this.{"Percent":{"id":"0e3d8b71-56aa-4405-9225-f08a80fc1d71","properties":{"sampleText":"Hello!"}}}

You'll notice a couple parameters. The first being loadSPFX=true, this is because the SharePoint framework isn't loaded by default. The second is a location to your localhost manifest.js file which is running on your local machine when you use gulp serve --nobrowser.

Now, you are so excited you breeze through the Microsoft Docs but there is one thing you notice... it says

"Append the following query string parameters to the URL. Notice that you will need to update the id to match your own extension identifier available from the HelloWorldFieldCustomizer.manifest.json file:

Navigate to your manifest.json file and grab the ID and pass it in your query string parameters where it says fieldCustomizers=...., and replace the ID with the ID from your manifest file.

When you go to the library you just created (when following the tutorial) you should see this.



But wait, I don't see this!!?? Why can't I debug?

The reason you can't debug is likely 1 of 2 scenarios. 

1. The ID in your query string does not match the ID in your manifest.json file

2. You are not using a Developer Tenant!

If you were like me, you went to the tutorial and you skipped over the top section of the documentation where it says "Notice that extensions are currently ONLY available from Office 365 developer tenants." The reason for this is because a developer tenant (not developer site collection) is on first release... so features like Field Customizers, currently are not released into production environments until all of the bugs are worked out.

To create your developer tenant, follow this link

Once you have created your tenant, follow through the tutorial again and you'll have much better success next time around!


I hope this helps someone else, who, like myself was going crazy trying to figure out why my field customizers weren't loading. Maybe next time I'll read the documentation a bit more closely :)


Dave Fisher

Currently based in North Carolina, Dave Fisher, Aerie's founder, plays a variety of critical roles at Aerie, from developing new business and managing client relationships to back-end office logistics. “I try to give our team the tools and atmosphere so they can do what they do best,” he says. “I love how every project is unique — and it’s fun going to companies, learning what they do, understanding their needs and challenges, then being part of their success.”