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以外はデフォルトで問題無いように思う。
関連記事
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...