react-nativeのリモートデバッガをON・OFFする方法

訳も分からず有効にしたデバッガを無効にできなくて苦労したので、メモを残します。

react-nativeとは

nodejsでandroidアプリとiosアプリを作れる、アプリ作りに便利なフレームワークです。

https://facebook.github.io/react-native/

リモートデバッガとは

react-nativeが提供しているデバッグ機能です。
これを有効にすると、PCでchromeやchromiumなどのchrome系ブラウザで http://localhost:8081/debugger-ui を開いておくことで、アプリのconsole.logやエラーなどをデバッグツールで確認できます。

リモートデバッガの設定方法

有効（ON）にする方法

react-nativeの初期設定を終えて動作中の端末を振ります。
（冗談のような文章ですが、実際に組み込まれている機能です。）

振ると加速度センサに反応して下記のような設定が表示されます。

上から2番目の「Debug JS Remotely」を選択すると、リモートデバッガが有効になります。

http://localhost:8081/debugger-ui を開いてリロードすると、デバッガが有効になります。

無効（OFF）にする方法

デバッガを有効にした状態で http://localhost:8081/debugger-ui を開かずに開発モードを立ち上げようとすると、アプリは「Unable to connect with remote debugger」と赤い画面でエラーを表示し、コンソールには下記のようなエラーが表示されます。

Loading dependency graph, done.
Launching Dev Tools...
Google Chrome exited with error: { Error: spawn google-chrome ENOENT
  at exports._errnoException (util.js:1033:11)
  at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
  at onErrorNT (internal/child_process.js:367:16)
  at _combinedTickCallback (internal/process/next_tick.js:80:11)
  at process._tickCallback (internal/process/next_tick.js:104:9)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn google-chrome',
  path: 'google-chrome',
  spawnargs: [ 'http://localhost:8081/debugger-ui' ] }

これはアプリを振って、表示されれる設定項目の上から2番目の「Stop Remote JS Debugging」を選択すると、デバッガ無しで開発画面が表示されます。

デバッガの設定はPCのファイルではなく、アプリをダウンロードした端末に保存されるようです。
PCのファイルをリセットしてもデバッグモードが解除されなくて、解決方法が分かるまでに半日かかりました。

共有する情報は以上です。

参考

RN 0.21.0 Unable to connect with remote debugger.