@yext/custom-field-debugger
v2.1.6
Published
Custom Field Debugger works on Yext pages to markup and highlight HTML elements which use data from Yext Knowledge Graph
Downloads
3,484
Maintainers
Keywords
Readme
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
- Make some changes to the repo.
- Add
"@yext/custom-field-debugger": "file:../custom-field-debugger",
topackage.json
to load your changes locally into a repo for testing. npm run release
in this repo to build the TS files, and generate the TS typesnpm install
in the testing repo to fetch the newly built files
Deployment
- Make & commit changes - don't forget to increment the version number
npm run relase
to compile TS to JS, and generate TS typesnpm publish
to update the package on npmjs
Common issues (?)
- The version of
react
andreact-dom
in this repo must match that of the pages repo this package is used in