JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法

JavaScriptで配列やオブジェクトの中身を確認したい場合、console.table等を用いて開発者ツールから確認しているが、これをブラウザ上に表示し確認できるようにしたい。また、dBug.phpのように見やすく整形してほしい。「prettyprint.js」というライブラリが良さげなので利用方法をメモ。

prettyprint.js

Github

https://github.com/padolsey-archive/prettyprint.js

導入方法

CDNは無いっぽいのでこちらのページからprettyprint.jsをダウンロードし、適当なディレクトリにアップロードすること。

利用方法

ソースコード

<script type="text/javascript" src="prettyprint.js"></script>
<script>
const array = [
    { id: 1, name: `山田`},
    { id: 2, name: `鈴木` },
    { id: 3, name: `佐々木` },
];
const obj = {
    'apple': { price: 200, name: `りんご`},
    'orange': { price: 300, name: `オレンジ`},
    'grapes': { price: 400, name: `ぶどう` },
}

const prettyPrintOption = {
    styles: {
        'default': {
            table: {
                width: '',
            },
            td: {
                padding: '2px',
            },
            th: {
                padding: '2px',
            },
        }
    }
};

document.body.insertBefore( prettyPrint(array, prettyPrintOption), document.body.firstChild );
document.body.insertBefore( prettyPrint(obj, prettyPrintOption), document.body.firstChild );
</script>

表示サンプル

上記ソースコードをブラウザで確認すると以下のような表示になる筈。

オプションについて

オプションについてはprettyprint.jsの679行目のprettyPrintThis.configを確認すること。個人的にはstyles以外はデフォルトで問題無いように思う。