joppot

コピペで絶対動く。説明を妥協しない

プログラミング

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

投稿日:2017年1月10日 更新日:


debugthumb

概要

みなさんこんにちはcandleです。
今回はReact NativeのデバッグでChromeを使うと
シミュレーターの動作が遅くなってしまう問題を対処します。

とは言っても簡単で、Google Chromeの代わりにChromiumを使用するだけです。

前提

Reactの開発環境が整っている


Chromiumをインストールする

それでは早速Chromiumをインストールします。
webサイトからもダウンロードできますが
brewを使うと便利です。

brew cask install chromium

caskisntallchromium

インストールが完了しました。

デバッグしてみる

適当なreact-native プロジェクトでまずは起動します。

react-native run-ios

起動したら、シミュレーター上で cmd + d を押します。
メニューが出てくるので、「Debug JS Remotely」を選びます。

enabledebugjsremote

Google Chromeが起動します。

googlechromedebugwihndow

残念ながら、どうやったらデフォルトのブラウザをChromiumにするかわからないので、
まずはGoogle Chromeで起動して、そのURLをコピってChromiumに移す方法をとります。

URLをコピーして、Chromiumを立ち上げます。
コピーしたURLを貼り付けて移動します。

chromeiumdebugwindow

上の写真の様に「Status: Another debugger is already connected」と出てきます。
これはGoogle Chrome側でつないでいるので警告が出てくるのです。

なので、Google Chromeを終了します。

シミュレーター側でエラーがでますが、cmd + Rでリロードしてあげると、
Chromium側につないで正常に動きます。

simulatordebugerror

無事Chromium側につながりました。

chromiumconnectsuccess

まとめ

私の場合はこれでシミュレーターの速度は早くなりました。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのwebrickでi18nの言語切り分けをサブドメインで設定する

概要 みなさんこんにちはcandleです。最近では海外展開も視野に入れたwebアプリケーションの開発が行われることが多くなってきているような気がします。 そうなってくると、webアプリケーションの国際 …

pythonのfabricでファイルを分割しfabfileに読み込む方法

概要 皆さんこんにちはcandleです。今回はfabricで分割したpythonファイルを読み込んでみましょう。 fabricはfabfile.pyというファイルに実行したいコマンドを書くのですが、 …

railsのrakeのmigrationファイルを削除しNO FILEとstatusに出た時の対処

概要 みなさんこんにちはcandleです。今回は誤ってデータベースに反映したマイグレーションファイルを不要だと思って削除した時に、NO FILEと出てきてしまった時の対処です。 言うなれば、下のような …

ReactでFaker.jsを利用してダミーデータを生成する

概要 みなさんこんにちはcandleです。今回はFaker.jsをReactで使ってみようと思います。 Faker.jsの使用目的は様々あると思います。多くの場合はテストで使うと思うのですが、今回は簡 …

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

概要 みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。 scaffoldとはご存知のようにいわゆるwe …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー