How do I step through a SPFX field customizer solution

Question

I'm at a loss. I'm trying to follow the tutorial on switching from JSLink to SPFX. The code looks to compile fine, no errors after copying it. After I run gulp serve --nobrowser everything seems to start fine. I then go to my tenant and copy the debug query string:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Color":{"id":"GUID"}}

I get prompted to enable debug scripts which I click. And then nothing. I do not see any difference in the field value. I'm trying to find how to step through this but I can't seem to find the code anywhere in the browser dev tools.

In the console I can see files being requested:

Request: '/dist/custom-color-field-field-customizer.js'

Request: '/dist/CustomColorFieldFieldCustomizerStrings_en-us.js'

Request: '/node_modules/@microsoft/decorators/dist/decorators_none_fa97ff447ae6f6e7b83b.js'

What is the process for debugging/stepping through a field customizer solution?

Tutorial: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions

Answer 1

Found the cause of the issue: https://github.com/SharePoint/sp-dev-docs/issues/7232

OnRenderCell is not called when column JSON formatting exists. For choice columns there is a default format that is applied when the column is created in the modern experience. Removing this format resolved the issue.