テレビやPS4のJavaScriptのログをPCに出力する方法

テレビやPS4のアプリの開発中には、JavaScriptのログをPCでチェックしたい場面があります。
そんなときに便利なのが、console.reというツールです。

この記事では、簡単にそのセットアップと使い方を説明します。

使い方の手順

Step 1: ツールのダウンロード

git clone https://github.com/kurdin/console-remote-server

上記のコマンドでソースコードをクローンします。

Step 2: ディレクトリに移動

cd console-remote-server

クローンしたディレクトリに移動します。

Step 3: パッケージのインストール

npm install

必要なパッケージをインストールします。

Step 4: ホストの設定変更

.env.developmentとgulpfile.jsのファイルにあなたのローカルIPを設定します。

.env.development:

APP_CONNECT_HOST=http://[自分のローカルIP]:8088

gulpfile.js:

host: '[自分のローカルIP]',

Step 5: コンソールサーバの起動

npm run server

コンソールサーバを起動します。

Step 6: コンソールアプリの起動

新しいターミナルを開いて、以下のコマンドでコンソールアプリを起動します。

npm start

すると、http://[自分のローカルIP]:8090でアプリが開きます。

Step 7: 必要なディレクトリに移動

開発ディレクトリに移動します。

Step 8: console.reパッケージのインストール

yarn add console-remote-client

または

npm install console-remote-client

パッケージをプロジェクトに追加します。

Step 10: コンポーネントにコードを追加

プロジェクトのローカル環境を起動し、ログを取りたいコンポーネントに次のコードを追加して、ローカルをリロードします。

import consolere from 'console-remote-client';

consolere.connect({
  server: 'http://[ローカルIPアドレス]:8088',
  channel: '[任意のチャンネル名]',
  redirectDefaultConsoleToRemote: false,
  disableDefaultConsoleOutput: false,
});

console.re.log('test');

以上でセットアップは完了です。

TVのアプリ開発時にJavaScriptのログをPCで確認することができるようになります。