joppot

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

プログラミング

React Native slows down when debugging on Google Chrome

投稿日:


debugthumb

Abstract

Hello everybody, It’s candle.

This time, we will solve the problem that using simulator is going to slow down when debugging on the Google Chrome

Anyway, It is solved in a simple way. we use Chromium instead of Google Chrome.

Premise

React development environment has been established


Install Chromium

So you will install Chromium immediately.
You can also download from the website, but using brew is useful.

brew cask install chromium

caskisntallchromium

Chromium was installed

Try debugging

Start with the react-native project at first.

react-native run-ios

After starting up, press cmd + d on the simulator.
A menu is displayed, You choose “Debug JS Remotely”

enabledebugjsremote

Google Chrome will launch.

googlechromedebugwihndow

Unfortunately, I don’t know how to make Chromium the default browser,
first, start up with Google Chrome and copy the URL to Chromium.

You copy the URL and stat up Chromium.
Paste the copied URL and move.

chromeiumdebugwindow

“Status: Another debugger is already connected” appears.
This warning is displayed because it is connected to google chrome.

So you quit Google Chrome

An error will occur on the simulator side, but you would reload it with cmd + R, it will move normally to Chromium side.

simulatordebugerror

Chromium connected to the simulator successfully

chromiumconnectsuccess

Reusult

In my case, m simulator move fast.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

How to fix the background scroll of react-modal

Abstract Hello everyone it’s me candle. This time I will solve the react-modal background moving problem when you scroll. Condition You use react Completed sample code If you want to run the sample code actually, you would need to install two libraries before. faker is installed for dummy data generation. yarn add faker react-modal First, I will write the sample code of the completed version. This is described in src/App.js. import React, { Component } from 'react' import Faker from 'faker' import Modal from 'react-modal' Modal.setAppElement('#root') class App extends Component { constructor(props) { super(props) this.state = { users: [], user: …

Lazy load image with react-lazyload

Abstract Hello everyoen it’s me candle. This time let’s make a delayed loading of images with react-lazyload. The problem of SPA is the delay at the time of initial loading. Among them, we feel that the site with many images is even late. Let’s try it. Condition Nothing Prepare If you have already developing react project, use it. But you don’t have yet or try to test. Generate it with this command. create-react-app imageloader-sample cd imageloader-sample We will prepare images for samples with Faker.js, so install it. yarn add faker Ready to develop. Make a sample code Open the src/App.js …

Remove or allow the html tag with javascript + React and take measures against XSS

Abstract Hello everyone it’s me candle. In this time, we will write a program which displays only the permitted html tags by React and delete other tags. Notice, displaying originally html contents, it may has a security risk such as XSS. First of all, I am not a security expert, so there is a possibility of a bug in the code. Of course, I check it and test it as long as I do. If you find any vulnerabilities in the code, it would be helpful if you point out it in the post comment form. Condition Nothing Preparation of …

React creates dummy data using Faker.js

Abstract Hello everyone it’s me candle. Let’s try to use Faker.js in React. I think that there are various purposes for using Faker.js. In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js. Condition You have a basic react skill create-react-app was installed Create new project First of all, create a react project. Execute the below command in your favorite directory and create a new react project. create-react-app faker-demo cd faker-demo Installation of faker Install faker with this coommand. yarn add –dev faker it’s over. Generate dummy data …

Create the simplest drop down menu in React

Abstract Hello everyone it’s me candle. In this time we will make a most simple drop down menu. Condition Knowledge of react Preparation We create a react project with the below command. create-react-app hello-menu Open src/App.js and write this. import React, { Component } from 'react' class App extends Component { render() { return ( <div> <p>hello menu</p> </div> ) } } export default App Create a components directory in the src directory. mkdir src/components Create a DropDownMenu.js file in the src/components directory. touch src/components/DropDownMenu.js Now on ready. Create a Drop down menu Open the src/components/DropDownMenu.js and write these. import …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.