You can test your WordPress theme in multiple devices and browsers keeping them in sync during development in your local environment using node module called browser-sync. In simple terms, you can view your WordPress website in different browsers, and all the browsers will automatically reload when you make any changes to the theme.

Requirements :

  1. You need to have a LAMP or LEMP or MAMP installed in your local machine, so that you can run a WordPress site, where you can test your theme.
  2. You need to have node and npm installed and configured correctly.
    Make sure that you have node and npm installed in your system by running following commands: node -v ,npm -v . It shows you the version number of respective application.

Once you are sure about it, you can follow the steps below.

Steps to set up and run browsersync

Step 1: open terminal or command line tool and install browser sync module globally by running following command : npm install -g browser-sync
Step 2: In your terminal go to your WordPress theme folder that you want to test and see real time changes to the theme design in all devices then, run the following command browser-sync start --proxy "http://localhost/" --files "*.css"

And boom!!.. It will output something like this :
[BS] Proxying: http://localhost/
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000/
External: http://192.168.1.9:3000/
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.9:3001
----------------------------------------
[BS] Watching files...

You can now view the site in the new url at http://localhost:3000 .
Above command checks for any changes in the css file in the active theme folder (not subfolders) and as soon as you make any changes it refreshes the content in all the devices that have the url opened, where http://localhost is where your development version of WordPress is running.

Watch for additional file changes :

  • Watch other file formats for changes by mentioning the extensions separated by comma : eg "*.css,*.php"
  • Watch folders for different formats by adding : eg "/css/*.css,*.css,*.php" (checks for css files in css folder)

You can also use browsersync with gulp or grunt task runner. you can read further about browsersync api at : browsersync.io/docs/api/