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.
$ npm install -g weex-toolkit
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]
$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.
$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
$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.
Inspector can be used to show your Element
\ Network
\ Console log
\ ScreenCast
\ BoxModel
\ Native View
and so on.
Debugger can be used to debug your bundle js source, you can set Breakpoint
\ watch CallStack
.