Chrome's developer tools can do a good job of modeling, but there's a difference between simulation and reality. So, the real machine test is must do, how to perform the real machine test effectively. Personal feeling, or browsersync used to compare the hand. This article will explain in detail how to apply browsersync for mobile real-machine testing
CharacteristicsBrowsersync allows the PC, the pages on each mobile device to respond to file changes in real time without refreshing the operation. Also, when you click on another device, the behavior is synced to other browsers as well.
InstallationBrowsersync is based on node. JS and is a node module, so you need to install Nodejs first
"Nodejs Installation"
Although the Nodejs official website provides the MSI file of node, but I tried several times under the WINDOW7 system, can not be installed successfully, and there will be your system have not been modified ... The prompt. Finally, I used another method to successfully install the Nodejs
"1" Download Node.exe
"2" Download the latest version of the NPM ZIP format compression Package
"3" in a certain location of the hard disk, such as the D drive to create a file Nodejs, the above two downloaded things are put here, NPM to unzip
"4" Configures two environment variables: one is the directory D:\nodejs to add Node.exe on PATH, one is to increase the environment variable Node_path, the value is D:\nodejs\node_modules
"5" Installation Express: Open the cmd command line (in the Nodejs directory, hold down the shift button, then right-click, the "Open command Window Here" option and click), use the command line to navigate to this node directory, type the instructions NPM install Express
After the "6" Installation is complete, enter node-v on the command line if the output Nodejs version is installed successfully
Set upAfter the Nodejs installation is complete, you need to make some simple settings for the Browsersync, including installation and monitoring
"1" Browsersync Installation
Open a terminal window and run the following command:
NPM install-g Browser-sync
"2" Browsersync monitoring
The files path is relative to the project (directory) that runs the command. If you need to listen to multiple types of files, you need to separate them with commas
" Css/*.css, *.html "
"3" Create a new index.html file in the Nodejs directory and set the following code
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><style>Div{Height:100px;width:100px;Background-color:LightBlue;} </style></Head><Body><Div>Test text</Div> </Body></HTML>
The desktop-side page opens as follows:
Mobile-side settingsIf you use mobile, first ensure that the mobile device and desktop device on the same LAN (generally, all connected to a router). Moreover, the mobile side cannot access localhost, need to find the computer's intranet IP. View the IP address as 192.168.1.100 by entering Ipconfig on the command line. So the address of the mobile-phone is http://192.168.1.100:3000
The mobile side is displayed as follows:
When you change the HTML file to the following code
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><style>HTML{Background-color:Pink;}</style></Head><Body><Div>Test text</Div> </Body></HTML>
No need to refresh, the mobile Web page automatically changes to the following display:
This way, you can start testing your mobile device with ease.
Mobile Web development for real-computer testing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
