引言
近年来，前端开发领域中兴起了很多优秀的库和工具。其中，使用频率最高的必定要数 NPM，也就是 JavaScript 的包管理器。NPM 提供了海量的插件和依赖，这使得开发者可以更加高效地完成自己想做的事情。本篇文章要介绍的就是在 NPM 上发布的一个名为「spot-track」的库，它可以帮助我们更方便地跟踪和监控指定位置的 Chrome 浏览器页面的截图。
spot-track 使用教程
安装
首先是安装 spot-track 库。可以选择在终端输入如下命令来进行安装：
npm install spot-track
成功安装后，就可以在项目之中直接使用了。
跟踪截图
spot-track 通过使用 puppeteer 来进行操作。当你需要开始跟踪页面截图的时候，需要以如下方式初始化一个 spot-track 实例：
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------------- - -
--------- -----
----- -----------------
--
----- --------------- - -
---- -------------------------
---------- -----------
---------- -----
-------- ------
--------- ---- - - - ---
--
----- ----------- - ------------------------------- -----------------上述代码表示，我们需要监控搜索引擎 Google 的首页，截图的质量阈值为 0.99，超时时间为 60 秒。除此之外，跟踪操作将会每分钟执行一次，截图都会保存在指定的输出目录之下。
接下来，让我们看一下如何进行跟踪：
await spotTracker.track();
这一行简单的代码调用了 spotTrack 实例中的 track 方法，以开始截图跟踪。当跟踪结束后，所有截图都会自动保存在设置的 outputDir 路径下。
测试代码示例
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------------- - -
--------- -----
----- -----------------
--
----- --------------- - -
---- -------------------------
---------- -----------
---------- -----
-------- ------
--------- ---- - - - ---
--
----- ----------- - ------------------------------- -----------------
------ ---------- -
----- --------------------
-----上述代码展现了一个简单的例子，它可以跟踪 Google 首页的截图。你也可以根据自己的需要来进行修改和调整。
总结
以上是 spot-track 库的使用教程。恭喜你，现在你已经可以开始使用 spot-track 了！通过这个简单的库，我们可以更加方便地跟踪和监控某个页面的截图，并且也可以轻松地使用确切的 URL 地址来指定需要跟踪的页面。这个库对于日常生活或者一些工作中的应用场景来说都非常有帮助，相信它会在你的开发中成为一个不可或缺的工具。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fe2