整合 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

注意：第一次啟動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

至此，你就可以盡情除錯你的應用了。