Mobile Web version development, debugging tips

Hehe said this topic a bit Xuan Ah, while idle down when I used a variety of mobile development debugging tools and methods listed to facilitate everyone to play with the mobile Web version Development (hereinafter referred to as the M version development).
Since the enumeration of various methods have a better, each has benefits, not in order, probably said

1. Chrome and other self-brought simulator

Do not remember chrome from that version began to include the phone simulator, which to enter the Web version of the development is simply a lowering of the threshold, development with great traversal, where the new version of the update includes network State simulation, device selection, UA, easy to develop and debug (can say very good very strong, I am a chrome heavy user), although Chrome has brought so many development traversal, there is still insufficient, chrome after switching the phone simulation status after the event is compatible, but the actual device on the real situation simulation is not available, because the user's mobile phone browser a variety of Version varies. Chrome is just a quick way to help you with the first step of verifying and eliminating the errors that are easily generated by the big department.


2. Css-debugger

This is a way to add outline to all page elements, the size of the box container to draw the current page element, his benefit is small enough, only a short 108 bytes (see below the reply will have more vigorous code) can be the page Dom occupies a full size, for the page construction of the students have help , but only for the adjustment page, no graphical manipulation tools, entry-level layouts you can try to use and track the debugging of your layout.



3. Chrome, Safari, etc. use your phone to connect to USB for local debugging

This way, you need to turn on the device's support for Safari, Chrome, and connect to the computer, corresponding to the computer-enabled version of the browser debugging. Its drawbacks are obvious, is that a single browser can only debug their own corresponding browser, and the device needs to connect the computer (yy, you have n more devices, it is impossible for each to take their own debugging it?) ), the following is appropriate for safari debugging




4. ADB Commissioning

This tool is the earliest debugging method, the author has spent half a day of strength will be debugging environment set up (self-search related articles too much), but the second time did not touch it, the problem is obvious, the environment depends on, need to install a lot of things, debugging still need USB connection, debugging is to start a server locally, It's not a sticker here.

5. Weinre

Compared to the above debugging methods of equipment direct connection, browser requirements, environmental requirements, weinre is still less requirements, weinre is a remote debugging tool, need to install on the debug machine (dependent on Java), and then start the port monitoring, there are many similar tutorials on the web. and the browser of the WebKit kernel can be debugged. Of course, he also has his own limitations, such as network requests and resources, performance tuning can not be used, and multiple terminals at the same time will cause the debug console switch; the only thing worth waking up is that the device can be remotely debugged (HTML, console).


6. Eclipse, Xcode use simulator

Although the use of these two tools but really feel not to engage in mobile development do not use this, debugging is very slow and need to install and familiar with such a large tool, of course, can go to Baidu's Open service platform (although this is very unstable, but for the need to test the platform more projects can try)

7. HTTP Proxy Server

This also has specific requirements, need to debug the server (Developer's machine) to install fiddler, Charles such software and then turn on the agent, let the machine need to test set HTTP proxy, through the phone and device connection debugging, the use of low cost, need to be in the unified network segment of the device for development and debugging, Suitable for grasping packets and analyzing information.

8. Configure the Hosts

If your machine is painted in developer mode (iOS jailbreak), then the red fruit will be the host of the phone directly to the machine's IP for local development, this way compared to the previous way is not to install the software set up HTTP proxy, if you are willful enough to brush the phone hahaha

Mobile Web version development, debugging tips