2022-04-17 JSでいい感じのデバッグ出力をする

debug-print.js

// @ts-check

/**
 * @type {JSON['stringify']}
 * @param {any} value
 */
const debugPrint = (value, replacer = null, space = null) => {
  const n = JSON.stringify(value)?.length || String(value).length;
  return postprocess(JSON.stringify(preprocess(value, n), replacer, space), n);

  /** @param {any} object */
  function isPOJO(object) {
    return typeof object === 'object' && !object.__proto__.__proto__;
  }

  /**
   * @param {any} object
   * @param {number} n
   */
  function preprocess(object, n) {
    return object === null
      ? null
      : object === undefined
      ? '@'.repeat(n)
      : Array.isArray(object)
      ? object.map((item) => preprocess(item, n))
      : isPOJO(object)
      ? Object.fromEntries(Array.from(Object.entries(object)).map(([k, v]) => [k, preprocess(v, n)]))
      : object.toJSON || [undefined, '{}'].includes(JSON.stringify(object))
      ? '@'.repeat(n) +
        JSON.stringify({
          name: object.constructor.name,
          toString: object.toString(),
          ...(object.toJSON ? { toJSON: object.toJSON() } : {}),
        })
      : object;
  }

  /**
   * @param {string} str
   * @param {number} n
   */
  function postprocess(str, n) {
    return str.replace(new RegExp(`"@{${n}}(.*?)(?<!\\\\)"`, 'g'), (_, b) => {
      if (b) {
        const v = JSON.parse(JSON.parse('"' + b + '"'));
        return `<${v.name}${'toJSON' in v ? ` (${v.toJSON})` : ''}> ${JSON.stringify(v.toString)}`;
      } else {
        return '<undefined>';
      }
    });
  }
};

sample.js

const object = {
  number: [12345.6789, 6.022140857e23],
  string: 'hello',
  others: [true, false, null, undefined],
  someObjects: {
    date: [new Date('1992-09-28'), new Date(NaN)],
    regexp: /^[a-z]+$/i,
    symbol: Symbol('hoge'),
    function: () => 'hey',
  },
};

console.log('--- console.dir (util.inspect) ---');
console.dir(object, { depth: null, colors: false });
console.log('--- JSON.stringify ---');
console.log(JSON.stringify(object, null, 2));
console.log('--- debugPrint ---');
console.log(debugPrint(object, null, 2));

sample.output.js

--- console.dir (util.inspect) ---
{
  number: [ 12345.6789, 6.022140857e+23 ],
  string: 'hello',
  others: [ true, false, null, undefined ],
  someObjects: {
    date: [ 1992-09-28T00:00:00.000Z, Invalid Date ],
    regexp: /^[a-z]+$/i,
    symbol: Symbol(hoge),
    function: [Function: function]
  }
}
--- JSON.stringify ---
{
  "number": [
    12345.6789,
    6.022140857e+23
  ],
  "string": "hello",
  "others": [
    true,
    false,
    null,
    null
  ],
  "someObjects": {
    "date": [
      "1992-09-28T00:00:00.000Z",
      null
    ],
    "regexp": {}
  }
}
--- debugPrint ---
{
  "number": [
    12345.6789,
    6.022140857e+23
  ],
  "string": "hello",
  "others": [
    true,
    false,
    null,
    <undefined>
  ],
  "someObjects": {
    "date": [
      <Date (1992-09-28T00:00:00.000Z)> "Mon Sep 28 1992 09:00:00 GMT+0900 (Japan Standard Time)",
      <Date (null)> "Invalid Date"
    ],
    "regexp": <RegExp> "/^[a-z]+$/i",
    "symbol": <Symbol> "Symbol(hoge)",
    "function": <Function> "() => 'hey'"
  }
}