Custom script to format Vue.js reactive values for better readability on dev tools

chrome-vue-reactive-formatter.js

/**
 * A simple custom formatter for Vue 3 reactive/proxy objects
 * using the Chrome DevTools Custom Formatters API.
 */
(function installVue3ReactiveFormatter() {
  // If we're not in a browser that supports devtools formatters, bail out.
  if (typeof window === 'undefined') return;

  // We only want to show a custom header if it’s a Vue 3 reactive object.
  function canFormat(obj) {
    return obj && obj.__v_isReactive === true; 
  }

  // The `header` function returns a custom representation
  // that shows up in the DevTools console.
  function header(obj) {
    if (!canFormat(obj)) return null;

    // Return a small HTML snippet for how we want to label it in the console
    return [
      'span',                // The element type
      { style: 'color:#42b983' },  // Some styling (Vue green)
      'Reactive ',           // The text label
      // You can also display some inline JSON if desired:
      // JSON.stringify(obj) 
    ];
  }

  // Whether to show a collapsible body. If `hasBody` returns `true`,
  // DevTools will call `body(obj)`.
  function hasBody(obj) {
    // You can make this conditional if you want to show deeper info
    return true;
  }

  // The `body` function returns the expanded content
  // when you click the object in the console.
  function body(obj) {
    // Here, you can show as much or as little detail as you like.
    // This is a simple JSON dump, but you can get more creative.
    return [
      'div', 
      { style: 'margin-left: 12px' },
      JSON.stringify(obj, null, 2)
    ];
  }

  // Register our formatter
  window.devtoolsFormatters = window.devtoolsFormatters || [];
  window.devtoolsFormatters.push({
    header,
    hasBody,
    body
  });
})();