Playground
@tripo3d/fingerprint 的交互测试台。所有按钮调用真实库函数,输出进入下方日志面板。
验证「零网络请求」
打开浏览器 DevTools → Network 面板 → 过滤 openfpcdn / fingerprintjs / monitoring。然后点击下方任意按钮,过滤结果应始终为空。
包含的能力
Run load() + get()调用主 API,展示 visitorId、confidence、version、components 总览与逐项耗时逐源采集直接调用 getUnstableCanvasFingerprint / getUnstableAudioFingerprint / getUnstableScreenResolution / getUnstableHardwareConcurrency 等浏览器引擎判定isAndroid / isChromium / isWebKit / isGecko / isDesktopWebKit / isSamsungInternet 等返回值一览hashComponents 实测把当前 components 选择性 hash —— 比较「全量 hash」与「稳定子集 hash」的差异localStorage 兜底演示生产推荐写法:先读 vid,无则计算,写入 localStorage稳定性测试连续运行 5 次,对比 visitorId 是否完全一致;不一致时高亮变化字段
设计要点
单文件 + 模块单例日志
整个 playground 在一个 Playground.vue 里,所有调用结果统一推到本地的 logs ref,避免每张卡片自管输出。
components 大对象的展示
fp.get() 返回的 components 对象在桌面 Chrome 上往往有 30+ 字段。用 <details> 折叠展示,避免日志面板被刷屏。
网络监控提示
页面顶部固定提示用户打开 DevTools Network 面板检查 —— 这是验证「零遥测」的最直接手段。