1.7.2 Devtools

Devtools

Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol, it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page, both Android and IOS platform are supported.

Install

 $ npm install  -g  weex-toolkit

usage

weex debug [options] [we_file|bundles_dir]
  Options:
    -h, --help           output usage information
    -V, --verbose        display logs of debugger server
    -v, --version        display version
    -p, --port [port]    set debugger server port
    -e, --entry [entry]  set the entry bundlejs path when you specific the bundle server root path
    -m, --mode [mode]    set build mode [transformer|loader]
    -w, --watch          watch we file changes auto build them and refresh debugger page![default enabled]

start debugger

$weex debug

this command will start debug server and launch a chrome opening DeviceList page. this page will display a qrcode ,you can use Playground App scan it for starting debug.

start debugger with a we file

$weex debug your_weex.we

this command will compile your_weex.we to your_weex.js and start the debug server as upon command. your_weex.js will deploy on the server and displayed in DeviceList page as another qrcode contain the url of your_weex.js

start debugger with a directory of we files

$weex debug your/we/path  -e index.we

this command will build every file in your/we/path and deploy them on the bundle server. your directory will mapping to http://localhost:port/weex/ use -e to set the entry of these bundles. and the url of "index.we" will display on device list page as another qrcode.

Features

Connect devices

devtools-main

Inspector

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

devtools-inspector

Element

native view element

native-element

weex dom element

dom-element

Network

show the total time and latency

inspector-network

show the header and response

inspector-network

Console

inspector-console

Resource

inspector-resource

Debugger

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

devtools-debugger

Breakpoint and CallStack

debugger-breakpoint

Integrate devtools

Android
- See the doc Weex devtools (Android), it will lead you to config and use it step by step.
IOS
- See the doc Weex devtools (IOS), it will lead you to config and use it step by step.