debugging tips

[evs-chris]

There are a handful of browser plugins that extend devtools in both chromium and firefox to work a little more closely with ractive. There's also a really easy way to use the plain old console to make inspecting data at any point in a template or interacting with the ractive instance that controls part of a page much more convenient:

import Ractive from 'ractive';

let el;
document.addEventListener('click', ev => el = ev.target, { capture: true });
document.addEventListener('focus', ev => el = ev.target, { capture: true });

Object.defineProperty(globalThis, 'R', {
  value: new Proxy(() => ({}), {
    apply(obj, e, args) {
      if (args.length) {
        let ctx;
        if (typeof args[0] === 'object' && args[0] instanceof Node) ctx = Ractive.getContext(args.shift());
        else ctx = Ractive.getContext(el);
        if (!ctx) return;
        if (typeof args[0] === 'string') {
          if (args.length === 1) return ctx.get(args[0]);
          else if (args.length === 2) return ctx.set(args[0], args[1]);
        } else if (typeof args[0] === 'object') return ctx.set(args[0]);
        return ctx;
      } else return Ractive.getContext(el).get();
    },
    get(obj, prop) {
      const ctx = Ractive.getContext(el);
      if (!ctx) return;
      if (!(prop in ctx) && prop in ctx.ractive) {
        const val = ctx.ractive[prop];
        if (typeof val === 'function') return val.bind(ctx.ractive);
        return val;
      } else return ctx[prop];
    }
  })
});

If you paste everything from the third line down into your console on a page with a newish version of ractive (one that has getContext) and run it, any element you click on or focus will have its ractive context available as the global R, so R.get() returns the data at that context. Since it also checks for properties not available on the context, any of the non-context properties and methods of your ractive instance are also available directly e.g. R.doAThing() is shorthand for R.ractive.doAThing(). R is also a function, so you can use the $0 and other special element references in the devtools inspector to pull a context without clicking around on the actual page. R($0) is shorthand for Ractive.getContext($0).

The function handler for R also gives you shorthand for the most common things you want to do with a ractive instance: get and set. R() will get the context value, R('key') will get the context value at key, and R(key, value) will set the context value at key to value. R({ key: value, other: foo }) works like a set called with an object. These methods also work with a passed-in element if you also pass a key, so R($0, 'foo') will give you the foo key in the context for $0, and R($0, 'foo', bar) will set the value at key 'foo' to bar in the context of $0. R($0, { foo: bar, baz: bat }) also works like an object set in the context of $0.

If you don't have a modern enough environment to have access to Proxy for some reason, you can split the functionality up into a function and a window getter. When I've done that in the past, I've used C() as the function and R as the property, but in development, you usually have something evergreen available. I typically stick that helper or something like it into a debug.ts module in each project so that I can have it baked in whenever I need it.

Anyone else have any debugging tips?