Weex使用Debug调试

本文假定你已安装好weex所需环境：
1、首先安装 weex-toolkit ，它是官方提供的命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。
2、其次需要了解 weex-devtool，分为android和ios平台，我这边主要讲解 weex-devtool-iOS
一、添加IOS平台代码
项目根目录下运行：
weex platform add ios
运行完毕，会发现platform文件下新增一个ios项目
二、安装IOS平台调试框架
下面是项目的podfile配置

platform :ios, '8.0'
#inhibit_all_warnings!

def common
    pod 'WeexSDK'
    pod 'WeexPluginLoader'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
    pod 'WXDevtool', '~> 0.15.3',:configurations => ['Debug']
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

去到IOS项目根目录下运行pod install 会安装好所有依赖
三、初始化调试框架
AppDelegate.m代码如下
1、导入头文件
#import
2、运行调试工具

{
    //    [WXDevTool setDebug:YES];
    [WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.131.8:8088/debugProxy/native"];
    .....
}

注意url为你本地Websocket Address For Native，如下

image.png

3、开始浏览器调试
调试某个文件：
weex debug src/pages/Home.vue

4、查看刚才自动开启浏览器，点击Debugger进入开发模式
如下图：

image.png

5、设置断点，并打开App，浏览器会进入断点，后面跟普通js调试无差别
下面是调试界面：

image.png

如有任何问题和建议，欢迎留言。