Weex入门教程之5，debug调试，集成 Devtools 到 Android

详情查看官方文档https://weex-project.io/cn/references/advanced/integrate-devtool-to-android.html

集成 Devtools 到 Android

Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 Android 端如何接入 Weex Devtools。

Android 应用接入

添加依赖——Gradle 依赖

dependencies {
    ...
    /*接入weex inspector*/
    compile 'com.taobao.android:weex_inspector:0.10.0.5'
    compile 'com.squareup.okhttp:okhttp:2.3.0'
    compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
}

接入示例

通过在 XXXApplication 中设置开关打开调试模式
这种方式最直接，在代码中直接 hardcode 了开启调试模式，如果在 SDK 初始化之前调用甚至连 WXSDKEngine.reload() 都不需要调用，接入方如果需要更灵活的策略可以将 initDebugEnvironment(boolean enable, String host) 和 WXSDKEngine.reload() 组合在一起在合适的位置和时机调用即可。

public class WXApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        initDebugEnvironment(true ,false, "172.16.20.72");

        x.Ext.init(this);
        //x.Ext.setDebug(BuildConfig.DEBUG); // 是否输出debug日志, 开启debug会影响性能.

        try{

            InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
            WXSDKEngine.initialize(this,config);
        }catch (Exception ex){
            Log.i("xx",ex.toString());
        }
    }


    /**
     *@param connectable debug server is connectable or not.
     *               if true, sdk will try to connect remote debug server when init WXBridge.
     *
     * @param debuggable enable remote debugger. valid only if host not to be "DEBUG_SERVER_HOST".
     *               true, you can launch a remote debugger and inspector both.
     *               false, you can  just launch a inspector.
     * @param host the debug server host, must not be "DEBUG_SERVER_HOST", a ip address or domain will be OK.
     *             for example "127.0.0.1".
     */
    private void initDebugEnvironment(boolean connectable, boolean debuggable, String host) {
        if (!"DEBUG_SERVER_HOST".equals(host)) {
            WXEnvironment.sDebugServerConnectable = connectable;
            WXEnvironment.sRemoteDebugMode = debuggable;
            WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
        }
    }
}

注意：initDebugEnvironment(true ,false, “172.16.20.72”);使用

调用debug调试

首先先启动weex debug服务

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\Users\aaron>weex debug
start debugger server at http://172.16.20.72:8088

The websocket address for native is ws://172.16.20.72:8088/debugProxy/native
Launching Dev Tools...
New version[0.2.77] of Weex debugger detected! Please update.(npm install -g weex-toolkit)

ok,已经启动。

调用debug

public class MainActivity extends BaseActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//      setContentView(R.layout.activity_main);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        /**
         * WXSample 可以替换成自定义的字符串，针对埋点有效。
         * template 是.we transform 后的 js文件。
         * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         * width 为-1 默认全屏，可以自己定制。
         * height =-1 默认全屏，可以自己定制。
         */
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("build/mainTest.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

        WXSDKEngine.reload();
    }
}

注意：WXSDKEngine.reload();使用
当你的应用启动MainActivity.java这个页面时自然就调用到了WXSDKEngine.reload();方法。
然后在谷歌浏览器上打开debug server链接：

start debugger server at http://172.16.20.72:8088

http://172.16.20.72:8088
这里，就可以看到你要debug的应用了。

注意：第一次启动debug服务时，Android Studio不能处于 状态，否则设备连接不到debug服务，即你打开http://172.16.20.72:8088/，App List是没有显示任何设备的。先断开Android studio快速编译状态，启动debug服务，链接上设备，再启用Android studio快速编译状态，就应该可以啦。亲测有效…

浏览器需要集成chrome extension

devtool chrome extension提供了在debugger页面下查看页面dom结构以及对dom节点深度检查的功能
具体使用方法请参照weex devtool chrome extension

至此，你就可以尽情调试你的应用了。