How do you debug Netlify CMS custom previews

juliuspopa · August 25, 2020, 1:24am

Hello,

I can’t seem to figure out how to debug the preview templates (when registerPreviewTemplate runs). I am using the Netlify/Gatsby starter project, and would like to inspect the data being passed into the BlogPostPreview.js (found in src/cms/preview-templates)

Any suggestions would be appreciated, Thanks!

erez · August 31, 2020, 5:33pm

Hi @juliuspopa and welcome to the community!

Custom preview template code runs in the browser.
You could add console log message or debugger breakpoints here for example:

github.com

netlify-templates/gatsby-starter-netlify-cms/blob/365ddbbb634df32b2594a5c86e7e757168c9ec2d/src/cms/preview-templates/ProductPagePreview.js#L6


      
          import React from 'react'
          import PropTypes from 'prop-types'
          import { ProductPageTemplate } from '../../templates/product-page'
          
          
const ProductPagePreview = ({ entry, getAsset }) => {
            const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
            const blurbs = entryBlurbs ? entryBlurbs.toJS() : []
          
          
  const entryTestimonials = entry.getIn(['data', 'testimonials'])
            const testimonials = entryTestimonials ? entryTestimonials.toJS() : []
          
          
  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
            const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
          
          
  return (
              <ProductPageTemplate