Integrate Devtool to iOS

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 iOS App.

  • Integrate Devtool to iOS
  • Integrate Devtool to iOS

Version compatibility

weex sdkweex inspector

Integrate to iOS

Installing Dependencies

There are two choices to install dependencies:

From cocoapods

pod  'WXDevtool', '0.15.3', :configurations => ['Debug'],

I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly.

From source code

  1. git clone
  2. Copy source folder to your project.


  1. Choose options as the picture shows.



You can see the demo here Playground App.

Step 1. Add header file in AppDelegate.m

//1. From cocoapods
#import <TBWXDevtool/WXDevtool.h>

//2. From source code
#import "WXDevtool.h"

Step 2. Initialize inspector when the APP launched

You can see the WXDevtool header file as follows:

+ (void)setDebug:(BOOL)isDebug;

+ (BOOL)isDebug;

+ (void)launchDevToolDebugWithUrl:(NSString *)url;


**Note: The inspector API must be called before weex is initialized **

if your application is a pure weex project, you need to ensure that the initial value of setDebug is NO, otherwise it may be white screen on the first page of the weex page

  • setDebug

    setDebug is used to control the state of debug mode, when its value is YES, open the debug mode, otherwise closed.

  • (void)launchDevToolDebugWithUrl:(NSString *)url;

You can fix the link address by command weex debug --port 8888 --channelid 1, and connect debug server like below:


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [WXDevTool setDebug:NO]; 
  [WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"]; 

Step 3. Auto refresh

Q: Why do we need auto refresh feature?

A: As shown in future, when you click the JSDebug button, Javascript runtime environment will change from the phone (JavaScriptCore) to PC (Chrome V8), then Weex need to re-initialize the Weex environment, re-render the page. Page rendering is required for the developer to add on its own page.


Q: What kind of scene need to add refresh feature?

  • Click debugger button
  • Switch remoteDebug
  • Refresh inspect page

Q: How to add auto refresh feature?

Register events when Weex initialization.

[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];

Notes: You must cancel this event in the dealloc method. For example:

- (void)dealloc
    [[NSNotificationCenter defaultCenter] removeObserver:self];

For example, First you can destroy the current instance, and then re-create instance:

- (void)dealloc
    [[NSNotificationCenter defaultCenter] removeObserver:self];

destroy instance,and reCreate new instance,example:

  - (void)render
    CGFloat width = self.view.frame.size.width;
    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);

    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
        UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,  weakSelf.weexView);
    _instance.onFailed = ^(NSError *error) {


    _instance.renderFinish = ^(UIView *view) {
        [weakSelf updateInstanceState:WeexInstanceAppear];

    _instance.updateFinish = ^(UIView *view) {
    if (!self.url) {
    NSURL *URL = [self testURL: [self.url absoluteString]];
    NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
    [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];

You can see the details in this case WXDemoViewController.m

Last Updated: 3/1/2019
Excellent docUnusable doc