Edited at

React Native - 簡易DebugのためのLoggerを作っておくと便利

More than 3 years have passed since last update.

ReactNativeでは、PCのChromeのデベロッパーツールを使用して

Debugを行うことが可能です。

実際に試してみた時は感動しました。

非常に便利ではあるのですがちょっと確認したいだけの時に面倒だし

エミュレーターからChromeにwindowを切り替えなくちゃいけないので少し効率が悪いです。

そこでlogを出力する用のファイルを一つ用意して

開発中は画面内にdebug用の領域を表示しておくのが便利でした。


ソースサンプル

以下のような感じです。

(改行してあげた方がいいと思いますが。。)


Logger.js

'use strict';

var Logger = {};
var _log = '';

var log = function(txt){
_log = _log + ' : ' + txt;
return _log;
}

var output = function(){
return 'log:' + _log;
}

Logger.output = output;
Logger.log = log;
module.exports = Logger;



main.js

var logger = require('../common/Logger');

・・・
render: function() {
return (
・・・・
<ScrollView style={styles.debugArea}>
<Text>
{logger.output()}
</Text>
</ScrollView>
・・・・

こうしておけばrenderが走るたびにloggerに追加したものが表示されるようになります。

Text部分はTextInputにしておくとコピーもできます。

Web開発みたいもっとDebugが簡単になると嬉しいなぁ。