YorkShen closed pull request #214: Update integrate-devtool-to-android.md URL: https://github.com/apache/incubator-weex-site/pull/214
This is a PR merged from a forked repository. As GitHub hides the original diff on merge, it is displayed below for the sake of provenance: As this is a foreign pull request (from a fork), the diff is supplied below (as it won't show otherwise due to GitHub magic): diff --git a/source/guide/integrate-devtool-to-android.md b/source/guide/integrate-devtool-to-android.md index c81e16c91..0ea97a0bf 100644 --- a/source/guide/integrate-devtool-to-android.md +++ b/source/guide/integrate-devtool-to-android.md @@ -12,117 +12,102 @@ version: 2.1 Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your Android App. +#### Version compatibility + +| weex sdk | weex inspector | Debugger Server | +|----------|----------------|-----------------| +| 0.13+ | 0.12+ | 0.2.39+ | +| 0.8.0.1+ | 0.0.8.1+ | 0.2.39+ | +| 0.7.0+ | 0.0.7.13 | 0.2.38 | +| 0.6.0+ | 0.0.2.2 | - | +| 0.16.0+ | 0.12.1 | - | +| 0.17.0+ | 0.13.2 | - | +| 0.18.0+ | 0.13.4-multicontext | - | +| 0.19.0+ | 0.18.68 | - | + ## Integrate to Android ### Installing Dependencies -Weex Devtools depend on `weex_inspector`. I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector). There are two choices to install it: +Weex Devtools depend on `weex_inspector`. I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly. - From Gradle - ```gradle + ``` dependencies { - compile 'com.taobao.android:weex_inspector:0.13.2' + compile 'com.taobao.android:weex_inspector:0.18.10' } ``` +- From Maven + +``` + <dependency> + <groupId>com.taobao.android</groupId> + <artifactId>weex_inspector</artifactId> + <version>0.18.10</version> + <type>pom</type> + </dependency> + ``` + + - From source code - you need to copy the dir of inspector to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`. + you need to copy the dir of [inspector](https://github.com/weexteam/weex_devtools_android/tree/master/inspector) to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`. ```gradle dependencies { compile project(':inspector') } ``` - -#### Version compatibility - -| weex sdk | weex inspector | Debugger Server | -|----------|----------------|-----------------| -| 0.8.0.1+ | 0.0.8.1+ | 0.2.39+ | -| 0.7.0+ | 0.0.7.13 | 0.2.38 | -| 0.6.0+ | 0.0.2.2 | - | -| 0.16.0+ | 0.12.1 | - | -| 0.17.0+ | 0.13.2 | - | - + +- need include okhttp 2.3.0 + + ``` + dependencies { + compile 'com.squareup.okhttp:okhttp:2.3.0' + compile 'com.squareup.okhttp:okhttp-ws:2.3.0' + } + ``` ### Adding Debug mode switch -The key to control the opening and closing of the debug mode can be summarized as three rules: - -**No.1: Set the switch and Debugger Server addresses via `sRemoteDebugMode` and ` sRemoteDebugProxyUrl`.** - -`WXEnvironment` class has a pair of static variables mark Weex current debug mode: +The easiest way is reuse the code of playground. On the other hand QR code is not necessary, if you review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. There are two examples of how to open debug modes in the Playground App: -```java -public static boolean sRemoteDebugMode; // default close -public static String sRemoteDebugProxyUrl; // Debugger Server addresses -``` + - Demo 1: Set the debug mode via `XXXApplication` <br> -You have to set `WXEnvironment.sRemoteDebugMode` and `WXEnvironment.sRemoteDebugProxyUrl` at the right time, for example: +``` Java +public class MyApplication extends Application { + public void onCreate() { + super.onCreate(); + initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/); + //WXSDKEngine.reload(); + } +} -```java private void initDebugEnvironment(boolean enable, String host) { WXEnvironment.sRemoteDebugMode = enable; WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native"; } ``` -You can find detail and suitable way of initialize inspector in `Playground`. - - -**No.2: You must call `WXSDKEngine.reload()` method when `sRemoteDebugMode` was changed.** - -You can control a state of debug mode via the `WXEnvironment.sRemoteDebugMode`, but you need reset Weex runtime if you changed a state of debug mode. - -```java -private void initWXBridge(boolean remoteDebug) { - if (remoteDebug && WXEnvironment.isApkDebugable()) { - WXEnvironment.sDebugServerConnectable = true; - } + - Demo 2: Set the debug mode by scan QR code <br> - if (mWxDebugProxy != null) { - mWxDebugProxy.stop(false); - } - if (WXEnvironment.sDebugServerConnectable && (WXEnvironment.isApkDebugable() || WXEnvironment.sForceEnableDevTool)) { - if (WXEnvironment.getApplication() != null) { - try { - Class clazz = Class.forName("com.taobao.weex.devtools.debug.DebugServerProxy"); - if (clazz != null) { - Constructor constructor = clazz.getConstructor(Context.class, WXBridgeManager.class); - if (constructor != null) { - mWxDebugProxy = (IWXDebugProxy) constructor.newInstance( - WXEnvironment.getApplication(), WXBridgeManager.this); - if (mWxDebugProxy != null) { - mWxDebugProxy.start(new WXJsFunctions()); - } - } - } - } catch (Throwable e) { - //Ignore, It will throw Exception on Release environment - } - WXServiceManager.execAllCacheJsService(); - } else { - WXLogUtils.e("WXBridgeManager", "WXEnvironment.sApplication is null, skip init Inspector"); - WXLogUtils.w("WXBridgeManager", new Throwable("WXEnvironment.sApplication is null when init Inspector")); - } - } - if (remoteDebug && mWxDebugProxy != null) { - mWXBridge = mWxDebugProxy.getWXBridge(); - } else { - mWXBridge = new WXBridge(); - } +``` Java +if (WXEnvironment.isApkDebugable()) { + String devToolUrl = uri.getQueryParameter("_wx_devtool"); + if (!TextUtils.isEmpty(devToolUrl)) { + WXEnvironment.sRemoteDebugProxyUrl = devToolUrl; + WXEnvironment.sDebugServerConnectable = true; + WXSDKEngine.reload(XXXXX.getApplication(), false); + } } -``` - -In this way, You can control the debug mode flexibly. - -**No.3: Auto refresh page via `ACTION_DEBUG_INSTANCE_REFRESH` broadcast** - -`ACTION_DEBUG_INSTANCE_REFRESH` can be broadcast messages when the debug mode is switched or Chrome page refresh. You can use this mechanism to inform the current page to refresh in time. - -```java +``` + - Noteļ¼Auto refresh page via `ACTION_DEBUG_INSTANCE_REFRESH` broadcast + + `ACTION_DEBUG_INSTANCE_REFRESH` can be broadcast messages when the debug mode is switched or Chrome page refresh. You can use this mechanism to inform the current page to refresh in time. + +``` Java public class RefreshBroadcastReceiver extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { @@ -143,28 +128,6 @@ public class RefreshBroadcastReceiver extends BroadcastReceiver { } ``` -### Example - -The easiest way is reuse the code of playground. On the other hand QR code is not necessary, if you review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. There are two examples of how to open debug modes in the Playground App: - -- Set the debug mode via `XXXApplication` - - ```java - public class MyApplication extends Application { - public void onCreate() { - super.onCreate(); - initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/); - } - } - ``` - -- Set the debug mode by scan QR code - - You review the source code of playground. - - - Debug mode switch control: [`WXApplication.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java) - - Refresh control [`WXPageActivity.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java) - ## Known Issues ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services
