Testing your website on desktop and live mobile device simultaneously

As a web developer we often tend to develop websites for multiple platforms and screen resolutions. The responsive view on chrome and firefox certainly helps to check out how your websites will look in phones but I have found it quite frustrating to switch between desktop and mobile view in inspector.Which is why I decided to use live reload on phone as well as desktop to save development time.

In todays tutorial I am going to show you two ways to check your website on desktop and phone simultaneously while development with live reloading on both the platforms.I have covered android devices in this and will cover ios devices some time later.

I usually use react framework for developing websites so here is step by step tutorial:

Install create-react-app module from facebook if you haven’t already:

sudo npm install -g create-react-app

Now create a new reactjs project with following command:

create-react-app myApp
cd myApp
npm start

This will start your app in chrome on address http://localhost:3000/

The npm module comes with live reload preconfigured so our desktop set up is done.

Now lets move over to mobile phone.Connect your mobile phone to laptop and enable usb debugging in

Settings->Developer Options->USB debugging

The first method is simple if you have adb setup or android studio installed on your laptop.

Simply run the following command on your terminal:

adb reverse tcp:3000 tcp:3000

This will forward your connection to localhost on port 3000 on laptop to your mobile device.Now simply open browser in your phone and open address localhost:3000 and it will load your website.If you have used react native before then you might be familiar with this command.

The second method is a little tedious but we can access browser log and inspect elements of mobile browser so its worth the efforts.

Next open web inspector in chrome:

Tools -> Developer Tools

Now there is a hidden little gem in developer tools that we generally tend to overlook called remote devices.You can find it in by navigating according to next screenshot:

chromeremotedevices

It is in more option within developer tools in more tools.Clicking on remote devices should bring up the remote devices tab and bring up an authorization popup on your phone.If not then go to settings in remote devices and check Discover usb devices option.Now open chrome browser in your android phone.

Once you accept the authorization on your browser the device will show green status on remote devices tab:

chromeremotedevices2

Now click on the Settings tab at the below remote target option and check port forwarding.Then click on Add rule button.Add port as 3000 and address as localhost:3000.

Now open localhost:3000 on your mobile chrome browser and you can now check your website on phone as well as desktop with live reload enabled on both devices.

Bonus Tip:

Now head back to your device in remote devices tab and you should see localhost:3000 as web address along with other open tabs in chrome.Now if you click on inspect button on the right side of the address you will get access to console and other options of mobile chrome browser.

chromeremotedevices3

Bonus Tip 2:

There is a plugin in chrome to check devices in different devices called responsive web design tester similar to responsive design mode in chrome and firefox but with additional features like group classification and more number of devices.

If you like the article kindly recommend it to others by clicking the ♥ at the botton and mention your doubts/recommendations in the comments section.

Check out my other tutorial here.