New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weex调试神器——Weex Devtools使用手册 #50

Open
littleseven opened this Issue Jul 20, 2016 · 22 comments

Comments

Projects
None yet
@littleseven

littleseven commented Jul 20, 2016

伴随着weex的正式开源,对一款针对weex框架的简单易用的调试工具的呼声也日趋强烈。weex devtools就是为weex前端和native开发工程师服务的一款调试工具,可同时检查weex里DOM属性和Javascript 代码断点调试,支持IOS和Android两个平台。

Chrome devtools对于前端开发者来说最熟悉不过,有广泛的用户基础.weex devtools实现了Chrome Debugging Protocol,其使用体验和普通的web开发一致,对于前端开发者是零学习成本,其主要功能分为两大部分——Debugger和Inspector,第一个版本已经随weex0.6.1 发布, 手淘也已接入。

以下是Devtools的使用介绍,欢迎大家试用。有任何问题建议,请提交这里,会很快得到解答。

Devtools 主要功能一览

连接设备

devtools可以动态检测客户端的连接绑定请求,同时连接/调试多个device(或者模拟器)是很容易的事情。连接的客户端显示在“Device List"界面,如下图所示。点击对应device的Debugger按钮即开始调试流程,并弹出JS断点调试的页面;随后点击Inspector按钮可弹出调试DOM的页面。
devtools-main

Debugger

这个是用来调试weex中的js前端代码的页面,“Sources” tab能够显示所有JS源码,包括jsFramework和bundle代码。可以设置断点、查看调用栈,功能和普通的chrome浏览器调试一样。"Console" 控制台显示前端的Log信息,并能根据级别(info/warn/error等)和关键字过滤。

devtools-debugger

Breakpoint and CallStack

debugger-breakpoint

Inspector

Inspector 功能丰富,能够用来查看 Element \ Network \ Console log \ ScreenCast \ BoxModel \ Native View 等。

devtools-inspector

Element

这里展示的是在Android/iOS上的native DOM树,及其style属性,和layout图。鼠标在DOM 树移动时,在device(或模拟器)上对应节点会高亮显示,有助于native开发者定位和发现节点。screencast只是对屏幕图像拷贝,在远程调试时能看到远程设备界面,数据网络下screencast也将有较大流量花销,,如果设备就在手头儿则建议关掉。
inspector-element

Network

这里展示的是bundle资源加载网络访问的性能。所以如果bundle资源在device本地,Network是没有数据的。

查看网络请求的总耗时和延时

inspector-network

查看网络请求的header和response

inspector-network

控制台

这里显示的是Android/iOS上的native log,并不是前端log(显示在Debugger页面)。同样native log也有对应级别--warn/error等,和关键字过滤,native开发查询很方便。
inspector-console

资源

这里和Network一样,远端访问的资源文件会显示在这里,没有实际作用。因为在Debugger页面,"Sources"里已经有源码并可以断点调试。不过假如你的应用里有数据库文件,在这里可以方便的查看而无需root,这是非常有用的。
inspector-resource

如何安装和启动devtools

无论是跑在IOS或者Android端,weex-devtool都是必需的,用来启动服务器和chrome页面。

安装

$ npm install  -g  weex-toolkit

用法

weex debug [options] [we_file|bundles_dir]

选项:

-h, --help           显示帮助
-V, --verbose        显示debug服务器运行时的各种log
-v, --version        显示版本
-p, --port [port]    设置debug服务器端口号 默认为8088
-e, --entry [entry]  debug一个目录时,这个参数指定整个目录的入口bundle文件,这个bundle文件的地址会显示在debug主页上(作为二维码)
-m, --mode [mode]    设置构建we文件的方式,transformer 最基础的风格适合单文件,loader:wepack风格 适合模块化的多文件.默认为transformer

如何在设备或者模拟器上调试

weex调试初体验之playground

如果你是一名weex调试的新手,那么推荐你先下载playground体验一下devtools调试js bundle的基础流程.点击这里观看视频演示

  • 前提:
    • 安装weex-toolkit, 内含调试命令weex debug
    • android/iOS设备及pc已联网,若位于不同网段请确保防火墙可访问性

  • 调试步骤:
    • 启动debug server.
      执行命令weex debug将启动 debug server.如果启动成功将会在chrome打开一个welcome页面,在网页下方有一个二维码.
    • 启动playground并扫码.
      点击启首页左上角的扫码按钮扫码上一步中网页下方的二维码.此时welcome页面将会出现你的设备信息.playground进入loading页面,等待你的下一步操作.
    • 点击网页上的Debugger按钮.
      app结束loading进入debugging状态.同时chrome将会打开debugger页面.按照页面提示打开该页的JavaScript控制台并进入source tab.
    • 设置断点刷新当前页.
      点击playground首页list中的任意项将打开一个weex bundle,此时在Sources里会出现相应的js 文件,设置断点并刷新playground 即可调试.
    • 点击网页上的Inspector 按钮.
      chrome会打开inspector页面,可以查看Element, Console, Network状态.

weex调试初体验之应用

如果是接入weex的应用想调试自己的bundle代码,有以下几个方式:

  1. 借助playground扫码调试we文件
  • 先确定playground已经是可调试状态
  • 执行weex-toolkit 命令,"weex debug xxx.we",会自动编译打包we文件,并在chrome的device 列表页面最底下新生成一个二维码。
  • 用playground扫描新二维码,手机上即显示xxx.we的结果。相应在"Debugger"和"Inspector"页面调试。
  1. 借助playground扫码调试js bundle文件
  • 先确定playground已经是可调试状态
  • 用二维码生成器为xxx.js 生成一个二维码。
  • 用playground扫描新二维码,手机上即显示xxx.js的结果。相应在"Debugger"和"Inspector"页面调试。
  1. 直接修改应用,接入devtools接口
// host 表示debug server的ip或域名
WXEnvironment.sRemoteDebugMode = enable;
WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
#import "WXDevTool.h"
[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://host:8088/debugProxy/native"];
@sven820

This comment has been minimized.

Show comment
Hide comment
@sven820

sven820 Aug 22, 2016

为什么我打开Debugger, iOS模拟器界面就不能交互了, 点不动了

sven820 commented Aug 22, 2016

为什么我打开Debugger, iOS模拟器界面就不能交互了, 点不动了

@yangshengtao

This comment has been minimized.

Show comment
Hide comment
@yangshengtao

yangshengtao Aug 24, 2016

你的业务逻辑应该没有做页面刷新

yangshengtao commented Aug 24, 2016

你的业务逻辑应该没有做页面刷新

@zhouyuexie

This comment has been minimized.

Show comment
Hide comment
@zhouyuexie

zhouyuexie Sep 29, 2016

如果你手机一片空白,那么就是你顺序错了:

  1. 首先weex debug ****.we .
  2. 弹出网页后打开你的手机playground扫码(注意:这里扫的是最左边的码)
  3. 然后返回了源界面,再扫最后出现的码,也就是你项目的码.

zhouyuexie commented Sep 29, 2016

如果你手机一片空白,那么就是你顺序错了:

  1. 首先weex debug ****.we .
  2. 弹出网页后打开你的手机playground扫码(注意:这里扫的是最左边的码)
  3. 然后返回了源界面,再扫最后出现的码,也就是你项目的码.
@Neeeo

This comment has been minimized.

Show comment
Hide comment
@Neeeo

Neeeo Sep 29, 2016

为什么我用 Inspector ,左侧看不到客户端界面?
用的example里的hello.we, 命令时 weex debug hello.we
AppName: WeexPlayground
DeviceMode: liPhone:10.1
platform: iOS
WeexVersion: 0.7.0

Neeeo commented Sep 29, 2016

为什么我用 Inspector ,左侧看不到客户端界面?
用的example里的hello.we, 命令时 weex debug hello.we
AppName: WeexPlayground
DeviceMode: liPhone:10.1
platform: iOS
WeexVersion: 0.7.0

@richardyuq

This comment has been minimized.

Show comment
Hide comment
@richardyuq

richardyuq Oct 28, 2016

牛逼坏了!

richardyuq commented Oct 28, 2016

牛逼坏了!

@MaryWu

This comment has been minimized.

Show comment
Hide comment
@MaryWu

MaryWu Nov 1, 2016

你用npm install -g weex-toolkit更新devtools到最新再试下

MaryWu commented Nov 1, 2016

你用npm install -g weex-toolkit更新devtools到最新再试下

@ChenZhangQuan

This comment has been minimized.

Show comment
Hide comment
@ChenZhangQuan

ChenZhangQuan Jan 7, 2017

在applist点击debug按钮后
终端:
The websocket address for native is ws://192.168.1.57:8088/debugProxy/native
Launching Dev Tools...
can not join session,unknown sessionId[null]
@(/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/lib/components/P2PSession.js:218:24)

网页:
Warning:The session with native was closed,please restart your native app!
请问是啥原因。

ChenZhangQuan commented Jan 7, 2017

在applist点击debug按钮后
终端:
The websocket address for native is ws://192.168.1.57:8088/debugProxy/native
Launching Dev Tools...
can not join session,unknown sessionId[null]
@(/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/lib/components/P2PSession.js:218:24)

网页:
Warning:The session with native was closed,please restart your native app!
请问是啥原因。

@Chengran888

This comment has been minimized.

Show comment
Hide comment
@Chengran888

Chengran888 Jan 9, 2017

weex debug xxx.we 报错,但是weex debug 可以

Chengran888 commented Jan 9, 2017

weex debug xxx.we 报错,但是weex debug 可以

@zhaolijiu

This comment has been minimized.

Show comment
Hide comment
@zhaolijiu

zhaolijiu Jan 16, 2017

楼上应该是路径问题?

zhaolijiu commented Jan 16, 2017

楼上应该是路径问题?

@exolution

This comment has been minimized.

Show comment
Hide comment
@exolution

exolution Jan 16, 2017

@Chengran888 请贴一下错误信息 谢谢~

exolution commented Jan 16, 2017

@Chengran888 请贴一下错误信息 谢谢~

@kingyang

This comment has been minimized.

Show comment
Hide comment
@kingyang

kingyang Jan 20, 2017

@littleseven @exolution
建议更新一下 weex debug [options] [we_file|bundles_dir] options参数文档
-H 帮助
-h 为host信息

kingyang commented Jan 20, 2017

@littleseven @exolution
建议更新一下 weex debug [options] [we_file|bundles_dir] options参数文档
-H 帮助
-h 为host信息

@csvwolf

This comment has been minimized.

Show comment
Hide comment
@csvwolf

csvwolf Feb 8, 2017

Inspector 提示:
image

"weex-devtool": "^0.2.76"

csvwolf commented Feb 8, 2017

Inspector 提示:
image

"weex-devtool": "^0.2.76"

@happybobo

This comment has been minimized.

Show comment
Hide comment
@happybobo

happybobo Feb 21, 2017

用了[WXDevTool setDebug:YES]界面就白屏了,去除后又正常

happybobo commented Feb 21, 2017

用了[WXDevTool setDebug:YES]界面就白屏了,去除后又正常

@captain-black

This comment has been minimized.

Show comment
Hide comment
@captain-black

captain-black Feb 27, 2017

@happybobo 我也是遇到同样问题

captain-black commented Feb 27, 2017

@happybobo 我也是遇到同样问题

@dreamerff

This comment has been minimized.

Show comment
Hide comment
@dreamerff

dreamerff Mar 28, 2017

@ChenZhangQuan 我也遇到同样的问题,请问你知道是什么原因了吗?

dreamerff commented Mar 28, 2017

@ChenZhangQuan 我也遇到同样的问题,请问你知道是什么原因了吗?

@yclooper

This comment has been minimized.

Show comment
Hide comment
@yclooper

yclooper Apr 24, 2017

为什么我运行weex debug chrome不能正确显示呢?chrome提示“您被禁止访问互联网”,让我检查防火墙,但是我的防火墙的权限是给了的啊!

yclooper commented Apr 24, 2017

为什么我运行weex debug chrome不能正确显示呢?chrome提示“您被禁止访问互联网”,让我检查防火墙,但是我的防火墙的权限是给了的啊!

@Juice007

This comment has been minimized.

Show comment
Hide comment
@Juice007

Juice007 Oct 31, 2017

集成原生的devtool运行会报错,issue已提出↓
weexteam/weex-devtool-iOS#21

Juice007 commented Oct 31, 2017

集成原生的devtool运行会报错,issue已提出↓
weexteam/weex-devtool-iOS#21

@Aisheng

This comment has been minimized.

Show comment
Hide comment
@Aisheng

Aisheng Nov 24, 2017

@happybobo 关于开启调试后面就显示白屏的问题,文档上面写的是WXEnvironment.sRemoteDebugMode = enable; 改成WXEnvironment.sDebugServerConnectable = enable; 好像就可以了, 反正我是可以了,

Aisheng commented Nov 24, 2017

@happybobo 关于开启调试后面就显示白屏的问题,文档上面写的是WXEnvironment.sRemoteDebugMode = enable; 改成WXEnvironment.sDebugServerConnectable = enable; 好像就可以了, 反正我是可以了,

@wqycsu

This comment has been minimized.

Show comment
Hide comment
@wqycsu

wqycsu Apr 8, 2018

weex debug生成的二维码使用playground app扫码无法出现自己的页面,而weex debug xxx.vue可以调试,这是为什么呀,求指导。

wqycsu commented Apr 8, 2018

weex debug生成的二维码使用playground app扫码无法出现自己的页面,而weex debug xxx.vue可以调试,这是为什么呀,求指导。

@ifelseboyxx

This comment has been minimized.

Show comment
Hide comment
@ifelseboyxx

ifelseboyxx May 15, 2018

@wqycsu 我遇到和你一样的问题了,weex debug xx.vue 单个页面是可以的,但是我想调试整个流程,weex debug 就是空白的。有人遇到同样的问题吗?是不是我姿势不对?

ifelseboyxx commented May 15, 2018

@wqycsu 我遇到和你一样的问题了,weex debug xx.vue 单个页面是可以的,但是我想调试整个流程,weex debug 就是空白的。有人遇到同样的问题吗?是不是我姿势不对?

@ifelseboyxx

This comment has been minimized.

Show comment
Hide comment
@ifelseboyxx

ifelseboyxx May 15, 2018

weex debug 白屏,weex debug xx.vue 单个页面可以。
然后启动的 Xcode 模拟器是 iPhone 6 的,这个启动的模拟器可以换吗?比如想跑 iPhone X 的

ifelseboyxx commented May 15, 2018

weex debug 白屏,weex debug xx.vue 单个页面可以。
然后启动的 Xcode 模拟器是 iPhone 6 的,这个启动的模拟器可以换吗?比如想跑 iPhone X 的

@WangXiZhu

This comment has been minimized.

Show comment
Hide comment
@WangXiZhu

WangXiZhu May 25, 2018

=======更新=======

本地�在 node_module下删掉weex相关的npm包,在重新安装就好了


本地 weex debug启动不了,不知道是否跟node版本有关系
image

WangXiZhu commented May 25, 2018

=======更新=======

本地�在 node_module下删掉weex相关的npm包,在重新安装就好了


本地 weex debug启动不了,不知道是否跟node版本有关系
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment