我认为使用 Google Chrome 的无头模式可以密切监视外观，所以我尝试了一下。

你好。
我是Mandai，负责Wild 开发团队。

Beyond Co., Ltd.是一家MSP，因此我们根据客户订单监控各种事情。

其中，有一类监控称为外观监控，它使用与用户访问站点相同（或相似）的方法来访问站点，并检查页面是否正确显示。

有各种工具可以用来访问站点并检查数据是否被正确收集，并且可以使用curl等自己完成，但是这些方法不允许从各种监控工具接收警报的人您只需访问该网站即可查明原因。

没关系，但是如果您使用 Google Chrome 的无头模式，您可以通过 DevTools 获取有关哪些内容需要很长时间才能获取的详细信息，这样您就可以在不查看网站的情况下调查原因。我想探讨一下这种可能性。这可能成为可能。

准备

首先，收集尝试所需的一切。
还有一个通过稍后复制和粘贴来工作的示例。

 

谷歌浏览器

首先，安装以无头模式运行的 Google Chrome（版本 59 或更高版本）。
此版本的 Google Chrome 已经稳定，因此请像往常一样使用安装程序进行安装。
另外，如果启用了自动更新，我认为它们已经安装了。

 

Node.js

这次，我使用的是最新版本，8.0.0，但我认为即使它相当旧也没关系。

我已经使用 npm 安装了以下模块。

• chrome 启动器
• chrome 远程接口

chrome-launcher 用于从 Node.js 启动 Google Chrome。
chrome-remote-interface 用于从 Node.js 访问 Google Chrome 的 DevTools。

npm 安装 chrome-launcher chrome-remote-interface

 

示例脚本包含一个进程，每次启动时都会启动 Google Chrome，退出时会停止它，但如果你要认真使用它，我觉得你可以让 Google Chrome 保持运行（内存使用量似乎很快）增加，因此您可能需要定期重新启动它。）

安装完以上两件事后，就可以开始了。

关于如何使用谷歌浏览器无头模式的基本信息，可以参考谷歌浏览器59，它标配了无头模式，我们就来玩一下吧。
有关如何从 Node.js 使用 Google Chrome 的无头模式的基本信息，请参阅尝试从 Node.js 使用无头 Google Chrome。

 

示例脚本

我们准备了以下示例，请放心使用！

const ChromeLauncher = require('chrome-launcher'); const CDP = require('chrome-remote-interface'); 函数 launchChrome(headless = true) { ChromeLauncher.launch({ 端口: 9222, autoSelectChrome: true, chromeFlags: [ '--disable-gpu', headless ? '--headless' : '', '--no-sandbox', ], }).then(launcher => { CDP(协议 => { setTimeout(() => { 协议.close(); process.exit(); }, 10000); const {Page, Network} = Promise.all([ Page.enable(), Network.enable(), ]).then(() => { Page.navigate({url : 'https://beyondjapan.com/blog/2017/07/headless-chrome-networks'}); Network.responseReceived(res => { console .log(r) }) }) }) }) } launchChrome();

 

由于它不会自动结束，所以我使用 setTimeout 在 10 秒后结束它。
在一个页面内发生大量通信的站点将会有大量输出，但是如果您提取一个

{ requestId：'30371.7375'，frameId：'30371.1'，loaderId：'30371.190'，时间戳：1197407.412915，类型：'文档'，响应：{ url：'https://beyondjapan.com/'，状态：200，statusText : 'OK', headers: { 日期: 'Tue, 18 Jul 2017 04:16:02 GMT', 'Transfer-Encoding': 'chunked', 服务器: 'nginx', 连接: 'keep-alive', 链接: '<https://beyondjapan.com/cms-json/> ; rel="https://api.w.org/"', Vary: 'Accept-Encoding', 'Content-Type': 'text/html' }, mimeType: 'text/html '，connectionReused：假，connectionId：5394，remoteIPAddress：'122.218.102.93'，remotePort：80，fromDiskCache：假，fromServiceWorker：假，encodedDataLength：253，计时：{ requestTime：1197406.917743，proxyStart：-1，proxyEnd：-1 ，dnsStart：0.944999977946281，dnsEnd：2.30200006626546，connectStart：2.30200006626546，connectEnd：7.89500004611909，sslStart：-1，sslEnd：-1，workerStart：-1，workerReady：-1，发送开始：7.98300001770258，发送结束：8.11700010672212，推送开始：0，推送结束: 0, receiveHeadersEnd: 494.426999939606 }, 协议: 'http/1.1', securityState: '中性' } }

 

看来大部分可以从DevTools的Network选项卡中获取的信息都可以获取到。
看来时间戳周围的所有单位都是毫秒。

DevTools 似乎还能够做所有能做的事情，例如删除和添加 cookie（这对于监视使用会话的站点可能很有用）、清除缓存以及重写用户代理。
看起来创建一个显示使用 D3.js 获得的数据的 UI 会很有趣！

 

概括

您对 Google Chrome 无头模式中的外观监控感觉如何？

我认为使用监控工具会更便宜，但是由于您可以获取加载内容的所有响应，因此您可以立即识别诸如 CDN 发生的情况，或者 API 的响应非常慢之类的情况。成为它的用途。

就是这样。