windows系统上aosp15上winscope离线html如何使用？

背景：

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

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

对于ubuntu系统前面已经有相关文章分享过了：

程序员偷懒神器：aosp15上winscope离线html如何使用？

今天主要要分享一下很多学员朋友使用Windows操作系统办公同学，也就是Windows上如何使用aosp15的Winscope离线版本（马哥编译安卓15的Winscope离线版本相关文件，学员可以vip群里获取）。

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

无法使用离线html原因

1、直接文件方式打开html

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

bash 复制代码

'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

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

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

上面报错的核心解决办法就是需要安装一个http-serser，并且启动http-server。所以核心就是要安装http-server，它的安装有多种方式这里主要介绍npm安装方式。

其他一些安装方案（感谢vip学员小周佩奇的回答）：

bash 复制代码

一、Node 生态
http-server（最常用，零配置）
安装
npm i -g http-server        # 全局安装一次即可
使用
cd 你的项目目录
http-server -p 8080 -o      # -o 自动打开浏览器
特点：支持 gzip、CORS、HTTPS、自动刷新（--watch）等，体积小。
serve（Vercel 出品，零配置，UI 漂亮）
npm i -g serve
serve -l 8080 .
特点：自动识别单页应用（history fallback），终端里会给出一个漂亮的本地地址列表。
live-server（带自动刷新）
npm i -g live-server
live-server --port=8080
特点：改完文件浏览器自动刷新，适合写 demo 或静态博客。
极简"自己写三行"
如果环境不允许全局安装，可在项目里：
npm init -y
npm i http-server
npx http-server -p 8080
或者把脚本写进 package.json：
"scripts": { "dev": "http-server -p 8080 -o" }
以后 npm run dev 即可。
二、Python 生态（pip）
http.server（Python 3 内置，无需 pip）
python -m http.server 8080
缺点：只支持最基本的 GET、HEAD，没有 CORS、HTTPS。
进阶：pip install 一些"带功能"的小工具
a) simple-http-server
pip install simple-http-server
simple-http-server -p 8080
特点：支持 CORS、HTTPS、上传、自动刷新（--watch）。
b) livereload
pip install livereload
在项目根建一个 serve.py：
from livereload import Server
server = Server()
server.watch('*.html')
server.serve(root='.', port=8080)
然后 python serve.py，改完文件自动刷新。