Remote Debugging Tools for mobile

Recently, since March, three mobile apps have been made, the main one is the development of Hybird.

Development tools for: Android Studio. Android Studio is a very powerful development tool and Webstorm is the same idea company, the development interface and shortcuts are very similar. It is ideal for web engineers to develop Hybird apps.

Front-end frame with: Cordova and angular, do the single page application. Because this piece of the company to maintain the purity of the interface and unity, the front end to the data need to do a series of operations, to meet their own data to render the page. So I use the angular framework.

I will continue to share with you some of the issues that hybird development needs to be aware of.

Today, we first sorted out the remote control method.

When using the web to develop mobile apps, the most confusing thing for a web developer who has just contacted Hybird development is debugging. In particular, JS breakpoints and code problems. The mobile side cannot be debugged like a PC-side browser by pressing the F12 on the console. Because now the web code to run the environment into the webview inside the browser (different system vendors will be embedded in the browsing for some tampering, especially the 4.4 system under the low version of Android mobile device, there will be some js,css compatibility issues)

Now I've summed up two ways of remote control:

One, FQ through the Chrome remote simulation debugging method.

Specific operation:

1, you need to first set up a mainactivity in this Java class

public void OnCreate (Bundle savedinstancestate)
{
    Super.oncreate (savedinstancestate);
    Set by <content src= "index.html"/> in config.
    Getdatas ();
   if (sdk_int>= build.version_codes. KITKAT) {//Allow remote control
        Webview.setwebcontentsdebuggingenabled (TRUE);
    }
}
2. Enter chrome://inspect/in the Chrome address bar #devices显示如下界面

Click to display the Debug interface

Access to the remote debugging console can be very normal PC-side Web debugging as used.

Benefits:

1, debugging is very convenient basic and PC Chrome debugging is the same. Breakpoint at any time, change style! It's so crooked!

2, do not need to operate the server, only need to be set on the client to debug. No residual debug code is left, affecting the submission of project code.

Disadvantage:

1, can only use data cable attached to the computer debugging (in fact, this is not remote debugging, the second debugging method is called real remote debugging).

2, can not simultaneously view debugging multiple running apps of the device (this is not necessary)

The 3,android4.4 system below WebView does not support this type of debugging. Hey, Dad. But now the phone is basically more than 4.4 of the system, my mobile phone two years ago to buy the cool is 4.4 system. There's no need to worry about this when developing a mobile-phone baby boot. Then if your development equipment is pad, then the pit, ah, our company's pad is basically 4.2 system (should be 4 years ago, 2012 out of) This piece does not support the remote debugging chrome.

Second, if your development equipment is under 4.4 system, you can use weinre to Debug.

Weinre I know there are two versions of the Java version of Java development (previously used, the feeling is not very convenient to switch to the Nodejs version later), and the other version is the Nodejs version.

Let's introduce the next weinre.

　　

The weinre (Webinspector remote) is a web-based Inspector (Webkit), remotely debugging tool that enables you to debug remote pages running on a mobile device directly on a PC with the help of a remote Web inspector, With Weinre, on the PC can instantly modify the target page html/css/javascript, the debugging process can be real-time display of the page on the mobile device preview, and synchronize the display of the device page error and warning information, you can view the network resources information, However, Weinre does not support breakpoint debugging. The project is currently part of the Apache Cordova.

Weinre Working principle

Two graphs to understand the working mechanism of weinre:

The meaning of the above three-storey structure:

Debug client: Local webinspector, remote debugging client.

Debug Server (Agent): local httpserver to establish communication with the debug client for the debug target page.

Debug target page (target): The page being debugged, the page has been embedded in Weinre's remote JS.

Using XMLHttpRequest (XHR) for HTTP communication between the client and the target page and the debug server, your usual use case is to build the debug client and server in the desktop development environment, and the debug target page is placed on the mobile device.

Because Weinre's debug client is based on Web Inspector Development, and the Web Inspector is only compatible with WebKit Core browser, the Chrome/safari client can only be debugged in Weinre browser.

I opened the debug client in the Chrome 38/39 version of the page whiteboard, the reason is unknown, understand the reason of the welcome message to me. It is normal for Safari browser to open.

Weinre System Support

IOS 3.1.3 or earlier does not support

WebOS 1.45 or earlier does not support

Platforms supported by the debug client

Weinre mac Program (bring your own client)-Mac OSX 10.6 64-bit

Google Chrome version 8 and above browser

Apple Safari 5 and later browser

Platforms supported by the debug target page

Android 2.2+ System Browser

PhoneGap in Android 2.2+

IOS 4+ Safari Browser

BlackBerry v6.x Simulator

Webos

chrome8+

safari5+

The problem with weinre that the Java version was inaccessible was that Weinre was acquired by PhoneGap, PhoneGap was acquired by Adobe, and Adobe acquired PhoneGap and donated phonegap to Apache, Apache puts PhoneGap in the Cordova project. Weinre also migrated from the original Java to the current JavaScript. The first two of the results of searching for weinre on GitHub are the official Weinre project.

This is just to introduce the next node version of the weinre specific steps: 1, if you have not installed node, then go to the official website to download node installation HTTPS://NODEJS.ORG/EN/2, through the NPM package tool download Weinre

3, open your own server, I use the tomact.

4, start weinre example: Weinre--boundhost 192.168.1.100--httpport 8081

5, after the service opens, enter http://172.16.1.145:8081/in your Chrome browser's address bar

　　

6, will <script src= "http://172.16.1.145:8081/target/target-script-min.js#anonymous" ></script> Insert into the page you need to debug

　

Go to the Debug page.

A few points to note:

1, your app must be connected to a server that matches your weinre boot.

2,weinre remote control can not be JS breakpoints, network requests and other functions may be achieved.

3, I used angular when writing applications, found that weinre debugging can not go very well to look at the style sheet, there will be conflicts.

4, do not need the device through the data cable attached to the device, you can view debugging multiple remote devices at the same time.

Remote Debugging Tools for mobile