11# ui-viewer
2+ [ ![ github actions] ( https://github.com/codematrixer/ui-viewer/actions/workflows/release.yml/badge.svg )] ( https://github.com/codematrixer/ui-viewer/actions )
3+ [ ![ pypi version] ( https://img.shields.io/pypi/v/uiviewer.svg )] ( https://pypi.python.org/pypi/uiviewer )
4+ ![ python] ( https://img.shields.io/pypi/pyversions/uiviewer.svg )
5+
26UI hierarchy visualization tool, supporting Android, iOS, HarmonyOS NEXT.
37
4- ![ showcase] ( ./docs/imgs/show.gif )
8+ This project is developed using FastAPI and Vue. It starts the service locally and displays UI hierarchy tree through web browser.
9+
10+ ![ show] ( https://i.ibb.co/Phfm9Q1/show.gif )
511
612# Installation
13+ - python3.8+
14+
715``` shell
816pip3 install -U uiviewer
917```
1018
1119# Run
12- Start with a default port (8000)
20+ Run the following command on the terminal. (default port ` 8000 ` )
21+
1322``` shell
1423uiviewer
1524# or
1625python3 -m uiviewer
26+
27+ INFO: Started server process [46814]
28+ INFO: Waiting for application startup.
29+ INFO: Application startup complete.
30+ INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
31+ INFO: 127.0.0.1:55080 - " GET / HTTP/1.1" 307 Temporary Redirect
32+ INFO: 127.0.0.1:55080 - " GET /static/index.html HTTP/1.1" 200 OK
33+ INFO: 127.0.0.1:55080 - " GET /static/css/style.css HTTP/1.1" 200 OK
34+ INFO: 127.0.0.1:55080 - " GET /static/js/index.js HTTP/1.1" 200 OK
35+ INFO: 127.0.0.1:55080 - " GET /static/js/api.js HTTP/1.1" 200 OK
36+ INFO: 127.0.0.1:55082 - " GET /static/js/utils.js HTTP/1.1" 200 OK
37+ INFO: 127.0.0.1:55082 - " GET /static/js/config.js HTTP/1.1" 200 OK
38+ INFO: 127.0.0.1:55082 - " GET /version HTTP/1.1" 200 OK
1739```
18- Start with a custom port
19- ```
40+ And then open the browser to [ http://localhost:8000 ] ( http://localhost:8000 )
41+
42+ You can also customize port to start the service.
43+ ``` shell
2044uiviewer -p < PORT>
45+ # or
2146python3 -m uiviewer -p < PORT>
2247
2348```
24- and then open the browser to [ http://localhost:8000 ] ( http://localhost:8000 )
49+
2550
2651
2752# Tips
@@ -33,17 +58,40 @@ and then open the browser to [http://localhost:8000](http://localhost:8000)
3358 ```
3459 - Second, Use ` tidevice ` or ` iproxy ` to forward the wda port,and keep it running.
3560 ```
36- tidevice relay <local_port> 8100
61+ tidevice relay 8100 8100
62+ ```
63+ - And then, To ensure the success of the browser to access ` http://localhost:8100/status ` , return like this:
64+ ```
65+ {
66+ "value": {
67+ "build": {
68+ "productBundleIdentifier": "com.facebook.WebDriverAgentRunner",
69+ "time": "Mar 25 2024 15:17:30"
70+ },
71+ ...
72+ "state": "success",
73+ "ready": true
74+ },
75+ "sessionId": null
76+ }
3777 ```
38- - Finally, To ensure the success of the browser to access ` http://localhost:<local_port>/status `
78+ - Finally, Input the ** ` wdaUrl ` ** in the web page, such as ` http://localhost:8100 `
79+
3980- On iOS,WDA can easily freeze when dumping high UI hierarchy. You can reduce the ** ` maxDepth ` ** on the web page. The default is 30.
4081
41- # preview
82+ # Preview
4283- HarmonyOS
43- ![ harmony] ( ./docs/imgs /harmony.png)
84+ ![ harmony] ( https://i.ibb.co/82BrJ1H /harmony.png)
4485
4586- Android
46- ![ android] ( ./docs/imgs /android.png)
87+ ![ android] ( https://i.ibb.co/RySs497 /android.png)
4788
4889- iOS
49- ![ ios] ( ./docs/imgs/ios.png )
90+ ![ ios] ( https://i.ibb.co/VVWtTS3/ios.png )
91+
92+
93+ # Relevant
94+ - https://github.com/codematrixer/hmdriver2
95+ - https://github.com/openatx/uiautomator2
96+ - https://github.com/openatx/facebook-wda
97+ - https://github.com/alibaba/web-editor
0 commit comments