Testing and debugging your React app on mobile (IOS) device

✍️ This is not only work for React, it also work for any local web application as long as we follow the fundamental steps

Running local React app on Iphone

We will use create-react-app

npx create-react-app demo-app

It might take some time to create an React app, after create one we can access demo-app folder and run up the React app

cd demo-app
npm start

After running this you will see something like this:

Terminal when app run successfully

Now, we can access our app via http://localhost:3000 or http://192.168.1.88:3000 . The second one is what we need.

You might ask what is 192.168.1.88 ?

It is your machine ip address, you can easy get it by network config in your certain OS. On mac, run this command:

ifconfig |grep inet

ifconfig |grep inet result

✍️ Hint: Sometimes, you might not get http://192.168.1.88:3000 when you run yarn start , you can run HOST=192.168.1.88 yarn start to get it too.

🚀 Now we can access the React app on Iphone via http://192.168.1.88:3000

Open dev tool Iphone’s Safari

✍️ Make sure your phone and your mac connect to same wifi

On your Iphone

Setting > Safari > Advanced > Turn on Javascript and Web Inspector

Enable Javascript and Web Inspector

Important: Open Safari and access http://192.168.1.88:3000

On your Mac

Safari > Preferences > Advanced > Enable Show Develop menu in menu bar

Enable Show Develop menu in menu bar

Safari > Develop > Your_Phone_Name > 192.168.1.88 (Your IP)

Safari > Develop > <Your Phone Name> > 192.168.1.88 (Your IP)

✍️ In case of you can not see Your IP (192.168.1.88) when clicking on your phone Name(Tony), connect your phone with your mac via cable.

New window will be opened, that is your dev tool of Iphone’s safari

Iphone’s Safari Web Inspector

️
Hope this make your life easier when testing and debugging your app on Iphone.

Happy Coding :D