5 ways to test mobile websites and simulate mobile browsers on your PC

Recently the company to develop the mobile version of the website, let me prepare to prepare knowledge, say I developed mobile site experience is really not much, the most tragic thing is my phone is a classic Nokia, and the company is not to be equipped with mobile phones, which is how annoying, no way, no cell phone can only use computer simulation

Looked up a lot of information, tried most of the methods, the following will be the efforts of the day to share to everyone, but also let everyone avoid reading so many articles, the following methods, are I personally test the success of the method, test environment WinXP.

First, chrome* browser

There are four ways in which the chrome analog phone works the same way, by disguising the user-agent and emulating the browser as an Android device. The following star is the recommended method.

1. Create a new chrome shortcut

Right click on the Chrome browser icon on the desktop, select "Copy" in the Popup right-click menu and copy a copy of the icon to the desktop. Right-click the copy, select Properties, open the appropriate dialog box, and add the following statement after the characters in the Target text box: "–user-agent=" Android "", such as:

Note that the user is preceded by two "-" and there is a space between "Chrome.exe" and "–user". When you're sure, open the new Chrome shortcut and enter 3g.qq.com to browse to a page that looks like it's open on your phone.

At this point can create a new user, it does not affect the original user access time is also access to the mobile version.

2. Simulate iphone and Android phones at once

Start – Start the browser by entering the following command in the run:

Simulate Google Android:

Chrome.exe--user-agent= "mozilla/5.0 (Linux; U Android 2.2; En-us; Nexus one build/frf91) applewebkit/533.1 (khtml, like Gecko) version/4.0 Mobile safari/533.1 "

Analog Apple iphone:

Chrome.exe--user-agent= "mozilla/5.0 (IPad; U CPU os 3_2_2 like Mac os X; En-US) applewebkit/531.21.10 (khtml, like Gecko) version/4.0.4 mobile/7b500 safari/531.21.10 "

This method is only available for special cases, because restarting Chrome will not restore normal user-agent, so it is one-time.

More user-agent please search by yourself.

3. Installing plugins

Plug-ins can easily switch various user-agent, it is convenient, but may be slightly image performance.

User-agent Selector Address: https://chrome.google.com/webstore/detail/user-agent-selector/ fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related

From what can be seen, there are many similar plugins, in fact, the functions are very similar.

4: Comes with simulator *

Open the Chrome Developer tool, press F12 (R32 version), then find the Gear button in the upper right corner, open the Settings panel, select Overrides, tick show ' Emulation ' view in console drawer (show "emulation" in console view).

Then close the Setup Panel, select the Elements panel (not the console), find the upper right corner to open the console panel, select the Emulation panel in the console panel, there are many options on the right, choose a click emulate, reset button can return to the default state.

After opening the simulation, open the http://xw.qq.com, you can see the following phone interface

This method is simple and easy to use and does not require a reboot to recommend this method.

Note: The first and second methods above need to close all open chrome windows before opening to work.

Second, Firefox* browser

1. Modify User-agent

Install plugins like Chrome to modify User-agent methods, search Wmlbrowser, XHTML Mobile profile, and user Agent switcher three plugins

2. Firefox responsive design + Modify user-agent*

The recent Firefox self-added responsive design features and 3D try to be great, open Firefox's own console (non-firebug) and find the responsive design button in the top right corner.

Switch to responsive design interface when open

But we see open QQ site is not automatically led to the mobile page of QQ, so only for the responsive design of the interface, to think of QQ cloud judgment, return to different pages do not adapt, here to cooperate with the above method, and then change the user-agent, you can achieve similar chrome debugging functions.

3.Firefox OS Simulator

Installation method refer to here: https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8#Installing

After the installation can open the following interface, the browser can open the Web site can be, but this method opens the computer site, not the mobile site, that is, his user-agent is not a mobile phone, so the response to the interface function, to judge the User-agent site does not work, access to QQ, Baidu and other return is the computer interface.

Third, opera* browse 1. Modify User-agent

Similar to Chrome and Firefox, you can install the plugin yourself, since opera12, opera switch to WebKit kernel, so you can install Chrome plug-in, you can also search for the plugin in Opera's store

User Agent changer Download: https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en

2.Opera Mobile Emulator + dragonfly*

Download the appropriate version, the installation will open the following interface:

Choose the platform on the left, the right choice of parameters, click to start, such as the next few faces, using the mobile phone opera friends will be very familiar, is the mobile phone opera

A more detailed introduction to Opera Mobile emulator is at the end of this article for reference.

But at this time, still can only see, can not debug the website of simulator, here need dragonfly cooperate to implement debugging, because opera12 after change the kernel, can't install dragonfly, all you need a opera12 browser, and Dragonfly offline package, After the configuration is specific how to connect please see here http://www.opera.com/dragonfly/documentation/remote/

All set up can be implemented on the computer to debug the Mobile Web page, as shown in:

Opera Mobile Emulator:http://www.opera.com/zh-cn/developer/mobile-emulator

Four, simulator *
1. Official Simulator *

Do Android Development is sure to know that the Android simulator, which is the official Google development environment, can simulate the Android environment, can also switch versions, can download the configured environment, and then open the Eclipes, directly open AVDM, wear an AVD, and then start, such as:

Waiting for a meeting time, will open the simulator, and the same as the Android environment, open the inside of the browser test. But my browser does not open do not know why, depressed very ah.

: http://developer.android.com/sdk/index.html

2.bluestacks

This is also a simulator, can self-search, I installed the computer will die, may be my Computer configuration can not, see the introduction or good.

Five, online testing

Online can only test the visual effects of the interface, can not be debugged, but also very good.

1.Mobile emulator*

Very good, fast, very concise interface, support a variety of platforms.

http://emulator.mobilewebsitesubmit.com/

2.opera Mini Simulator

Requires Java environment support, a single platform, opera produced, fast.

Http://www.opera.com/zh-cn/developer/opera-mini-simulator

3.webpage Mobile

To tell the truth did not get out for a long while, greatly despise the next bar, but can test the platform is comprehensive.

Http://www.webpagetest.org/mobile

Vi. Summary

The above listed a variety of methods, each has pros and cons, I hope you choose the right way for yourself, I recommend Chrome comes with the simulator and Opera Mobile Emulator + Dragonfly method. Because of these two methods, close to the real phone environment, but also debugging CSS and JS.

Of course, there is no mention of the best way is that you have a mobile phone, it is very good, with remote debugging, is the most ideal way.

5 ways to test mobile websites and simulate mobile browsers on your PC