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アプリケーションの国際 …

react nativeのandroidでfailed to find Build Tools revision 23.0.1エラーが出る時の対処

概要 みなさんこんにちは、candleです。今回はreact nativeでrun-androidでbuildが失敗する時の対処です。 私の場合最新のandroid-sdkを入れたところ、以下のような …

MAMPのSQLiteManagerを使用してsqlite3データベースの作成とデータベースファイルの設置

概要 みなさんこんにちはcandleです。今回はsqliteデータベースをMAMPを使用して作成しましょう。 PHP5.3からsqlite3のクラスが充実して、mysqlを使用しなくてもsqliteで …

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …

javascript + Reactでhtmlタグの削除と許可とXSS対策

概要 みなさんこんにちはcandleです。今回はReactで許可したhtmlタグだけを表示し、それ以外のタグは削除するプログラムを書いてみます。 注意、本来ユーザーなどが投稿した内容をそのまま表示させ …


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