这个npm工具包，可以获取所有浏览器的详细信息

今天早上一去公司，组长老张就要开组会，老张说：我们组这个星期的主要任务是埋点开发。小张，你负责公共方法的开发，比如获取浏览器的ua，获取浏览器名称，获取浏览器版本号等。小小张，你负责业务组件内的数据收集，数据组装。我负责拿到数据与服务端对接。好啦，没问题赶紧开始。

会开完后，我和小张坐到工位上跟我说：你知道吗？领导昨晚发火啦。我问：为啥呀？小张说：貌似是因为咱们的网站没有埋点，没有数据统计。所以今天老张才这么着急说让咱们加埋点开发的任务。而且最重要的是领导还对老张喊： 只看界面，你能认识几种浏览器？都不加埋点，怎么做分析？业务还怎么做下去？闭门造车吗？

紧接着，小张就开始发愁了。一上午在哪里翻网页，连GPT都用上了，

我问：小张，愁啥呢？吃饭去呀。

小张说：你要说只提交个浏览器ua，那倒也省事，我直接navigator.userAgent就行了。但浏览器这么多种，有PC的，有H5手机端的，有内置的，而且有的ua看上去就乱七八糟的，我找了一上午，不得头绪啊。

我说：网上有公共方法，你没试试？

小张说：试了，但好多不好使，他们有的直接拷贝别人的文章自己发出来，也不知道验证了没有，我连GPT都用上了，还花了钱，但感觉还是不靠谱。

我说：走，吃饭去吧。回来我帮你弄一弄。

吃完饭我们就午休，结果我还没睡醒，小张就开始摇晃我，说：快跟我说说，这个浏览器详细信息怎么判断啊，代码可别太烂了，老张让我弄，我要是搞一大堆if判断，那最后代码审查的时候，还不收拾我。我说：你这样，来吧。

安装js-tool-big-box工具库

执行安装命令

npm i js-tool-big-box

引入browserBox对象

由于做了模块化区分，避免让开发者使用工具库导致最终上线包过大，采用了模块化的方式，你可以用哪个就只引入那个对象

import { browserBox } from 'js-tool-big-box';

获取浏览器详细信息

你可以引入browserBox对象后，使用下面的getBrowserInfo方法，来获取当前浏览器的详细信息，代码如下：

const info = browserBox.getBrowserInfo();
console.log('浏览器详细信息', info);

获取到的结果值是一个对象，目前有3个返回值：

name： 浏览器的名称；

version： 浏览器的版本号；

ua： 浏览器的userAgent信息

猜一猜下面的都是什么浏览器？

目前可检测出的浏览器有

我跟小张说，目前可检测出的浏览器呀，几乎市面上的都可以检测到，包括PC的，老旧IE的，Edge的，内置的，一些手机自带的，版本号也可以分析出来。

看到这个结果后，小张开心极了，然后不好的是，我看他下午摸了一下午的鱼。那条鱼还是赶海的时候从海里抓的，总是这么摸，也不是那鱼还能坚持多久，反正之前一直螃蟹让他就这么摸死了。