Across the mobile terminal synchronization test of
Introduction to the
If you are a Web developer for more equipment, you might use a number of different equipment and configuration, to test the website and Web app.Synchronization test on this can help a lot, it can automatically in multiple devices at the same time interact with the browser to perform the same operation.
Synchronization tests can help us to solve the problem of two special time consuming:
; Do you want to test the URL of the maintain all equipment synchronization.Manually on each
device to load the URL out too much, not only need a longer time, and are more likely to miss the
; Synchronous interaction.More equipment synchronously loading a page for visualization test has
been very good, but for interactive test, we also very hope to synchronize between rolling
equipment, click on the interactive behavior, etc.
Fortunately, in addition to the direct access to the destination, there are a few tools, they aim to improve the workflow from desktop to mobile devices.In this article, we will look at Ghostlab, Remote Preview, Adobe Edge, Inspect and Grunt these tools.
This is my desk.Well, it used to be my desk.Now it's just a mobile museum. tool
(translator note: when the website has supported Windows 32-bit and 64 - bit version download, their interaction is better than Mac version of oh)
GhostLab for Mac by Vanamco
GhostlabIs a site for on multiple devices and Web App synchronization test, designed the commercialization of the Mac application (49).It only needed a few set can make you real time synchronization:
; Click on the
; (such as the login form, the registration form)
This makes the test site on multiple devices end-to-end user experience is very simple.Once on the device's browser open web pages, any change (including refresh) navigation will lead to connected with the other devices can refresh immediately.Ghostlab support to monitor local directory, so when you save the edit local file, the page will automatically refresh, everything is always in sync!
Build Ghostlab is an easy process.To begin using, download, install and runA trial version(or the full version, if you are a cake rich handsome).Mac and then will need to test equipment connected to the same Wifi, so they can sense each other.
Once Ghostlab began to run, you can click on the "+" add URL for testing, or simply pulled from your browser address bar.Or, by putting a want to test the local folders to the main window, to create a new site entry.In this article, I truly testediOS, andInstalled on the client side at the same time, we canstart to prepare monitoring page.You have to ensure that all devices are connected on the same network, so as to work normally.
Start the table Edge, Inspect, the Edge of the Chrome Inspect plug-ins, and Edge Inspec application of mobile devices (below) :
To the Edge, Inspect extension connect a device
Can now be on the desktop to navigate to HTML5Rocks.com, our mobile devices will automatically navigate to the same page.
Across multiple connection URL navigation
In extension, you can see the equipment listed next to the < > symbol, as shown in the screenshot.Click it will launch a vein as examples, which allows you to check and debug web page.
Beside the connection device of < > symbol is used tostart vein as the debugger
Using vein as debugging
Edge Inspect extension also support from the connection device to generate screenshots.This is of great help to layout the relevant tests, can also share the screenshot to others.
Edge, Inspect the generated screenshots
Adobe has already paid the CC users, Edge Inspect is a good solution.It needs several matters needing attention, however, such as each equipment need to install a dedicated client, therefore may be more than Ghostlab some additional set up work.
Remote Preview (Mac, Windows, Linux)
Remote PreviewIs a managed HTML pages and content, and can be displayed on multiple devices of the open source tools.
Remote preview will launch an XHR request every 1100 milliseconds, to check the URL if there is any change in the configuration file.If a change is detected, the script will update each device in the iframe SRC attribute, the page is loaded.If no changes are detected, the script will keep polling until change is detected.
Across 27 + device synchronization test URL
Connect all the devices together, and easily across devices to modify the URL, it is very good.Overhand steps:
1. Download Remote Preview and move all the files that is accessible to the local server.The server
can be Dropbox, a development server, or the other.
2. On all the target device load "index.html files downloaded.This page will take you want to test the
page as the iframe loaded in.
3. Modify "url. TXT" (include in the download package and on the server), will need to test the url to
a file, and save.
4. Remote Preview will perceive url. TXT changed, then the page will automatically refresh all
equipment, to load your url.
Although the Remote is a lo-fi Preview solution, but it is free and available. Grunt + Live-Reload (Mac, Windows, Linux)
Grunt(andYeoman) is facing the front of the command line tools included with the scaffolding and build the project.If you are already using these tools, and installedlive-reload, then upgrade your workflow will be very simple, across the device testing is no longer a problem, any changes in the editor will trigger all equipment to reload the page.
You may already use grunt server command.In the root directory of your project, it has been monitoring all the source files, once found that changes will be automatically refresh the browser window.Thanks to our the grunt - contrib - watch tasks to run the server.
If you happen to use a Yeoman as scaffold project, it creates a Gruntfile, containing all you need to use live - reload on the surface of the table.In order to support across devices, you only need to change a property - the hostname () on a desktop, it in the configuration of the connect.If you notice that the hostname is set to localhost, need only 0.0.0.0 instead.Then perform as usual grunt server, a new window will open, you can display the page.URL is likely to be suchhttp://localhost:90009000 is the port number ().
Open a new TAB or a terminal, use ipconfig | grep inet command to find out the IP system, such as 192.168.32.20.The final step, open a browser on a mobile device, such as Chrome, then enter the IP and port number, such as 192.168.32.20.
Done!Live - reload now allows you to changes to the source file on the desktop, synchronous refresh the display in the desktop and mobile browsers, handsome!
Desktop source files to modify real-time refresh will trigger the desktop and mobile browsers
Across the equipment real-time refresh of actual combat.Any editing will real-time display, is very helpful for responsive design test.
And a YeomanMobile generator projectAvailable, making the setting this workflow into an easy thing.
Emmet LiveStyle is a browser and editor plug-in, it can support real-time editing CSS.Currently only support Chrome, Safari and Sublime does Text, support two-way editor (editor to the browser, and vice versa).
Emmet LiveStyle not mandatory when you modify the file browser fully refreshed, instead make CSS editing across DevTools remote debug protocol.This means that no matter in the desktop version Chrome or Android version of Chrome, can see edit content changes.(translator note: the meaning of the author is, there is no real time refresh the page can see the effect of source file modification, actually the principle is the same as the inspector)
LiveStyle there is a "view mode", is to test the response across the window and equipment design.In multiple view mode, any changes within the editor will synchronize to all of the window, so is modified within the developer tools.
In order to real time editing CSS, need to install LiveStyle package
1. Start the Sublime does Text, and open the project in a CSS file
2. Open Chrome, and open the page you want to edit the CSS
3. Open the developer tools, and LiveStyle panel, check the "Enable LiveStyle" option.Note: to keep
open the developer tools in the editing process, so the editors can only take effect in real time.
4. , after all this open a style list will appear in the left, your editor file appear on the right.Select the
file with the browser editor.It again, check it out!
Now, when you edit, create, open or close the file, the editor's file list will be updated automatically.
Sublime does the CSS changes will immediately show in different browser window and simulator
Across the equipment test is still a new field at present, development changing, is not a new tool.Glad that now there are some free or commercial tools, provides the test ability across multiple devices.
Still, there are many places can be improved, we encourage you to think about how to further improve the equipment testing tools.Any reduce installation time, increase across the equipment working process is a win-win result.
I may be in the testing process with these tools, one of the biggest problems is the equipment regularly to enter a dormant state.This is not a fatal weakness, but after a period of time will pest.If possible, can the devices do not sleep as a solution, but remember, it will run out of your battery, unless it is plugged in.
Personally, I didn't big problems in the course of Ghostlab use.$49 some people may think it is a little bit high, but remember, if you often use it, can be more or less pay for himself.The best thing about the installation of them don't have to worry about installation and management of each target device client.The same URL in any place is effective.
As for Adobe Edge Inspect, I think every device installation and use of a particular client is a bit complicated.I also found that it did not consistently linked to refresh all of the client, which means I have to do some implementations himself in Chrome extension.It also needs to subscribe to the Creative Cloud, is limited to load in the client's site, rather than your device in the browser to load the website.This limits you can't do some precise test.
Remote Preview function just as the name implies, but very light weight.This means that any beyond across the device's ability to refresh the web site, you need a more advanced tools to meet.Such as it can't synchronous rolling or click.
If you're just looking for a free cross-platform solutions as astart, I recommend using Remote Preview.For friends in pay company looking for solutions, in my experience Ghostlab are the best, so I recommend it, although it only supports Mac.(translator note: Windows have been, you don't have to worry sang the author) for Windows users, Adobe Edge Inspect is your best choice, remove the strange set, it can meet the needs of work.
Grunt and LiveStyle to daily development iterations, also is pretty good.