Mobile development Real-Machine debugging

Do mobile development Most of the time with the mobile phone interface, that is, you can only write code on the computer, the final effect is actually seen at another terminal. While various browsers provide developers with a lot of capabilities for simulating mobile devices, these capabilities generally meet our needs for debugging mobile devices, such as the phone developer model that Dew has previously introduced to you. But simulation is a simulation after all, it can not really achieve the same effect as the real machine. Therefore, it is necessary to try to test the final performance of our code on a real machine. Of course there are some, the following is the dew in the development process used by a number of real-machine debugging methods:

　First, the use of Weinre debugging

This method is an old one, and it is a slash-and-burn type for other debugging methods. Weinre is a debug package that itself provides a javascript that requires you to include the JS in the project file. First install the weinre, we install with Nodejs, using the-G global command, can be accessed under each of the following:

NPM install-g weinre

After installing Weinre, set the IP for listening to this machine:

Weinre--boundhost xxxxxxxxxxx

Then Weinre will assign you a listening ip,copy and then open it in the browser, you will see the following interface:

Insert the JS file from the bottom of the interface into your project file and introduce it in your project file:

<script src= "http:/your own ip:8080/target/target-script-min.js#anonymous" ></script>

To refresh your project, you can click on the first line of debug client user interface in the interface you just opened, and a new record is found on the entry. If you have multiple records, you can select one and switch to a different interface to start debugging the project:

The next thing you can do is start the real machine debugging:

Advantages of WEINRE Tools:

The only way for all debugging tools to be independent of other third-party software is to cross-platform, followed by cross-browser, and if you are developing on or other phonegap shell way, you will know that this way is more useful than other ways.

Weinre Disadvantages:

The introduction of JS files in your project requires manual deletion, which has a certain effect on the control of the Code and the control of the version. Quite inconvenient. But the biggest chicken is not this. Weinre The biggest chicken is only debugging style and elements, JS can not debug!! Yes, so it's basically walking on one leg.

Second, the UC developer browser:

Thanks to the domestic and so conscience company, for mobile developers to bring this artifact! UC Browser on the mobile phone share of the domestic is still pretty high. To turn on debug mode, you must download the UC Android version of the browser on your phone, which is the icon with a small wrench. Then check your phone IP. If you enter your phone ip+:9998 in the browser in Wi-Fi connection mode, the PC and phone must be in the same network segment! The browser on your phone will prompt you to open debug mode and click Confirm to go to the development panel. The process is very simple; (forgive the dew today without a cell phone, the picture is stolen): The following is the entry screen display

Is the interface you open in the developer browser, choose one to enter the development mode!

Advantages of UC mobile phone development tools:

Simple, easy to get started. As long as you ask for a UC developer browser, the rest of the software is not mandated. Have to say that the domestic mobile browser in the UC is walking in front.

Disadvantages of UC mobile phone development tools

Depending on other software devices, developers must download the UC developer tools. Do not cross the platform, ignoring the apple machine. This mode cannot be debugged or other apps have built-in browsers.

Third, chrome real-Machine debugging

Chrome debugging is actually similar to UC, the steps are relatively simple, the difference is that UC can be debugged under WiFi, Chrome does not, and must have hardware contact. First make sure that you have the latest version of Chrome on your phone and PC, and then connect your data cable to two devices. On the PC, open Chorme, enter Chrome://inspect,

So you can see your own device and open the Web page, please again the original dew today without mobile phone, to a blank picture:

The device URL appears under inspect, reload, close and other options, click Inspect will pop up a window, you can happily in the window to debug.

Advantages of chrome phone Debugging tools:

In the familiar development mode debugging, the operation is relatively simple. Personally, UC is better than chrome in this respect. It can be used on iOS as well as across platforms.

Chrome Phone debugging Tool Disadvantages:

It is obvious that, compared to UC, it is more cumbersome steps, no WiFi debugging, you must specify the type of mobile phone and PC browser (all chrome), this mode can not debug or other apps built-in browser.

Four, Safari developer tools:

The Dew cell phone is the Android system (hangs the Dead), the PC is the window system (hangs the death), therefore cannot debug the iphone in this way. But the next door boss with Apple products, encounter the iphone problem, also go over there debugging a bit, found that the Apple series is really pretty good. The fourth way to first get the hardware condition is the iphone and Mac. Unfortunately, the Windows version of Safari was unable to debug the iphone. The process is also relatively simple:

Enable features:Mobile: Set →safari→ advanced →web checker → on.

Mac side: safari→ preferences → advanced → display the "Development" menu in the menu bar.

After you start safari in OS X, connect to your IOS device with a USB cable and launch safari on this mobile device. By clicking "Develop" on the Safari menu on your computer, you can see the name of your IOS device, which is a submenu of all of Safari's tabs on your mobile device, and click on any one to start debugging.

Apple Series Benefits:

Convenient, simple, high-end atmosphere on the grade, you can debug the shell wrapped browser such as.

Apple Series Cons:

Needless to say, equipment is heavily dependent on its company's products, not to the people who have no money to buy its products.

V. Summary

　　Mobile development tends to mainstream, there are generally browser simulation functions can be done 90% of the work. However, the various styles and code compatibility issues appearing in many models and browser versions are not excluded. Mastering a real-machine debug is essential in the mobile development process. Personally, the dew is still more like the last way, because the dew development project to the built-in browser core as the final standard, this time debugging of course choose Apple Series debugging best. Dew can not afford to buy Apple products, see the boss used to debug the time is quite envious. Of course, the UC developer tools are also good.

Mobile development Real-Machine debugging