JavaScriptのブラウザ上でのデバッグログをconsole.logのかわりにHTMLに表示

スマホ実機での動作確認時などで、開発者ツールが使えない状態で、画面上に気軽にJavaScriptオブジェクトをログ出力させます。HTMLに <div id="log"></div> という要素を配置しておき、JavaScriptから任意のオブジェクトの内容をHTMLに表示させます。

console.logとまではいかないものの、オブジェクトもJSONで整形して表示します。JavaScriptオブジェクトのプロトタイプをすべてたどって属性を表示します。すべての属性値を表示してしまうと膨大になってしまいますので、階層数に上限を設けました。

function log(obj) {
  function getAllProperties(obj, maxDepth) {
    if (obj === null) {
      return null;
    }
    if (typeof obj !== "object") {
      return obj;
    }

    const cloneObj = {};
    let currentObj = obj;

    while (currentObj !== null) {
      if (maxDepth <= 0) {
        cloneObj["..."] = "...";
        break;
      }
      const currentProps = Object.getOwnPropertyNames(currentObj);
      currentProps.forEach(prop => {
        if (!(prop in cloneObj)) {
          const v = obj[prop];
          cloneObj[prop] = getAllProperties(v, maxDepth - 1);
        }
      });
      currentObj = Object.getPrototypeOf(currentObj);
      maxDepth--;
    }

    return cloneObj;
  }

  const logElem = document.getElementById("log");
  const message = JSON.stringify(getAllProperties(obj, 3), null, "  ");
  logElem.textContent = message + "\n----\n" + logElem.textContent;
  console.log(obj);
}

#log {
  white-space: pre-wrap;
}

<div id="log"></div>