PC and mobile browser Sync Test Tool Browsersync Usage Introduction

In the mobile Web development, it is always inconvenient to debug, resulting in a variety of problems are not easy to find. But now with the Browsersync, everything is settled.

Unfamiliar classmates can see Browsersync's official website browsersync Chinese web.

Five-minute Quick start

1. You need to install node. js before using Browsersync. Detailed installation procedures can be found under Windows installation Nodejs

2. Install the Browsersync. Open a terminal window and run the following command:npm install -g browser-sync

3. Start Browsersync.

If you want to listen to .css files, you need to use server mode. Browsersync will start a small server and provide a URL to view your website.

First, enter the project directory of the. css file by the terminal window, and then enter the following command line:browser-sync start --server --files "css/*.css"

If you need to listen to multiple types of files, you only need to separate them with commas.

--files path is relative to the project (directory) running the command browser-sync start--server--files "css/*.css, *.html"//If your file hierarchy is deep, you may consider using * * (for any directory) match , any. css or. html file under any directory. Browser-sync start--server--files "**/*.css, **/*.html"

Just connect your phone to the same network as your PC, and use your mobile browser to scan and open your Web page for simultaneous debugging.

If you already have other on-premises server environment PHP or similar, you need to use proxy mode . Browsersync will view your site through the proxy URL (localhost:3000).

A PHP server environment is created locally, and the local server is accessed by binding browsersync.cn, using the following command, Browsersync will provide a new address, localhost : 3000来 accesses browsersync.cn and listens to all CSS files in its CSS directory.

"css/*.css"

PC and mobile browser Sync Test Tool Browsersync Usage Introduction