DEV Community

loading...

How to view a Website (Create-React-App) hosted on port 3000 in your phone's browser😳

Akosile Oluwatayo Samuel
I'm a website developer, MERN Stack website developer 😊
・3 min read

Almost every developers want to have a feel on how some animations, positioning of some element or the whole website would look on Mobile devices,Tablets and so on.Luckily for us, we have DevTools (Ctrl + Shift + i or F12 to activate) built in on all browsers in which we could view our websites in different resolutions..

The thing is DevTools isn't always 100% accurate and sometimes a website perfectly built and tested with Chrome DevTools could look way worse on Firefox not to go close to the almighty Internet Explorer. I once faced this and it left me depressed for days..

That was when i made some research and found about Chrome Remote Debugging and trust me its been fun ever since.


So for this project we will need :

  1. A USB Cord
  2. Chrome Canary installed on your desktop
  3. Chrome Beta installed on your phone First off we need to configure our Phone( by enabling it for USB debugging)
  • Step 1 : Search for build number in your settings. You can find it if you go to :
 Settings > About Phone > Build Number
Enter fullscreen mode Exit fullscreen mode

and click on the Build number 7 times or infinitely till you see the
notification

You are now a developer

to make the Developer Options accessible on your mobile device

Accessibility

  • Step 2:

Go to:

Settings > System > advanced > Developer Options
Enter fullscreen mode Exit fullscreen mode

Or alternatively Search for Developer Options, Turn it on, Scroll to
USB Debugging and switch it on...

Dev options

NOW WE ARE DONE WITH THE PHONE CONFIGURATION

Lets Move to Desktop Configuration:

  • Step 1 :
Connect Your USB Cord to the Desktop then to your mobile Device
Enter fullscreen mode Exit fullscreen mode

Make Sure you have Chrome Beta opened on your mobile device

  • Step 2

Open Chrome Canary then type in address bar, type in:

chrome://inspect
Enter fullscreen mode Exit fullscreen mode

You would receive a Notification on your mobile device

Capture four


You should see something like this on Chrome Canary

Chrome Canary View

Now your phone Browser (Chrome Beta) is connected to Chrome Canary, Any tab you open on your phone's Browser (Chrome Beta) would show automatically on this page

Snapshot of your screen on Chrome Canary

A cool feature i like about this is the inspect option which takes a snapshot of your phone and syncs every activity you do on Chrome Beta with Chrome Canary


Here is where the fun begins

Port grid

You would see a button with the word Port Forwading,

Click on it Then a dialog pops up with heading

Port Forwading Settings
Enter fullscreen mode Exit fullscreen mode

Then you see two input fields

The First has a placeholder of Port, Type

 3000
Enter fullscreen mode Exit fullscreen mode

The Second has a placeholder of IP ADDRESS AND PORT, type in

localhost:3000
Enter fullscreen mode Exit fullscreen mode

Then click on Enable Port forwarding button at the End of the dialog

After that click Done

Wait don't tell me thats all😨, But yes, That is all 😜.

Now type in

http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

in your Phone's Browser (Chrome Canary)

Picture of React app working on mobile

Discussion (5)

Collapse
areeburrub profile image
Areeb ur Rub

I think npm run host the website on your local network and then can be accessed over all devices, just use your mobile hotspot to create a local network.

Collapse
matveycodes profile image
Matvey Kottsov

or be connected to the same Wi-Fi

Collapse
vidhill profile image
David Hill

This is true, but with this method you should be able to debug js; add breakpoints etc on the device,
Being able to do that would be very helpful.

Collapse
areeburrub profile image
Areeb ur Rub

Yeah that what I mean (Local Network), Can be done using mobile hotspot too.

Collapse
zakiazfar profile image
Mohd Ahmad

Use ngrok