Attack on Life ⚔️

问题

Chrome下访问网页正常，但当打开开发者工具时，网页直接崩溃掉。如果在开启开发者工具的情况下，刷新页面仍然崩溃。当关闭开发者工具的情况下进行刷新时页面是正常加载运行的。

版本：Chrome v130.0.6723.70。版本v129下正常。

分析代码

项目中经常会使用很多第三方的NPM包，比如Mousetrap，很多时候会遇到bug，但是官方的bug还没修复或者还没合并发包，那么这个时候怎么办呢。这里总结下方法。

Fork仓库，走PR流程

fork仓库，源码修改，提交PR，等待官方合并和发布新包。这个方式肯定是最好的，取之社区，也回馈了社区。

但这个方式的缺点，也很明显，比如官方动作特别慢且本身我们又紧急依赖于该包的，那么这时这个方案就显得不是很合适了。

npm依赖版本调整

WEB如果提供了账户登录，我们自然可以区分。如果是匿名用户我们如何区分呢，这时就需要浏览器指纹了。浏览器指纹是浏览器在特定时间点上，由用户设备上所有可用的信息生成的唯一标识符。浏览器JS本身是无法直接提供指纹的，需要自行实现，当然社区已有成熟的类库，比如 fingerprintjs。

fingerprintjs v3

fingerprintjs最新版是v4，但是v4和v3的License不同，v4使用的协议是BSL，要求版本推出4年后才会转MIT，因此2024年，我们还无法使用v4，而v3是MIT协议，则可以放心使用。

准确率

• 开源版准确率为(40% - 60%)，商用版为99.5%，注意服务端之所以准确率高，是因为也包含了服务端组件。
• 指纹有效期只有几周。

MacBook Pro 2024 14寸💻

目前使用的我司发的M3 Pro，12核/36G内存，目前还够用。习惯了14，觉得还真不错，轻便的同时保证了性能。

AirPods 3 🎧

AirPods死忠粉了，从1代定期更新到3代，很不错的耳机。

实际开发中经常解析UA头部来判断用户设备信息，比如判断是Win还是Mac，或者判断是不是移动设备等等。我们直接用userAgent的话就自己手动解析该字符串，并不是很方便。比较简单的办法是引入ua-parser-js，这是一个成熟的类库，有了它就可以方便的获取ua中携带的信息了。

用法

先说下用法。

1
2
3
4
5
6
7
8
9
10
11
12
13

const parser = new UAParser();

console.log(parser.getBrowser());
// {"name":"Chrome","version":"130.0.0.0","major":"130"}

console.log(parser.getOS());
// {name: 'Mac OS', version: '10.15.7'}

console.log(parser.getDevice());
// {vendor: 'Apple', model: 'Macintosh', type: undefined}

// 推荐使用v2版时，开启客户端提示
UAParser().withClientHints();

通过UAParser解析后的结果是一个对象，包含浏览器、设备、系统、引擎、CPU等信息。