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

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 Canaryinstalled on your desktop
3. Chrome Betainstalled on your phoneFirst 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

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

• Step 2:

Go to:

Settings > System > advanced > Developer Options

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

Lets Move to Desktop Configuration:

• Step 1 :

Connect Your USB Cord to the Desktop then to your mobile Device

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

You would receive a Notificationon your mobile device

You should see something like this on Chrome Canary

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

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

Here is where the fun begins

You would see a button with the word Port Forwading,

Click on it Then a dialog pops up with heading

Port Forwading Settings

Then you see two input fields

The First has a placeholder of Port, Type

 3000

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

localhost:3000

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/

in your Phone's Browser (Chrome Canary)