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のaws-sdk gemを使ってs3のファイルを削除する

by martinak15 概要 みなさんこんにちはcandleです。今回はs3にアップロードされている画像ファイルをrailsのaws-sdk gemを使用して削除してみたいと思います。 記事中で開 …

basscss v8以降にv7以前のスタイルを追加する(自分用メモ)

概要 みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。 v7以降からbasscssのスタイルはかなり分割され …

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

gitpythonでfirst commitする

概要 みなさんこんにちはcandleです。今回はgitpythonで、初めてのコミットをする方法を紹介します。 gitpythonでコミットは難しくないのですが、初めてのコミットは要領が違ったので、ま …

wordpressのコメントフォームを編集し、名前とメールのデフォルト値を設定する

概要 みなさんこんにちはcandleです。今回はwordpressのコメントフォームをオーバーライドしてフォームの「名前」「メールアドレス」「url」のデフォルトバリューを設定したいと思います。 コメ …


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