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

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

関連記事

grepコマンドを使って正規表現を色々試してみるその2

概要 みなさんこんにちはcandleです。今回は前回に引き続き、正規表現を勉強していきましょう。 前提 unixを使用するので、多少、unixコマンドになれていること サンプル文章 今回は下の文章を用 …

railsのform_forとstrong parametersを使用してpdfをアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリにpdfファイルをアップロードしてみましょう。 form_forは …

wordpressのwp_queryでpost投稿の記事一覧を取得する

概要 みなさんこんにちはcandleです。 最近はwordpressの開発を行っており、そこで、試行錯誤したwp_queryを使った記事一覧の取得の仕方を紹介します。wordpressは少し前まで、q …

Mysqlテーブルの照合順序を変更する

概要 みなさんこんにちはcandleです。今回はテーブルの照合順序を変更する方法を行います。 この方法はやっても、mysqlクエリー1行ですみます。早速やりましょう。 テーブルの照合順序を変更する 次 …

railsのrakeで作成したカラムの型とdefault値を変更する方法

概要 みなさんこんにちはcandleです。今回はrakeコマンドのややこしいところを扱います。 rakeコマンドはわりと便利で、データベースのカラムの追加や型の変更をマイグレーションファイルから読み込 …


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