STRFY

Display the object in the browser for easy viewing

use it

var strfy = require('strfy')
var sample = {
    str: 'hello world!!',
    num: 999,
    arr: [1, 2, 3, 4, 5, 6, 7],
    bool: true,
    fn: (function() {
      return false;
    }).toString(),
    obj: {
      a: 1,
      b: 'box',
      c: ['x', 'y', 'z']
    },
    un: void 0,
    nil: null
  };

strfy.open(sample)

// or

strfy.open(sample)
.then()
.catch()

大きなObjectをconsole.log等で表示しても、全体像の把握が困難です。

その解決手段としてstrfyを作りました。

strfy.openは引数のobjectをbrowserで開きます。

内部的にはhtmlに変換し、TMPDIR(osごとに異なるtemporary directory)に保存します。それをosごとに異なるopenコマンドで開きます。

strfy.open(object)で動作しますが、これはpromiseオブジェクトを返します。
なので一部のtest環境など動作しない場合は適切にthen,catchを配置する必要があります。
また、promiseなのでawaitも使用できます。

strfy.openは実行するたびに新しいwindowを開きます。
この挙動が不満なら、strfy.saveが使えば保存のみを行います。

install

npm i strfy --save-dev

# or

yarn add strfy --dev

api

open

引数に渡したobjectをBrowserで表示します。
returnしたPromiseはhtmlファイルのpathを返します。

Arguments

Object (Object | Array)

Returns

Promise Object

Example

strfy.open(obj)
.then(function(html_path) {
  console.info(html_path);
})
.catch(function(e) {
  throw e;
});

save

strfy.openは自動でBrowserを開きますが、この関数は保存だけを行います。
Promiseはhtmlファイルのpathを返します。

Arguments

Object (Object | Array)

Returns

Promise Object

Example

strfy.save(obj)
.then(function(html_path) {
  console.info(html_path);
})
.catch(function(e) {
  throw e;
});

path

htmlのpathを取得します。

Arguments

none

Returns

path (string)

Example

strfy.path()

with browsersync

browsersyncを使うと別のPCやスマートフォン等に表示することもできます。

> URI={{html_path}} &&browser-sync start --server $URI --files $U
RI/strfy.html --startPath "/strfy.html"

Browsersync - Time-saving synchronised browser testing