Introduction to PC and mobile browser synchronous test tool Browsersync, test tool browsersync

Introduction to PC and mobile browser synchronous test tool Browsersync, test tool browsersync

In mobile Web page development, various problems are not easily discovered due to inconvenient debugging. But now with Browsersync, everything is done.

If you are not familiar with Browsersync, you can refer to Browsersync's Chinese website.

Quick start in five minutes

1. Install node. js before using Browsersync. For detailed installation process, see install nodejs in windows.

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

3. Start BrowserSync.

If you want to listen.cssFile, you need to use the server mode. BrowserSync starts a small server and provides a URL to view your website.

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

To listen to multiple types of files, separate them with commas.

// -- Files path is relative to the project (directory) that runs the command browser-sync start -- server -- files "css /*. css ,*. html "// if your file level is deep, you can use ** (. ..css CSS. html file. Browser-sync start -- server -- files "**/*. css, **/*. html"

In this case, you only need to connect the mobile phone to the same network as the PC, and scan the web page with the mobile browser to Achieve Synchronous debugging.

If you already have other local server environments such as PHP orProxy Mode. BrowserSync uses the proxy URL (localhost: 3000) to view your website.

Create a local PHP server environment and bind Browsersync.cn to access the local server. Run the following command to access Browsersync.cn from localhost: 3000, and listen to all css files in the css directory.

browser-sync start --proxy "Browsersync.cn" "css/*.css"