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 debugstart debugger server at http://172.16.20.72:8088The websocket address for native is ws://172.16.20.72:8088/debugProxy/nativeLaunching 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

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