Skip to content

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 面板检查 —— 这是验证「零遥测」的最直接手段。

源码参考

Playground.vue

基于 MIT 协议发布(内部使用)