Custom Field Debugger

Custom Field Debugger works on Yext pages to markup and highlight HTML elements which use data from Yext Knowledge Graph

Usage

On a Yext pages site, install the NPM package:

npm install @yext/custom-field-debugger@latest

Then, use the React component, for example:

// src/layouts/main.tsx

import { CustomFieldDebuggerReactProvider } from '@yext/custom-field-debugger';

...

const Main = (props) => {
  return (
    <CustomFieldDebuggerReactProvider pageProps={props} component={MainInternal}>
      <MainInternal />
    </CustomFieldDebuggerReactProvider>
  )
}

const MainInternal = (props) => {
  return (
    // Template to render page here
  )
}

On the page rendered with this template, you can add the URL parameter yextCFDebug=true to enable the Custom Field Debugger.

Development

1. Make some changes to the repo.
2. Add "@yext/custom-field-debugger": "file:../custom-field-debugger", to package.json to load your changes locally into a repo for testing.
3. npm run release in this repo to build the TS files, and generate the TS types
4. npm install in the testing repo to fetch the newly built files

Deployment

1. Make & commit changes - don't forget to increment the version number
2. npm run relase to compile TS to JS, and generate TS types
3. npm publish to update the package on npmjs

Common issues (?)

• The version of react and react-dom in this repo must match that of the pages repo this package is used in