• Stars
    star
    165
  • Rank 228,906 (Top 5 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Remote debug for your native Android app using Chrome Developer Tools

Weex Devtools 中文版

GitHub release Codacy Badge Code Climate Issue Count GitHub issues Download

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 install [weex-devtool] (https://github.com/weexteam/weex-devtool) as debug server. And then the prompt chrome page will introduce you two main devtools functionalities Inspector and Debugger:

  • Inspector Inspector can be used to show your Element \ Network \ Console log \ Screencast \ BoxModel \ Native View and so on.

  • Debugger Debugger can be used to debug your bundle js source, you can set Breakpoint \ watch CallStack.

Install and launch devtools server

Open your terminal then type npm install -g weex-toolkit and run.Launch it just type and run the command weex debug, then a Chrome web page will be opened.

Use on an android device or emulator

Taste of first debug with playground

If you are a green hand to the debug of weex, we recommend you to try your first debug with playground, what you need to do is just launch the playground and scan the QR code shown in the debug page which wound opened if the devtools server have been launched. after you scan the QR code, the web page will list your connected devices.

devtools-main

How Debugger Works

Devtools expands Chrome Debugging Protocol and the mechanism of communication between client and debug sever is based on JSON-RPC.

Devtools Client

Devtools Client is integrated in App as aar, it connects to debug server through webscoket protocol with out permission check. I recommend you just packaged it in your debug version consider of the security mechanism.

Devtools Debug Server

Devtools Debug Server is the center node of the communication, it connects to both app and chrome, acts as the turn server of debugging protocol messages and the manager of the js runtime.

Chrome FrontEnd

Chrome's V8 engine acts as the javascript runtime, when debug mode is enabled, all the js code run on it. On the other side we also reuse most of the Chrome's debugging user interface, such as set breakpoint, see call stack and so on.

debug sequence diagram

Enable devtools in your own app

Of course you can reuse the code of playground to build your own app, that is the simplest way to let your app's js code debuggable. On the other hand QR code is not necessary, if your review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. following those steps you can do the same thing.

Gradle dependency on inspector.

There are two choices to set the dependency, the Choice A is recommanded if you have no change to weex_sdk or inspector, while if you use your own custom weex_sdk or inspector Choice B is suitable.

  • A - aar dependency from jcenter.
dependencies {
        compile 'com.taobao.android:weex_inspector:0.8.0.0'
}

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. All the release version will publish to the jcenter repo.

  • B - source code dependency.

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.

dependencies {
        compile project(':inspector')
}

Initialize in your XXXApplication file.

    public class MyApplication extends Application {
      public void onCreate() {
      super.onCreate();
      initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
      }
      private void initDebugEnvironment(boolean enable, String host) {
        WXEnvironment.sRemoteDebugMode = enable;
        WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
      }
}

Ship It!

  1. You must launch your bundle server firstly. In your weex dir, run command "./start";
  2. Launch your remote debug server. Run command weex debug, chrome will open a web page show a simply guidance and QR code;
  3. Launch your app and make sure debug mode was enabled. You will see a device list in the chrome web page opened by last step, each device item have two button, Debugger and Inspector;There are two way to enable debug mode: * scaning the QR code and handle the content just like the playground have done. * init it in the XXXApplication by calling initDebugEnvironment(true, "xxx.xxx.xxx.xxx"), if you call initDebugEnvironment(true, "xxx.xxx.xxx.xxx") after weex sdk inited, you need to call WXSDKEngine.reload() to refresh the runtime.
  4. Once you click the button Inspector chrome will open a page show the inspector view, on the other side, click the button Debugger chrome will open a new page to show the debug view;

OPTIONS

[OPTION] set your remote bundle server ip.
For example, in the playground it is in the `IndexActivity.java`, you need to change the value of `DEFAULT_IP` in IndexActivity.java from `"your_current_IP"` to a server ip like `"30.30.30.150"`:
    private static final String DEFAULT_IP = "30.30.30.150"; // "your_current_IP";
[OPTION] enable network inspection.
OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new OkHttpInterceptor());
Notice

The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip.

More Repositories

1

article

This repos is a third party collection, and is not developed nor maintained by Apache Weex.
1,223
star
2

hackernews-App-powered-by-Apache-Weex

Java
1,153
star
3

vue-framework-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
297
star
4

devtool-for-Apache-Weex

debugger tools with chrome devtool for Apache Weex
JavaScript
258
star
5

weex-vue-render

vue-render-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
143
star
6

devtool-iOS-for-Apache-Weex

Remote debug for your native iOS app using Chrome Developer Tools
Objective-C
124
star
7

analyzer-of-android-for-Apache-Weex

Java
109
star
8

devtool-extension-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
31
star
9

vue-loader-for-apache-weex

vue-loader-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
30
star
10

picker-for-Apache-Weex

picker for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
20
star
11

previewer-tool-for-Apache-Weex

a tool help user to preview their weex files
JavaScript
20
star
12

downgrade-for-Apache-Weex

A module in order to downgrade to web for Apache Weex
JavaScript
19
star
13

intellij-plugin-for-Apache-Weex

intellij-plugin-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Kotlin
19
star
14

pack-android-tools-for-Apache-Weex

pack-android-tools-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Java
13
star
15

a-builder-for-apache-weex

a-builder-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
13
star
16

analyzer-of-iOS-for-Apache-Weex

analyzer-of-iOS-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
9
star
17

styler-transformer-for-Apache-Weex

styler-transformer-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
9
star
18

templater-for-Apache-Weex

templater-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
7
star
19

weex-ui

Vue
7
star
20

xtoolkit-for-Apache-Weex

A toolkit for CLI-for-Apache-Weex
JavaScript
7
star
21

DSL-transformer-for-Apache-Weex

DSL-transformer-for-Apache-Weex is is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
7
star
22

Rax-Framework-for-Apache-Weex

Rax-Framework-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
7
star
23

pack-ios-tools-for-Apache-Weex

pack-ios-tools-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
5
star
24

rx-webpack-plugin-for-Apache-Weex

This repos is a third party collection, and is not developed nor maintained by Apache Weex.
4
star
25

scripter-transformer-for-Apache-Weex

<script> transformer for Apache Weex
JavaScript
4
star
26

gulp-for-weex-transformer

gulp plugin for weex transformer
JavaScript
4
star
27

eslint-config-weex-for-Apache-Weex

eslint-config-weex-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
28

Template-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
29

vue-precompiler-for-apache-weex

vue-precompiler-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
30

pack-create-for-Apache-Weex

pack-create-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
31

vdom-tester-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
32

Plugin-demo-for-Apache-Weex

Plugin-demo-for-Apache-Weex is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
33

rx-generator-for-Apache-Weex

rx generator for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
34

weex-loader

JavaScript
2
star
35

website

The source code of weex website.
SCSS
2
star
36

wd-for-Apache-Weex

wd-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
2
star
37

pack-lib-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
38

env

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
39

Container-iOS-plugin-for-Apache-Weex

Container-iOS-plugin-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
1
star
40

pack-common-for-Apache-Weex

pack-common-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
41

wwp-for-Apache-Weex

wwp for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
42

weex-toolkit

JavaScript
1
star
43

android-plugin-for-weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
Java
1
star
44

vue

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
JavaScript
1
star