aosp15上winscope离线html如何使用？

背景：

aosp15上的如何使用Winscope前面已经有分享过相关的blog，这块其实和aosp14没啥大的差别，具体可以看如下2个文章：
手把手教你aosp14编译Winscope
安卓aosp15手机上如何离线获取winscope文件

文章中也说明在aosp15如果直接使用编译好的离线html是有问题的，无法正常显示抓取的Winscope文件。针对这样一个问题对于有些同学来说还是很不友好，因为很可能他们不想搭建node相关的环境，那么针对 aosp15上Winscope离线的html是否真的不可以使用呢？

这个问题的解决还得感谢我们有前端背景学员朋友“小周佩奇i”提供的相关方案，下面来分享一下aosp15上winscope离线html如何使用。

无法使用离线html原因

1、直接文件方式打开html

2、导入对应Winscope包发现画面没有反应，其实是报错了，具体报错情况如下：

'Worker': Script at 'file:///media/test/49a0eb6b-f410-4eed-9e0a-952e3c75d2b2/home/test/aosp15/development/tools/winscope/dist/prod/engine_bundle.js' cannot be accessed from origin 'null'.
    at initWasm (wasm_engine_proxy.ts:24:20)
    at parser_factory_ParserFactory.initializeTraceProcessor (parser_factory.ts:131:7)
    at parser_factory_ParserFactory.createParsers (parser_factory.ts:63:39)
    at TracePipeline.loadUnzippedArchive (trace_pipeline.ts:210:57)
    at async TracePipeline.loadFiles (trace_pipeline.ts:72:37)
    at async Mediator.loadFiles (mediator.ts:238:7)
    at async mediator.ts:123:43
    at async AppFilesUploaded.visit (winscope_event.ts:71:21)
    at async Mediator.onWinscopeEvent (mediator.ts:119:67)
    at async AppComponent.onFilesUploaded (app_component.ts:531:25)

报错大概原因（引用学员朋友写的）：
就是sf layer 是bp的方式存储，js使用bp应该是要通过wasm来，可以理解为js通过一个标准接口来执行native代码，类似jni

不过我们可能不关心原因，因为这块毕竟属于前端的知识，我们更关心应该怎么解决

解决html直接导入Winscope文件报错

1、用npm安好http-server

npm install -g http-server

2、然后到cd到html目录执行http-server
例如我们到development/tools/winscope/dist/prod目录下执行http-server

test@test:~/aosp15/development/tools/winscope/dist/prod$ http-server 
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.31.142:8080
Hit CTRL-C to stop the server

3、进入浏览器，访问http://127.0.0.1:8080地址既可以

这个时候再进行导入Winscope相关文件，或者在线抓取也可以，最后可以看到如下图所示的成功画面：

更多framework实战相关干货，请关注下面“千里马学框架”